Flutter动画分析之Hero

发表于 更新于 Waline： 阅读次数：

Flutter 中的 Hero 动画是指可以在切换页面时自动跨页面实现 Widget 放大缩小、位移的动画，在用户看起来好像是当前页面的 Widget“飞”入到另外一个页面，底层基于 Overlay 实现。

本文对其原理和应用做一简单分析，主要是对官方介绍的理解与分析，感兴趣的可以直接阅读官方文档。

使用

简单使用 Standard hero animations

详细的代码可以从simple_hero_animation.dart获取。

Hero 动画的使用比较简单：

  • 分别在两个 Flutter 页面将需要实现 Hero 动画的 Widget（一般是图片）作为 Hero 控件的 child
  • 为这两个 Hero 指定同一个 tag
  • Hero 底层基于 Overlay 实现，所有 Hero.child 可以使用 Position 等适用于 Stack.child 的属性

这里要注意：

  • 这两个 Page 要是相邻的页面，否则 Hero 动画不会生效
  • 同一个页面，不能有多个 Hero.tag 相同的 Hero 控件
  • Hero 动画默认只支持大小（size）和位置（location）变化，所以 Hero.child 不建议有其他变化（Don’t rotate your heroes）

按照上述的要求，我们再 FirstHeroPage 中添加第一个 Hero Widget：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Align(
            alignment: Alignment.bottomLeft,
            child: Hero(
                // 注意这里的tag要和下一个页面的Hero.tag一致
                tag: "HeroTag",
                // child是Hero动画会作用的地方
                child: HeroChildWidget(
                  size: const Size.square(100),
                  name: "First",
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) {
                      return const SecondHeroPage();
                    }));
                  },
                )),
          )

然后在要跳转到的第二个页面 SecondHeroPage 添加目标 Hero：

1
2
3
4
5
6
7
8
9
10
11
12
13
Align(
  alignment: Alignment.topCenter,
  child: Hero(
      // 这里的tag与上一个页面的Hero.tag一致
      tag: "HeroTag",
      child: HeroChildWidget(
        size: const Size.square(200),
        name: "Second",
        onTap: () {
          Navigator.pop(context);
        },
      )),
)

这样，当从 FirstHeroPage 跳转到 SecondHeroPage 的时候，Hero 动画作用于 Hero.child，看起来好像是前一个页面的 HeroChildWidget 逐渐从 Alignment.bottomLeft 移动到 Alignment.topCenter，并且大小也从 100 逐渐变为 200。

Simple Hero Animation

原理分析

那么 Hero 动画是如何实现这个效果的呢？

Flutter 中 Page 之间的跳转由 Navigator 管理，在 Navigator 管理的所有 Flutter Page 的上层有一个叠加层 Overlay，在 Z 轴方向上处于所有 Page 上层，其内部的 widget 可以被独立管理。

以当前 Page 为 A，要跳转的 Page 为 B：

  • 那么当从 A 跳转到 B 时，Hero 动画框架会先隐藏 A 中的 Hero.child 并用相同大小的（不可见）组件占位；

  • 与此同时，Hero 动画框架读取要跳转去的 B 中的 Hero.child 并据此创建 Widget，将其大小和位置与为 A 中 Hero.child 对齐，放入到 Overlay 中。同时计算器过渡到 B 中的 Hero.child 位置和大小的路径动画，并执行；

    这也是为什么在上一步我们简单的 Hero 动画中，A 向 B 页面切换时过渡的 Widget 中文字虽然是Second，但是样式看起来和页面中的文字样式不一样，这是因为Overlay（可视为一个特殊的 Stack）上的组件是单独管理的，没有使用我们的 Material 样式。
    要解决这个问题也很简单，在 Hero.child 中添加Material组件使其应用样式即可。

  • 当 B 创建好之后，Hero 动画正在运行中，所以 B 中的 Hero.child 也会被相同大小的（不可见）组件占位；

  • 当 Hero 动画播放完毕之后，位于 Overlay 中的 Widget 被移除，A 和 B 中的 Hero.child 也正常显示。

  • 如果又从 B 返回 A 则上述步骤又会反向（A、B 中 Hero.child 换位）执行一次。

下图是 Flutter 官方对 Hero 动画执行的解释，刚好处于由 A 到 B 过渡的过程，可以看到 A、B 页面中的 Widget 都被移除，只有根据目标 Page——B 中的 Hero.child 创建的位于 Overlay 的 Destination hero 控件在从 A 中对应的位置和大小过渡到 B 中对应的位置和大小：

Hero动画进行中的图解

进阶使用 Radial hero animations

默认实现的 Hero 动画只支持大小和位移变化，通过使用 Radial Transformation（径向转化）可以实现由圆变为正方形的过渡动画。

径向过渡 是由圆形变成正方形的过渡动画。
—— flutter.cn 官网

径向动画的本质还是 Hero 动画，只不过在 Hero 动画之上做了一层由 ClipOval 和 ClipRect 组成的裁剪遮罩，通过二者的配合，导致其重叠部分的内容看起来好像在 Hero 动画播放的时候在圆和正方形之间切换。

官方的实现为radial_hero_animation_animate_rectclip，但是为了便于理解径向动画的原理，我们在之前的 Hero 动画的简单使用代码基础上进行修改。

详细的代码可以从advanced_hero_animation.dart获取。

相对于之前的，我们主要将 HeroChildWidget 类修改为 HeroClippedChildWidget 类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const Size maxClipOvalDiameter = Size.square(200);
const Size minClipOvalDiameter = Size.square(100);

class HeroClippedChildWidget extends StatelessWidget {
  const HeroClippedChildWidget(
      {Key? key, required this.size, required this.name, required this.onTap})
      : super(key: key);

  final Size size;
  final String name;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    // 与圆内切的正方形边长s = 圆半径 * 根号2 = 直径 * 根号2 / 2
    var clipRectSize = maxClipOvalDiameter.width * math.sqrt2 / 2;
    return SizedBox(
      height: size.height,
      width: size.width,
      child: GestureDetector(
        onTap: onTap,
        // 当Hero动画变到最小时，ClipOval与ClipRect相交部分是ClipOval形状
        child: ClipOval(
          child: Center(
            // 当Hero动画变到最大时，ClipOval与ClipRect相交部分是ClipRect形状
            child: ClipRect(
              child: SizedBox(
                height: clipRectSize,
                width: clipRectSize,
                child: Container(
                  color: Colors.blueAccent,
                  child: Center(
                    child: Text(name),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

其中，FirstHeroPage 的 HeroClippedChildWidget.minClipOvalDiameter，SecondHeroPage 中则为 maxClipOvalDiameter。

其效果如图：

advanced_hero

实际上根据此方式，我们也可以监听 Hero.child 的大小、位置变化从而推测出 Hero 动画的进度和方向（是从 from 到 to，还是相反），从而实现更丰富的动画效果。

比如监听进度从而实现旋转：https://github.com/jixiaoyong/flutter_custom_widget/blob/master/lib/widgets/animation_hero_child.dart

原理分析

此类能够实现切换的同时修改 Hero.child 的样式，主要在于 ClipOval 和 ClipRect 的组合效果：

Radial hero animations的示意图

ClipRect 的大小固定为var clipRectSize = maxClipOvalDiameter.width * math.sqrt2 / 2，而 ClipOval 的大小则随着 Hero 动画的变化而变化，始终与 HeroClippedChildWidget 保持一致。

假设从页面 A 到 B 切换时 Hero.child 会从小变大，那么：

  • 刚刚从页面 A 切换时，位于 Overlay 的 HeroClippedChildWidget/ClipOval 大小为 minClipOvalDiameter（也就是 100*100），此时 ClipRect 的大小 clipRectSize（也就是 200/2*根号 2 约等于 141）大于 ClipOval 的大小，所以他们的相交处为 ClipOval，故而 HeroClippedChildWidget 显示为直径为 100 的圆。
  • 当刚刚完整切换到页面 B，Hero 动画将要结束时，位于 Overlay 的 HeroClippedChildWidget/ClipOval 大小为 maxClipOvalDiameter（也就是 200*200），此时 ClipRect 的大小 clipRectSize（依旧是 141）小于 ClipOval 的大小，所以他们的相交处为 ClipRect，故而 HeroClippedChildWidget 显示为边长约为 141 的正方形。
  • 在二者的过渡阶段，就是 ClipOval 注解从小于 ClipRect 变化为大于 ClipRect 的过程，他们相交的区域也从圆变为圆角，再变为正方形。

其他属性

此外，Hero 还有几个属性可以供我们自定义：

  • flightShuttleBuilder 替换页面切换时的默认过渡 Widget。比如从页面 A 切换到 B 时，默认是使用 B 中的 Hero.child，如果此值不为 null 则会展示 flightShuttleBuilder 返回的 Widget。
  • placeholderBuilder 当 Hero 动画开始，页面 A、B 中 Hero.child 隐藏时，会展示 placeholderBuilder 返回的内容或者为空（默认）
  • createRectTween 定义 Hero 动画的过渡组件动画渐变的方式，MaterialApp 默认使用 MaterialRectArcTween()，此外还有 MaterialRectCenterArcTween()（可以等比例缩放）、MaterialPointArcTween()。

示意图如下：

flutter.cn官网Hero示意图

底层实现

Hero

Hero 是一个 StatefulWidget，除了之前提到的各个属性之外，还提供了_allHeroesFor()方法供 HeroController 调用，用于查找指定 Context 下所有的 Hero Widget，并在检测到有重复 Hero.tag 时报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Hero extends StatefulWidget{

  const Hero({
    Key? key,
    required this.tag,// 每个页面不能有多个相同tag的Hero
    this.createRectTween,// 定义Hero过渡Widget切换方式
    this.flightShuttleBuilder,// 替换默认的过渡Widget
    this.placeholderBuilder,// 在Hero动画开始时占位
    this.transitionOnUserGestures = false,// 是否同步手势
    required this.child,// 要实现Hero动画的Widget
  }) : super(key: key);

  // 返回一个Key为Hero.tag的map
  static Map<Object, _HeroState> _allHeroesFor(
    BuildContext context,
    bool isUserGestureTransition,
    NavigatorState navigator,
  ) {
    ...
  }
}

_HeroState

_HeroState 主要是提供 startFlight/endFlight 供 HeroController->_HeroFlight->_HeroFlightManifest 调用；以及根据初始化以及开始/技术 Flight 动画后状态的变化而更改 Hero.child 在屏幕上面（对应页面上原先 Hero Widget 所处位置的区域）的显示效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
void startFlight({ bool shouldIncludedChildInPlaceholder = false }) {
  _shouldIncludeChild = shouldIncludedChildInPlaceholder;
  assert(mounted);
  final RenderBox box = context.findRenderObject()! as RenderBox;
  assert(box != null && box.hasSize);
  setState(() {
    _placeholderSize = box.size;
  });
}

void endFlight({ bool keepPlaceholder = false }) {
  if (keepPlaceholder || _placeholderSize == null)
    return;

  _placeholderSize = null;
  if (mounted) {
    // Tell the widget to rebuild if it's mounted. _placeholderSize has already
    // been updated.
    setState(() {});
  }
}

可以看出，startFlight/endFlight 方法主要影响的是_placeholderSize 的值，并引发 rebuild：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Widget build(BuildContext context) {
  assert(
    context.findAncestorWidgetOfExactType<Hero>() == null,
    'A Hero widget cannot be the descendant of another Hero widget.',
  );

  // _placeholderSize不为null则展示占位Widget
  final bool showPlaceholder = _placeholderSize != null;

  if (showPlaceholder && widget.placeholderBuilder != null) {
    // 如果有指定占位Widget，并且需要展示
    return widget.placeholderBuilder!(context, _placeholderSize!, widget.child);
  }

  if (showPlaceholder && !_shouldIncludeChild) {
    // 在Hero动画执行时，默认是用相同大小的SizeBox占位
    return SizedBox(
      width: _placeholderSize!.width,
      height: _placeholderSize!.height,
    );
  }

  return SizedBox(
    width: _placeholderSize?.width,
    height: _placeholderSize?.height,
    child: Offstage(
      offstage: showPlaceholder,
      child: TickerMode(
        enabled: !showPlaceholder,
        // 只有动画未开始/结束时才会展示child
        child: KeyedSubtree(key: _key, child: widget.child),
      ),
    ),
  );
}

可以看到，Hero 和_HeroState 主要是提供了操纵、统计当前 Page 的 Hero Widget 以及控制其 Hero.child 及占位 Widget 的显示与否，那么在哪里发起和结束 Hero 动画，以及绘制过渡 Widget 的呢？

_HeroFlightManifest

“_HeroFlightManifest：Everything known about a hero flight that’s to be started or diverted.”

_HeroFlightManifest 是一个数据类，主要封装了fromHero/toHero两个_HeroState，并提供 Hero Widget 的位置信息 Rect；此外还封装了过渡动画相关的get animation和createHeroRectTween方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class _HeroFlightManifest {
  _HeroFlightManifest({
    required this.type,
    required this.overlay,
    required this.navigatorSize,
    required this.fromRoute,
    required this.toRoute,
    required this.fromHero,
    required this.toHero,
    required this.createRectTween,
    required this.shuttleBuilder,
    required this.isUserGestureTransition,
    required this.isDiverted,
  }) : assert(fromHero.widget.tag == toHero.widget.tag);

  late final Rect fromHeroLocation = _boundingBoxFor(fromHero.context, fromRoute.subtreeContext);

  late final Rect toHeroLocation = _boundingBoxFor(toHero.context, toRoute.subtreeContext);

  static Rect _boundingBoxFor(BuildContext context, BuildContext? ancestorContext) {
    // 从context中找到对应的RenderObject并转化得到其在ancestorContext坐标系中的Rect
  }

  // 过渡动画相关
  Tween<Rect?> createHeroRectTween({ required Rect? begin, required Rect? end }) {
    final CreateRectTween? createRectTween = toHero.widget.createRectTween ?? this.createRectTween;
    return createRectTween?.call(begin, end) ?? RectTween(begin: begin, end: end);
  }

  Animation<double> get animation {
    return CurvedAnimation(
      // push 和 pop 采用不同的animation
      parent: (type == HeroFlightDirection.push) ? toRoute.animation! : fromRoute.animation!,
      curve: Curves.fastOutSlowIn,
      reverseCurve: isDiverted ? null : Curves.fastOutSlowIn.flipped,
    );
  }
}

HeroController

HeroController 真正在路由切换时操作 Hero 动画。

无论是 CupertinoApp 还是 MaterialApp 都提供了创建 HeroController 的静态方法，在他们对应的 State.initState 方法中创建。

CupertinoTabView 也创建有自己的 HeroController。

以 MaterialApp 为例：

1
2
3
4
5
6
7
8
// MaterialApp类
static HeroController createMaterialHeroController() {
  return HeroController(
    createRectTween: (Rect? begin, Rect? end) {
      return MaterialRectArcTween(begin: begin, end: end);
    },
  );
}

在_MaterialAppState 中创建并持有 HeroController：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class _MaterialAppState extends State<MaterialApp> {
  late HeroController _heroController;

  @override
  void initState() {
    super.initState();
    _heroController = MaterialApp.createMaterialHeroController();
  }

    @override
  Widget build(BuildContext context) {
    // 创建WidgetsApp
    Widget result = _buildWidgetApp(context);
    ...

    return ScrollConfiguration(
      behavior: widget.scrollBehavior ?? const MaterialScrollBehavior(),
      // 注意这里将_heroController传给HeroControllerScope
      child: HeroControllerScope(
        controller: _heroController,
        child: result,
      ),
    );
  }
}

HeroControllerScope 是一个 InheritedWidget，经过上述代码，MaterialApp 内部可以通过HeroControllerScope.of()方法获取到 HeroController。

而在 WidgetsApp 中创建的 Navigator 对应的NavigatorState._updateHeroController方法中会使用其获取 HeroController,并通过HeroController._navigator = this及NavigatorState._updateEffectiveObservers()方法与之绑定。

这样当 Navigator 切换页面时，各个时间都会通知到 HeroController,执行其 didPush/didPop/didRemove/didReplace/didStartUserGesture/didStopUserGesture 等方法，从而触发/终止 Hero 动画。

1
2
3
4
5
6
7
8
9
10
11
12
class HeroController extends NavigatorObserver {

  HeroController({ this.createRectTween });

  final CreateRectTween? createRectTween;

  // 当前位于Overlay中的所有Hero动画，key是Hero.tag
  final Map<Object, _HeroFlight> _flights = <Object, _HeroFlight>{};

  // 从父类NavigatorObserver继承
  NavigatorState? _navigator
}

_maybeStartHeroTransition

HeroController 从 NavigatorObserver 继承到的方法中，除了 didStopUserGesture 都会执行 HeroController._maybeStartHeroTransition 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// If we're transitioning between different page routes, start a hero transition
// after the toRoute has been laid out with its animation's value at 1.0.
void _maybeStartHeroTransition(
  Route<dynamic>? fromRoute,
  Route<dynamic>? toRoute,
  HeroFlightDirection flightType,
  bool isUserGestureTransition,
) {
  if (toRoute != fromRoute && toRoute is PageRoute<dynamic> && fromRoute is PageRoute<dynamic>) {
    final PageRoute<dynamic> from = fromRoute;
    final PageRoute<dynamic> to = toRoute;

    // A user gesture may have already completed the pop, or we might be the initial route
    switch (flightType) {
      case HeroFlightDirection.pop:
        if (from.animation!.value == 0.0) {
          return;
        }
        break;
      case HeroFlightDirection.push:
        if (to.animation!.value == 1.0) {
          return;
        }
        break;
    }

    // 对于pop事件，如果maintainState为true，那么我们立即得知hero动画的目标尺寸
    // 因为这表示上一个页面还存在，不需要重新layout
    if (isUserGestureTransition && flightType == HeroFlightDirection.pop && to.maintainState) {
      _startHeroTransition(from, to, flightType, isUserGestureTransition);
    } else {
      // 否则应该等到下一帧、to页面layout之后再开始

      // Putting a route offstage changes its animation value to 1.0. Once this
      // frame completes, we'll know where the heroes in the `to` route are
      // going to end up, and the `to` route will go back onstage.
      to.offstage = to.animation!.value == 0.0;

      WidgetsBinding.instance.addPostFrameCallback((Duration value) {
        _startHeroTransition(from, to, flightType, isUserGestureTransition);
      });
    }
  }
}

_startHeroTransition

当上述条件满足之后，便可以开始执行 Hero 动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// Find the matching pairs of heroes in from and to and either start or a new
// hero flight, or divert an existing one.
void _startHeroTransition(
  PageRoute<dynamic> from,
  PageRoute<dynamic> to,
  HeroFlightDirection flightType,
  bool isUserGestureTransition,
) {
  // If the `to` route was offstage, then we're implicitly restoring its
  // animation value back to what it was before it was "moved" offstage.
  to.offstage = false;

  final NavigatorState? navigator = this.navigator;
  // 注意这里获取到了OverlayState，用来放置Hero过渡动画
  final OverlayState? overlay = navigator?.overlay;
  // If the navigator or the overlay was removed before this end-of-frame
  // callback was called, then don't actually start a transition, and we don'
  // t have to worry about any Hero widget we might have hidden in a previous
  // flight, or ongoing flights.
  if (navigator == null || overlay == null)
    return;

  final RenderObject? navigatorRenderObject = navigator.context.findRenderObject();

  if (navigatorRenderObject is! RenderBox) {
    assert(false, 'Navigator $navigator has an invalid RenderObject type ${navigatorRenderObject.runtimeType}.');
    return;
  }
  assert(navigatorRenderObject.hasSize);

  // At this point, the toHeroes may have been built and laid out for the first time.
  //
  // If `fromSubtreeContext` is null, call endFlight on all toHeroes, for good measure.
  // If `toSubtreeContext` is null abort existingFlights.
  final BuildContext? fromSubtreeContext = from.subtreeContext;
  final Map<Object, _HeroState> fromHeroes = fromSubtreeContext != null
    ? Hero._allHeroesFor(fromSubtreeContext, isUserGestureTransition, navigator)
    : const <Object, _HeroState>{};
  final BuildContext? toSubtreeContext = to.subtreeContext;
  final Map<Object, _HeroState> toHeroes = toSubtreeContext != null
    ? Hero._allHeroesFor(toSubtreeContext, isUserGestureTransition, navigator)
    : const <Object, _HeroState>{};

  for (final MapEntry<Object, _HeroState> fromHeroEntry in fromHeroes.entries) {
    final Object tag = fromHeroEntry.key;
    final _HeroState fromHero = fromHeroEntry.value;
    final _HeroState? toHero = toHeroes[tag];
    final _HeroFlight? existingFlight = _flights[tag];
    final _HeroFlightManifest? manifest = toHero == null
      ? null
      : _HeroFlightManifest(
          type: flightType,
          overlay: overlay,
          navigatorSize: navigatorRenderObject.size,
          fromRoute: from,
          toRoute: to,
          fromHero: fromHero,
          toHero: toHero,
          createRectTween: createRectTween,
          // 优先使用toHero、fromHero指定的flightShuttleBuilder，没有的话
          // 使用默认的shuttleBuilder，也就是toHero.child
          shuttleBuilder: toHero.widget.flightShuttleBuilder
                        ?? fromHero.widget.flightShuttleBuilder
                        ?? _defaultHeroFlightShuttleBuilder,
          isUserGestureTransition: isUserGestureTransition,
          isDiverted: existingFlight != null,
        );

    // Only proceed with a valid manifest. Otherwise abort the existing
    // flight, and call endFlight when this for loop finishes.
    if (manifest != null && manifest.isValid) {
      toHeroes.remove(tag);
      if (existingFlight != null) {
        // 如果已经存在Hero过渡动画，则将其转到新的方向
        existingFlight.divert(manifest);
      } else {
        // 开始全新的Hero过渡动画
        _flights[tag] = _HeroFlight(_handleFlightEnded)..start(manifest);
      }
    } else {
      existingFlight?.abort();
    }
  }

  // The remaining entries in toHeroes are those failed to participate in a
  // new flight (for not having a valid manifest).
  //
  // This can happen in a route pop transition when a fromHero is no longer
  // mounted, or kept alive by the [KeepAlive] mechanism but no longer visible.
  // TODO(LongCatIsLooong): resume aborted flights: https://github.com/flutter/flutter/issues/72947
  for (final _HeroState toHero in toHeroes.values)
    toHero.endFlight();
}

void _handleFlightEnded(_HeroFlight flight) {
  _flights.remove(flight.manifest.tag);
}

Widget _defaultHeroFlightShuttleBuilder(
  BuildContext flightContext,
  Animation<double> animation,
  HeroFlightDirection flightDirection,
  BuildContext fromHeroContext,
  BuildContext toHeroContext,
) {
  final Hero toHero = toHeroContext.widget as Hero;
  return toHero.child;
}

_HeroFlight

经过上面的分析，最终是在_HeroFlight 方法中真正执行 Hero 动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class _HeroFlight {
  // The simple case: we're either starting a push or a pop animation.
  void start(_HeroFlightManifest initialManifest) {
    assert(!_aborted);
    assert(() {
      final Animation<double> initial = initialManifest.animation;
      assert(initial != null);
      final HeroFlightDirection type = initialManifest.type;
      assert(type != null);
      switch (type) {
        case HeroFlightDirection.pop:
          return initial.value == 1.0 && initialManifest.isUserGestureTransition
              // During user gesture transitions, the animation controller isn't
              // driving the reverse transition, but should still be in a previously
              // completed stage with the initial value at 1.0.
              ? initial.status == AnimationStatus.completed
              : initial.status == AnimationStatus.reverse;
        case HeroFlightDirection.push:
          return initial.value == 0.0 && initial.status == AnimationStatus.forward;
      }
    }());

    manifest = initialManifest;

    final bool shouldIncludeChildInPlaceholder;
    switch (manifest.type) {
      case HeroFlightDirection.pop:
        _proxyAnimation.parent = ReverseAnimation(manifest.animation);
        shouldIncludeChildInPlaceholder = false;
        break;
      case HeroFlightDirection.push:
        _proxyAnimation.parent = manifest.animation;
        shouldIncludeChildInPlaceholder = true;
        break;
    }

    heroRectTween = manifest.createHeroRectTween(begin: manifest.fromHeroLocation, end: manifest.toHeroLocation);
    // 执行_HeroState.startFlight方法，移除Hero.child，展示占位Widget
    manifest.fromHero.startFlight(shouldIncludedChildInPlaceholder: shouldIncludeChildInPlaceholder);
    manifest.toHero.startFlight();
    // 在overlay上添加过渡组件_buildOverlay
    manifest.overlay.insert(overlayEntry = OverlayEntry(builder: _buildOverlay));
    // 监听动画进度，以便实时改变过渡组件_buildOverlay的样式
    _proxyAnimation.addListener(onTick);
  }
}

Hero 动画实际播放的过渡动画内容，由_HeroFlight._buildOverlay 根据动画进度创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// The OverlayEntry WidgetBuilder callback for the hero's overlay.
Widget _buildOverlay(BuildContext context) {
  assert(manifest != null);
  // 默认是toHero.child
  shuttle ??= manifest.shuttleBuilder(
    context,
    manifest.animation,
    manifest.type,
    manifest.fromHero.context,
    manifest.toHero.context,
  );
  assert(shuttle != null);

  return AnimatedBuilder(
    // 监听动画进度
    animation: _proxyAnimation,
    child: shuttle,
    builder: (BuildContext context, Widget? child) {
      final Rect rect = heroRectTween.evaluate(_proxyAnimation)!;
      final RelativeRect offsets = RelativeRect.fromSize(rect, manifest.navigatorSize);
      // 这里根据动画的进度更改shuttle的位置和大小、透明度
      // Overlay本质上是一个特殊的Stack，所以这里使用Positioned定位
      return Positioned(
        top: offsets.top,
        right: offsets.right,
        bottom: offsets.bottom,
        left: offsets.left,
        child: IgnorePointer(
          child: RepaintBoundary(
            child: FadeTransition(
              opacity: _heroOpacity,
              child: child,
            ),
          ),
        ),
      );
    },
  );
}

总结

Flutter 中 Hero 动画是基于 Overlay 实现的，监听 Navigator 路由变化，从而在不同 Flutter 页面切换时触发的、表现为 Hero.child 从当前页面“飞”到目标页面对应位置，并伴随着位置、大小、透明度等变化的动画。

MaterialApp 或者 CupertinoApp 对应的State.initState方法中创建 HeroController，并通过 HeroControllerScope 提供给前面创建的 WidgetsApp 内部创建的 Navigator 并绑定；这样当路由变化时 HeroController 收到通知并在HeroState._startHeroTransition方法中通过Hero._allHeroesFor方法获取到当前页和目标页面的 Hero 动画组件，将其 Animation、Tween、Rect、_HeroState 等封装到_HeroFlightManifest 中，传递给_HeroFlight.start执行动画，并在_HeroFlight.onTick方法监听处理动画进度，从而导致_HeroFlight._buildOverlay创建的过渡 Widget 位置、大小、透明度等变化，产生 Hero Widget“飞入”的视觉效果。

参考资料

主动画 (Hero animations)

Hero class

Overlay class

radial_hero_animation_animate_rectclip