[Flutter]アニメーションを繰り返し続けるには？

どうも、ちょげ(@chogetarou)です。

アニメーションをずっと繰り返す方法を紹介します。

方法

アニメーションをずっと繰り返す方法は２つあります。

repeat

１つは、repeatメソッドを使う方法です。

repeatメソッドは、1度呼び出すとアニメーションを繰り返し続けるメソッドです。

このメソッドを使うには、AnimationControllerに「.repeat()」を付けます。

_controller.repeat();

addStatusListener

もう１つは、addStatusListenerを使う方法です。

addStatusListenerは、アニメーションの状態が変わるごとに呼び出される関数です。

このメソッドを使って、アニメーションの状態が切り替わった時に、アニメーションを再開始します。

そうすれば、アニメーションを繰り返し続けられます。

また、addStatusListenerの場合は、アニメーションをした後に、逆向きのアニメーションをして、もう1度アニメーションをするというように繰り返すことが出来ます。

addStatusListenerは、AnimationController の初期化後に、関数を定義して使います。

    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
        _controller.forward();
      }
    });

まとめ

アニメーションを繰り返し続けるには、AnimationControllerの「repeatメソッド」か「addStatusListener」を使います。