Flutter(十七)——组合动画

Staggered Animations

Staggered Animations就是交错动画，也可以称之为组合动画。在实际的动画使用过程中，动画可能并不是由一个单一方式呈现的。渐变，位移，缩放等都是基础的动画，而我们有时候需要把这些基础的动画组合起来，使其成为一个组合动画，即交错动画。(下图为本文最终实现效果)

在Android开发中，是通过AnimationController来实现这种交错动画的。在Flutter开发中，也沿用了名为AnimationController的类来实现。

组合动画的代码实现

对于如何在Flutter开发中，写交错动画，我们可以通过AnimationController把动画组合在一起，然后分别设置其动画的参数即可。

对于AnimationController来说，控制器的值Tween必须属于（0.0，1.0）。也就是说，组合动画的所有间隔必须在0到1的数字之间进行，有了这个思路，我们来实践实现其交错动画（组合动画），代码如下：

import 'package:flutter/scheduler.dart' show timeDilation;
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{
  AnimationController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller=AnimationController(duration: const Duration(milliseconds: 2000),vsync: this);//初始化，动画控制器,每个动画都是执行2秒
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();//销毁释放
  }

  Future<void> _playAnimation() async{
    try{
      await controller.forward().orCancel;//开始
      await controller.reverse().orCancel;//反向
    }on TickerCanceled{

    }
  }

  @override
  Widget build(BuildContext context) {
    timeDilation=10.0;
    return Scaffold(
      appBar: AppBar(
        title: Text("组合动画"),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,//自己处理事件
        onTap: (){
          _playAnimation();
        },
        child: Center(
          child: Container(
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.1),
              border: Border.all(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
            child: StaggedAnimation(controller: controller.view,),
          ),
        ),
      ),
    );
  }
}

class StaggedAnimation extends StatelessWidget{
  //Curves.ease一种三次动画曲线，速度快，结束慢
  final Animation<double> controller;
  final Animation<double> bezier;//透明度渐变
  final Animation<double> width;//宽度变化
  final Animation<double> height;//高度变化
  final Animation<EdgeInsets> drift;//位移变化
  final Animation<BorderRadius> borderRadius;//圆角变化
  final Animation<Color> color;//颜色变化
  StaggedAnimation({Key key,this.controller}):
        bezier=Tween<double>(
          begin: 0.0,
          end: 1.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.0, 0.1,curve: Curves.ease),
          )
        ),
        width=Tween<double>(
          begin: 50.0,
          end: 150.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.125,0.250,curve: Curves.ease),
          )
        ),
        height=Tween<double>(
          begin: 50.0,
          end: 150.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.250,0.375,curve: Curves.ease),
          ),
        ),
        drift=EdgeInsetsTween(
          begin: const EdgeInsets.only(bottom: 16.0),
          end: const EdgeInsets.only(bottom: 75.0),
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.375,0.5,curve: Curves.ease),
          ),
        ),
        borderRadius=BorderRadiusTween(
          begin: BorderRadius.circular(4.0),
          end: BorderRadius.circular(75.0),
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.5,0.75,curve: Curves.ease),
          ),
        ),
        color=ColorTween(
          begin: Colors.indigo[100],
          end: Colors.orange[400],
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.75,1.0,curve: Curves.ease),
          ),
        ),
        super(key:key);

  Widget _buildAnimation(BuildContext context,Widget child){
    return Container(
      padding: drift.value,
      alignment: Alignment.bottomCenter,
      child: Opacity(//透明组件
        opacity: bezier.value,
        child: Container(
          width: width.value,
          height: height.value,
          decoration: BoxDecoration(
            color: color.value,
            border: Border.all(
                color: Colors.indigo[300],
                width: 3.0
            ),
            borderRadius: borderRadius.value,
          ),
        ),
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}

上面代码使用的是AnimatedBuilder，这样可以不用去显式的去添加addlistener，节省很多代码，不懂的可以回顾前面的内容，其他的代码不用多说，还有，dart异步在第三篇dart语言中有讲到，这里就不过多的赘述了，这段组合动画实现的效果如首图所示。