Flutter 播放列表动画

播放列表英雄动画 & 页面过渡动画，灵感来自 原始 SwiftUI 实现

flutter-playlist-hero-animation_2.mp4

英雄动画卡片翻转效果

在幕后，英雄动画涉及 3️⃣ 个组件

1️⃣ 第一个页面上的组件（占位符）

2️⃣ 第二个页面上的组件（占位符）

3️⃣ 在两者之间动画的组件（飞行中 ✈️，我们想要覆盖的组件）

(在大多数情况下，您不需要覆盖此组件，但您可以覆盖它以实现复杂效果并做一些很酷的事情！)

// 1️⃣ First page hero widget
Hero(
  tag: 'hero-animation', // The tags should match
  flightShuttleBuilder:
      (_, Animation<double> animation, __, ___, ____) {
    final rotationAnimation = Tween<double>(
      begin: 0.0, // This value should match the first Hero
      end: 2.0, // This value should match the second Hero
    ).animate(animation);

    // 3️⃣ ✈️ The widget animating in between
    return AnimatedBuilder(
      animation: rotationAnimation,
      child: const Card(),
      builder: (context, child) {
        return Transform(
          transform: Matrix4.identity()
          	..setEntry(3, 2, 0.003)
            ..rotateX(rotationAnimation.value * pi),
          alignment: Alignment.center,
          child: child,
        );
      },
    );
  },
  child: Transform(
    transform: Matrix4.identity()
    	..setEntry(3, 2, 0.003)
        ..rotateX(0), // This should match the Tween's begin value
    alignment: Alignment.center,
    child: const Card(), // The child widget tree for both Heros should match
  ),
);

// 2️⃣ Second page hero widget
Hero(
  tag: 'hero-animation', // The tags should match
  child: Transform(
    transform: Matrix4.identity()
      ..setEntry(3, 2, 0.003)
      ..rotateX(2 * pi), // This should match the Tween's end value
    alignment: Alignment.center,
    child: const Card(), // The child widget tree for both Heros should match
  ),
);

GitHub

查看 Github