【Flutter 实战】动画序列、共享动画、路由动画

灰太狼 2022-11-30 15:46 218阅读 0赞

![20200825071144392.png][]

> 老孟导读：此篇文章是 Flutter 动画系列文章第四篇，本文介绍动画序列、共享动画、路由动画。

## 动画序列 ##

Flutter中组合动画使用`Interval`，`Interval`继承自`Curve`，用法如下：

Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
        parent: _animationController, curve: Interval(0.5, 1.0)));

表示`_sizeAnimation`动画从0.5（一半）开始到结束，如果动画时长为6秒，`_sizeAnimation`则从第3秒开始。

`Interval`中`begin` 和`end`参数值的范围是0.0到1.0。

下面实现一个先执行颜色变化，在执行大小变化，代码如下：

class AnimationDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _AnimationDemo();
    }
    
    class _AnimationDemo extends State<AnimationDemo>
        with SingleTickerProviderStateMixin {
      AnimationController _animationController;
      Animation _colorAnimation;
      Animation _sizeAnimation;
    
      @override
      void initState() {
        _animationController =
            AnimationController(duration: Duration(seconds: 5), vsync: this)
        ..addListener((){setState(() {
    
        });});
    
        _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(
            CurvedAnimation(
                parent: _animationController, curve: Interval(0.0, 0.5)));
    
        _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
            parent: _animationController, curve: Interval(0.5, 1.0)));
    
        //开始动画
        _animationController.forward();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                  height: _sizeAnimation.value,
                  width: _sizeAnimation.value,
                  color: _colorAnimation.value),
            ],
          ),
        );
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        super.dispose();
      }
    }

效果如下：

![20200825071144684.png][]

我们也可以设置同时动画，只需将2个`Interval`的值都改为`Interval(0.0, 1.0)`。

想象下面的场景，一个红色的盒子，动画时长为6秒，前40%的时间大小从100->200，然后保持200不变20%的时间，最后40%的时间大小从200->300，这种效果通过TweenSequence实现，代码如下：

_animation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 100.0, end: 200.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 40),
      TweenSequenceItem(tween: ConstantTween<double>(200.0), weight: 20),
      TweenSequenceItem(tween: Tween(begin: 200.0, end: 300.0), weight: 40),
    ]).animate(_animationController);

`weight`表示每一个Tween的权重。

最终效果如下：

![2020082507114540.png][]

## 共享动画 ##

Hero是我们常用的过渡动画，当用户点击一张图片，切换到另一个页面时，这个页面也有此图，那么使用Hero组件就在合适不过了，先看下Hero的效果图：

![20200825071145910.png][]

上面效果实现的列表页面代码如下：

class HeroDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _HeroDemo();
    }
    
    class _HeroDemo extends State<HeroDemo> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
            children: List.generate(10, (index) {
              if (index == 6) {
                return InkWell(
                  onTap: () {
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new _Hero1Demo()));
                  },
                  child: Hero(
                    tag: 'hero',
                    child: Container(
                      child: Image.asset(
                        'images/bird.png',
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ),
                );
              }
              return Container(
                color: Colors.red,
              );
            }),
          ),
        );
      }
    }

第二个页面代码如下：

class _Hero1Demo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
              alignment: Alignment.topCenter,
              child: Hero(
                tag: 'hero',
                child: Container(
                  child: Image.asset(
                    'images/bird.png',
                  ),
                ),
              )),
        );
      }
    }

2个页面都有Hero控件，且`tag`参数一致。

## 路由动画 ##

**转场** 就是从当前页面跳转到另一个页面，跳转页面在 Flutter 中通过 Navigator，跳转到新页面如下：

Navigator.push(context, MaterialPageRoute(builder: (context) {
      return _TwoPage();
    }));

回退到前一个页面：

Navigator.pop(context);

Flutter 提供了两个转场动画，分别为 **MaterialPageRoute** 和 **CupertinoPageRoute**，MaterialPageRoute 根据不同的平台显示不同的效果，Android效果为从下到上，iOS效果为从左到右。CupertinoPageRoute 不分平台，都是从左到右。

使用 MaterialPageRoute 案例如下：

class NavigationAnimation extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Center(
            child: OutlineButton(
              child: Text('跳转'),
              onPressed: () {
                Navigator.push(context, CupertinoPageRoute(builder: (context) {
                  return _TwoPage();
                }));
              },
            ),
          ),
        );
      }
    }
    
    class _TwoPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
            color: Colors.blue,
          ),
        );
      }
    }

iOS效果：

![20200825071146194.png][]

如果要自定义转场动画如何做？

**自定义任何组件都是一样的，如果系统有类似的，直接看源代码是如何实现的，然后按照它的模版自定义组件。**

回到正题，看 MaterialPageRoute 的继承关系：

![20200825071146402.png][]

PageRoute 的继承关系：

![20200825071146514.png][]

MaterialPageRoute 和 CupertinoPageRoute 都是继承PageRoute，所以重点是 PageRoute，PageRoute 是一个抽象类，其子类还有一个 PageRouteBuilder，看其名字就知道这是一个可以自定义动画效果，PageRouteBuilder源代码：

![20200825071146886.png][]

`pageBuilder` 表示跳转的页面。

`transitionsBuilder` 表示页面的动画效果，默认值代码：

Widget _defaultTransitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return child;
    }

通过源代码发现，默认情况下没有动画效果。

自定义转场动画只需修改`transitionsBuilder`即可：

Navigator.push(
        context,
        PageRouteBuilder(pageBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
        ) {
          return _TwoPage();
        }, transitionsBuilder: (BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child) {
          return SlideTransition(
            position: Tween(begin: Offset(-1, 0), end: Offset(0, 0))
                .animate(animation),
            child: child,
          );
        }));

![2020082507114747.png][]

将其封装，方便使用：

class LeftToRightPageRoute extends PageRouteBuilder {
      final Widget newPage;
    
      LeftToRightPageRoute(this.newPage)
          : super(
              pageBuilder: (
                BuildContext context,
                Animation<double> animation,
                Animation<double> secondaryAnimation,
              ) =>
                  newPage,
              transitionsBuilder: (
                BuildContext context,
                Animation<double> animation,
                Animation<double> secondaryAnimation,
                Widget child,
              ) =>
                  SlideTransition(
                position: Tween(begin: Offset(-1, 0), end: Offset(0, 0))
                    .animate(animation),
                child: child,
              ),
            );
    }

使用：

Navigator.push(context, LeftToRightPageRoute(_TwoPage()));

不仅是这些平移动画，前面所学的旋转、缩放等动画直接替换 SlideTransition 即可。

上面的动画只对新的页面进行了动画，如果想实现当前页面被新页面从顶部顶出的效果，实现方式如下：

class CustomPageRoute extends PageRouteBuilder {
      final Widget currentPage;
      final Widget newPage;
    
      CustomPageRoute(this.currentPage, this.newPage)
          : super(
              pageBuilder: (
                BuildContext context,
                Animation<double> animation,
                Animation<double> secondaryAnimation,
              ) =>
                  currentPage,
              transitionsBuilder: (
                BuildContext context,
                Animation<double> animation,
                Animation<double> secondaryAnimation,
                Widget child,
              ) =>
                  Stack(
                children: <Widget>[
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(0, 0),
                      end: const Offset(0, -1),
                    ).animate(animation),
                    child: currentPage,
                  ),
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(0, 1),
                      end: Offset(0, 0),
                    ).animate(animation),
                    child: newPage,
                  )
                ],
              ),
            );
    }

本质就是对两个页面做动画处理，使用：

Navigator.push(context, CustomPageRoute(this, _TwoPage()));

![20200825071147184.png][]

除了自定义路由动画，在 Flutter 1.17 发布大会上，Flutter 团队还发布了新的 Animations 软件包，该软件包提供了实现新的 Material motion 规范的预构建动画。

里面提供了一系列动画，部分效果： ![20200825071147950.png][] ![20200825071149431.png][]

详情：[https://juejin.im/post/6847902223909781511][https_juejin.im_post_6847902223909781511]

## 交流 ##

老孟Flutter博客地址（330个控件用法）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20200825071144392.png]: /images/20221123/2d7d2add203241738c26c5997b9d98b4.png
[20200825071144684.png]: /images/20221123/a60255b8a09a46cb9ef0680e36439c52.png
[2020082507114540.png]: /images/20221123/8030adad4a5d4f40838b01c36d4c694f.png
[20200825071145910.png]: /images/20221123/7b7031c6ac704c1ab83c439de4dbe5be.png
[20200825071146194.png]: /images/20221123/7d3021a61d0e4a34933d9f35a9b0bf5d.png
[20200825071146402.png]: /images/20221123/8a6e650e2d544971b009d1fc0ce5e85b.png
[20200825071146514.png]: /images/20221123/d506c749079d4f6682beed32be714e9c.png
[20200825071146886.png]: /images/20221123/3e5ae03f229745a4b135516035825518.png
[2020082507114747.png]: /images/20221123/8ea93f0737de49a6b7a716c77e792718.png
[20200825071147184.png]: /images/20221123/d88c4a901b8845da97983ac481595259.png
[20200825071147950.png]: https://img-blog.csdnimg.cn/20200825071147950.png
[20200825071149431.png]: /images/20221123/21d2692a0d0148ea84909b722dd5c5b2.png
[https_juejin.im_post_6847902223909781511]: https://juejin.im/post/6847902223909781511
[http_laomengit.com]: http://laomengit.com