フラッター（XVII） - アニメーションの組み合わせ

スタッガードアニメーション

千鳥アニメーションは千鳥アニメーションで、あなたはまた、アニメーションを組み合わせ、それを呼び出すことができます。アニメーションを使用する実際のプロセスでは、アニメーションは単一として提示されなくてもよいです。グラデーションは、シフト、ズーム、その他のアニメーションは基本的なものですが、時には我々はそれ千鳥アニメーションそのアニメーションの組み合わせ作り、これらの基本的なアニメーションを組み合わせる必要があります。（最終的には、この記事の影響を示し、下図）

Androidの開発では、それはAnimationControllerずらし、このアニメーションを達成することです。フラッターの開発では、達成するためにAnimationControllerという名前のクラスを次の。

アニメーションの組み合わせを実現するためのコード

フラッターの開発は、千鳥アニメーションを作成する方法を、私たちはAnimationControllerで一緒にアニメーションを置くことができるために、それぞれ、あなたはそのアニメーションのパラメータを設定することができます。

AnimationControllerため、ツイーンコントローラの値は、（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,
    );
  }
}

上記のコードは、明示的のaddListenerを追加するために行くことができないので、AnimatedBuilderを使用して、コードの多く保存、理解していないが、上記、言いたいことが他のコード言うまでもなくを、確認することができ、第三ダーツ言語でダーツ非同期この効果は、最初のアニメーション図の組合せとして実装示されているが、あまりにも多く繰り返すことがない、が挙げられます。