Flutter開発実践 - TweenSequenceでアニメーションシーケンスを実装

Flutter開発実践 - TweenSequenceでアニメーションシーケンスを実装

一、トゥイーンシーケンス

TweenSequence を使用すると、値を決定する一連のトゥイーン アニメーションで構成されるアニメーションを作成できます。各 TweenSequenceItem には、アニメーションの間隔を決定するためにアニメーションの継続時間で定義された重みがあります。

• TweenSequence アニメーション グループ クラス
• TweenSequenceItem は、各アニメーションの特定の実装を定義するために使用されるクラスです。

TweenSequenceItem の Weight 属性は、アニメーション実行の時間の重み、つまりアニメーション プロセス全体の合計期間に対する現在のアニメーションの実行期間の割合を設定するために使用されます。

たとえば、アニメーションの差分の時間割合は、weight2/(weight1+weight2) となります。

2. TweenSequence はアニメーション シーケンスを実装します

は、アニメーション コントローラーAnimationControllerとanimationAnimationを宣言します。
TweenSequence を通じてアニメーション シーケンスを実装する

サンプルコードは次のとおりです

class TweenSequencePage extends StatefulWidget {
  const TweenSequencePage({super.key});

  @override
  State<TweenSequencePage> createState() => _TweenSequencePageState();
}

class _TweenSequencePageState extends State<TweenSequencePage>
    with TickerProviderStateMixin {
  AnimationController? _animationController;
  Animation<double>? _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    TweenSequenceItem<double> downMarginItem = TweenSequenceItem<double>(
        tween: Tween(begin: 1.0, end: 300.0), weight: 5);
    TweenSequenceItem<double> upMarginItem = TweenSequenceItem<double>(
      tween: Tween(begin: 300.0, end: 50.0),
      weight: 4,
    );
    TweenSequenceItem<double> downMarginItem2 = TweenSequenceItem<double>(
      tween: Tween(begin: 50.0, end: 200.0),
      weight: 3,
    );
    TweenSequenceItem<double> upMarginItem2 = TweenSequenceItem<double>(
      tween: Tween(begin: 200.0, end: 100.0),
      weight: 2,
    );
    TweenSequenceItem<double> endMarginItem = TweenSequenceItem<double>(
      tween: Tween(begin: 100.0, end: 50.0),
      weight: 1,
    );
    TweenSequence<double> tweenSequence = TweenSequence<double>([
      downMarginItem,
      upMarginItem,
      downMarginItem2,
      upMarginItem2,
      endMarginItem,
    ]);
    _animation = tweenSequence.animate(_animationController!);
    _animation!.addListener(() {
      setState(() {});
    });

    _animation!.addStatusListener((status) {
      print("TweenSequence status:${status}");
      if (status == AnimationStatus.completed) {
        ///正向执行完毕后立刻反向执行（倒回去）
        _animationController?.reverse();
      } else if (status == AnimationStatus.dismissed) {
        ///无次数限定执行
        _animationController?.forward();
      }
    });
  }

  void startEasyAnimation() {
    _animationController?.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TweenSequencePage'),
      ),
      body: Stack(alignment: Alignment.center, children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              height: 50,
              color: Colors.blue,
              margin: EdgeInsets.only(top: _animation?.value ?? 0),
            ),
          ],
        ),
        Positioned(
          bottom: 20,
          child: OutlinedButton(
            onPressed: startEasyAnimation,
            child: Text(
              "点击执行动画",
              style: TextStyle(color: Colors.black38),
            ),
          ),
        ),
      ]),
    );
  }
}
    

3. まとめ

Flutter開発実践 - TweenSequenceでアニメーションシーケンスを実装

勉強して記録し、日々改善を続けてください。