9.6 动画切换组件（AnimatedSwitcher）

实际开发中，我们经常会遇到切换UI元素的场景，比如Tab切换、路由切换。为了增强用户体验，通常在切换时都会指定一个动画，以使切换过程显得平滑。Flutter SDK组件库中已经提供了一些常用的切换组件，如PageView、TabView等，但是，这些组件并不能覆盖全部的需求场景，为此，Flutter SDK中提供了一个AnimatedSwitcher组件，它定义了一种通用的UI切换抽象。

9.6.1 AnimatedSwitcher

AnimatedSwitcher 可以同时对其新、旧子元素添加显示、隐藏动画。也就是说在AnimatedSwitcher的子元素发生变化时，会对其旧元素和新元素做动画，我们先看看AnimatedSwitcher 的定义：

1const AnimatedSwitcher({
2  Key? key,
3  this.child,
4  required this.duration, // 新child显示动画时长
5  this.reverseDuration,// 旧child隐藏的动画时长
6  this.switchInCurve = Curves.linear, // 新child显示的动画曲线
7  this.switchOutCurve = Curves.linear,// 旧child隐藏的动画曲线
8  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, // 动画构建器
9  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器
10})

当AnimatedSwitcher的 child 发生变化时（类型或 Key 不同），旧 child 会执行隐藏动画，新 child 会执行执行显示动画。究竟执行何种动画效果则由transitionBuilder参数决定，该参数接受一个AnimatedSwitcherTransitionBuilder类型的 builder，定义如下：

1typedef AnimatedSwitcherTransitionBuilder =
2  Widget Function(Widget child, Animation<double> animation);

该builder在AnimatedSwitcher的child切换时会分别对新、旧child绑定动画：

对旧child，绑定的动画会反向执行（reverse）
对新child，绑定的动画会正向指向（forward）

这样一下，便实现了对新、旧child的动画绑定。AnimatedSwitcher的默认值是AnimatedSwitcher.defaultTransitionBuilder ：

1Widget defaultTransitionBuilder(Widget child, Animation<double> animation) {
2  return FadeTransition(
3    opacity: animation,
4    child: child,
5  );
6}

可以看到，返回了FadeTransition对象，也就是说默认情况，AnimatedSwitcher会对新旧child执行“渐隐”和“渐显”动画。

例子

下面我们看一个列子：实现一个计数器，然后在每一次自增的过程中，旧数字执行缩小动画隐藏，新数字执行放大动画显示，代码如下：

1import 'package:flutter/material.dart';
2
3class AnimatedSwitcherCounterRoute extends StatefulWidget {
4   const AnimatedSwitcherCounterRoute({Key key}) : super(key: key);
5
6   @override
7   _AnimatedSwitcherCounterRouteState createState() => _AnimatedSwitcherCounterRouteState();
8 }
9
10 class _AnimatedSwitcherCounterRouteState extends State<AnimatedSwitcherCounterRoute> {
11   int _count = 0;
12
13   @override
14   Widget build(BuildContext context) {
15     return Center(
16       child: Column(
17         mainAxisAlignment: MainAxisAlignment.center,
18         children: <Widget>[
19           AnimatedSwitcher(
20             duration: const Duration(milliseconds: 500),
21             transitionBuilder: (Widget child, Animation<double> animation) {
22               //执行缩放动画
23               return ScaleTransition(child: child, scale: animation);
24             },
25             child: Text(
26               '$_count',
27               //显示指定key，不同的key会被认为是不同的Text，这样才能执行动画
28               key: ValueKey<int>(_count),
29               style: Theme.of(context).textTheme.headline4,
30             ),
31           ),
32           RaisedButton(
33             child: const Text('+1',),
34             onPressed: () {
35               setState(() {
36                 _count += 1;
37               });
38             },
39           ),
40         ],
41       ),
42     );
43   }
44 }

运行示例代码，当点击“+1”按钮时，原先的数字会逐渐缩小直至隐藏，而新数字会逐渐放大，我截取了动画执行过程的一帧，如图9-5所示：

图9-5

上图是第一次点击“+1”按钮后切换动画的一帧，此时“0”正在逐渐缩小，而“1”正在“0”的中间，正在逐渐放大。

注意：AnimatedSwitcher的新旧child，如果类型相同，则Key必须不相等。

AnimatedSwitcher实现原理

实际上，AnimatedSwitcher的实现原理是比较简单的，我们根据AnimatedSwitcher的使用方式也可以猜个大概。要想实现新旧 child 切换动画，只需要明确两个问题：

动画执行的时机是什么时候？
如何对新旧child执行动画？

从AnimatedSwitcher的使用方式我们可以看到：当child发生变化时（子 widget 的 key 或类型不同时则认为发生变化），则重新会重新执行build，然后动画开始执行。

我们可以通过继承 StatefulWidget 来实现AnimatedSwitcher，具体做法是在didUpdateWidget 回调中判断其新旧 child 是否发生变化，如果发生变化，则对旧 child 执行反向退场（reverse）动画，对新child执行正向（forward）入场动画即可。下面是AnimatedSwitcher实现的部分核心伪代码：

1Widget _widget; //
2void didUpdateWidget(AnimatedSwitcher oldWidget) {
3  super.didUpdateWidget(oldWidget);
4  // 检查新旧child是否发生变化(key和类型同时相等则返回true，认为没变化)
5  if (Widget.canUpdate(widget.child, oldWidget.child)) {
6    // child没变化，...
7  } else {
8    //child发生了变化，构建一个Stack来分别给新旧child执行动画
9   _widget= Stack(
10      alignment: Alignment.center,
11      children:[
12        //旧child应用FadeTransition
13        FadeTransition(
14         opacity: _controllerOldAnimation,
15         child : oldWidget.child,
16        ),
17        //新child应用FadeTransition
18        FadeTransition(
19         opacity: _controllerNewAnimation,
20         child : widget.child,
21        ),
22      ]
23    );
24    // 给旧child执行反向退场动画
25    _controllerOldAnimation.reverse();
26    //给新child执行正向入场动画
27    _controllerNewAnimation.forward();
28  }
29}
30
31//build方法
32Widget build(BuildContext context){
33  return _widget;
34}

上面伪代码展示了AnimatedSwitcher实现的核心逻辑，当然AnimatedSwitcher真正的实现比这个复杂，它可以自定义进退场过渡动画以及执行动画时的布局等。在此，我们删繁就简，通过伪代码形式让读者能够清楚看到主要的实现思路，具体的实现读者可以参考AnimatedSwitcher源码。

另外，Flutter SDK中还提供了一个AnimatedCrossFade组件，它也可以切换两个子元素，切换过程执行渐隐渐显的动画，和AnimatedSwitcher不同的是AnimatedCrossFade是针对两个子元素，而AnimatedSwitcher是在一个子元素的新旧值之间切换。AnimatedCrossFade实现原理也比较简单，和AnimatedSwitcher类似，因此不再赘述，读者有兴趣可以查看其源码。

9.6.2 AnimatedSwitcher高级用法

假设现在我们想实现一个类似路由平移切换的动画：旧页面屏幕中向左侧平移退出，新页面从屏幕右侧平移进入。如果要用AnimatedSwitcher的话，我们很快就会发现一个问题：做不到！我们可能会写出下面的代码：

1AnimatedSwitcher(
2  duration: Duration(milliseconds: 200),
3  transitionBuilder: (Widget child, Animation<double> animation) {
4    var tween = Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
5     return SlideTransition(
6       child: child,
7       position: tween.animate(animation),
8    );
9  },
10  ...//省略
11)

上面的代码有什么问题呢？我们前面说过在AnimatedSwitcher的 child 切换时会对新child执行正向动画（forward），而对旧child执行反向动画（reverse），所以真正的效果便是：新 child 确实从屏幕右侧平移进入了，但旧child却会从屏幕右侧（而不是左侧）退出。其实也很容易理解，因为在没有特殊处理的情况下，同一个动画的正向和逆向正好是相反（对称）的。

那么问题来了，难道就不能使用AnimatedSwitcher了？答案当然是否定的！仔细想想这个问题，究其原因，就是因为同一个Animation正向（forward）和反向（reverse）是对称的。所以如果我们可以打破这种对称性，那么便可以实现这个功能了，下面我们来封装一个MySlideTransition，它与SlideTransition唯一的不同就是对动画的反向执行进行了定制（从左边滑出隐藏），代码如下：

1class MySlideTransition extends AnimatedWidget {
2  MySlideTransition({
3    Key key,
4    required Animation<Offset> position,
5    this.transformHitTests = true,
6    this.child,
7  })
8      : assert(position != null),
9        super(key: key, listenable: position) ;
10
11  Animation<Offset> get position => listenable;
12  final bool transformHitTests;
13  final Widget child;
14
15  @override
16  Widget build(BuildContext context) {
17    Offset offset=position.value;
18    //动画反向执行时，调整x偏移，实现“从左边滑出隐藏”
19    if (position.status == AnimationStatus.reverse) {
20         offset = Offset(-offset.dx, offset.dy);
21    }
22    return FractionalTranslation(
23      translation: offset,
24      transformHitTests: transformHitTests,
25      child: child,
26    );
27  }
28}

调用时，将SlideTransition替换成MySlideTransition即可：

1AnimatedSwitcher(
2  duration: Duration(milliseconds: 200),
3  transitionBuilder: (Widget child, Animation<double> animation) {
4    var tween=Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
5     return MySlideTransition(
6      child: child,
7      position: tween.animate(animation),
8    );
9  },
10  ...//省略
11)

运行后，我截取动画执行过程中的一帧，如图9-6所示：

图9-6

上图中“0”从左侧滑出，而“1”从右侧滑入。可以看到，我们通过这种巧妙的方式实现了类似路由进场切换的动画，实际上Flutter路由切换也正是通过AnimatedSwitcher来实现的。

SlideTransitionX

上面的示例我们实现了“左出右入”的动画，那如果要实现“左入右出”、“上入下出”或者 “下入上出”怎么办？当然，我们可以分别修改上面的代码，但是这样每种动画都得单独定义一个“Transition”，这很麻烦。本节将封装一个通用的SlideTransitionX 来实现这种“出入动画”，代码如下：

1class SlideTransitionX extends AnimatedWidget {
2  SlideTransitionX({
3    Key key,
4    required Animation<double> position,
5    this.transformHitTests = true,
6    this.direction = AxisDirection.down,
7    this.child,
8  })
9      : assert(position != null),
10        super(key: key, listenable: position) {
11    // 偏移在内部处理      
12    switch (direction) {
13      case AxisDirection.up:
14        _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
15        break;
16      case AxisDirection.right:
17        _tween = Tween(begin: Offset(-1, 0), end: Offset(0, 0));
18        break;
19      case AxisDirection.down:
20        _tween = Tween(begin: Offset(0, -1), end: Offset(0, 0));
21        break;
22      case AxisDirection.left:
23        _tween = Tween(begin: Offset(1, 0), end: Offset(0, 0));
24        break;
25    }
26  }
27
28
29  Animation<double> get position => listenable;
30
31  final bool transformHitTests;
32
33  final Widget child;
34
35  //退场（出）方向
36  final AxisDirection direction;
37
38  late final Tween<Offset> _tween;
39
40  @override
41  Widget build(BuildContext context) {
42    Offset offset = _tween.evaluate(position);
43    if (position.status == AnimationStatus.reverse) {
44      switch (direction) {
45        case AxisDirection.up:
46          offset = Offset(offset.dx, -offset.dy);
47          break;
48        case AxisDirection.right:
49          offset = Offset(-offset.dx, offset.dy);
50          break;
51        case AxisDirection.down:
52          offset = Offset(offset.dx, -offset.dy);
53          break;
54        case AxisDirection.left:
55          offset = Offset(-offset.dx, offset.dy);
56          break;
57      }
58    }
59    return FractionalTranslation(
60      translation: offset,
61      transformHitTests: transformHitTests,
62      child: child,
63    );
64  }
65}

现在如果我们想实现各种“滑动出入动画”便非常容易，只需给direction传递不同的方向值即可，比如要实现“上入下出”，则：

1AnimatedSwitcher(
2  duration: Duration(milliseconds: 200),
3  transitionBuilder: (Widget child, Animation<double> animation) {
4    var tween=Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
5     return SlideTransitionX(
6       child: child,
7       direction: AxisDirection.down, //上入下出
8       position: animation,
9     );
10  },
11  ...//省略其余代码
12)

运行后，我截取动画执行过程中的一帧，如图9-7所示：

图9-7

上图中“0”从底部滑出，而“1”从顶部滑入。读者可以尝试给SlideTransitionX的direction取不同的值来查看运行效果。

总结

本节我们学习了AnimatedSwitcher的详细用法，同时也介绍了打破AnimatedSwitcher动画对称性的方法。我们可以发现：在需要切换新旧UI元素的场景，AnimatedSwitcher将十分实用。

← 上一篇

9.5 交织动画

9.7 动画过渡组件