「Futterアニメーションシリーズ」コンビネーションアニメーション

前の文章に紹介しました.
「Futterアニメーションシリーズ」25種類のアニメーションコンポーネントをまとめました.

http://laomengit.com/flutter/module/animated_1/

「Futterアニメーションシリーズ」Googleエンジニアがあなたを連れてFutterアニメーションコントロールを選択します.

http://laomengit.com/flutter/module/animated_チョイス/

プロジェクトの中でアニメーションの効果は多くの場合、カラー、サイズ、シフトなどの属性が同時に変化したり、順序が変わったりします.
Futterにおける結合アニメーションは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 createState() => _AnimationDemo();
}

class _AnimationDemo extends State
    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: [
          Container(
              height: _sizeAnimation.value,
              width: _sizeAnimation.value,
              color: _colorAnimation.value),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

効果は以下の通りです

同時にアニメーションを設定することもできます.2つのIntervalの値をInterval(0.0, 1.0)に変更するだけでいいです.
次のシーンを想像してみてください.赤い箱で、動画の時間は6秒で、前の40%の時間の大きさは100から200までです.そして200%の時間を維持して、最後の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(200.0), weight: 20),
  TweenSequenceItem(tween: Tween(begin: 200.0, end: 300.0), weight: 40),
]).animate(_animationController);

weightは、各Tweenの重みを表す.
最終効果は以下の通りです.

交流
Futterに疑問や技術的な疑問があるなら、Futter交流グループ(WeChat:laomengit)に参加してください.
また、私のFutter公衆番号「旧孟プログラマー」に注目していただき、公式号のファーストFutterに関する内容も歓迎いたします.
Futterアドレス:http://laomengit.comには160以上のコンポーネントの詳細な使い方が含まれています.