[Flutter]AnimationControllerのforwardメソッドの使い方

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

AnimationControllerのforwardメソッドは、どう使えばいいのでしょうか？

使い方

「forwardメソッド」は、アニメーションを開始したい場所で呼び出します。

TextButton(
       onPressed: () {
           _controller.forward();
       },
       child: Text('Animate!')
)

ボタンやスワイプなどのトリガーで呼び出すことで、トリガーからアニメーションを開始できるようになります。

また、forwardメソッドは、単体でなく、reverseメソッドと組み合わせることが出来ます。

TextButton(
     onPressed: () {
　　　　　　　　　//isChangedはアニメーションした後かどうかを判定する変数
          isChanged ? _controller.reverse() : _controller.forward();
       },
      child: Text('Animate!')
)

「reverseメソッド」は、逆向きのアニメーションをするメソッドです。

forwardメソッドと組み合わせることで、アニメーションを繰り返すことが出来ます。

全体のコード

興味のある方に向けて、全体のコードを載せておきます。

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _curveAnimation;
  var isChanged = false;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 2), vsync: this);

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        setState(() {
          isChanged = true;
        });
      } else {
        setState(() {
          isChanged = false;
        });
      }
    });

    _curveAnimation = Tween(begin: 0.5, end: 1.0)
        .animate(CurvedAnimation(parent: _controller, curve: Curves.bounceIn));
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center, 
        children: [
          AnimatedBuilder(
              animation: _controller,
              builder: (BuildContext context, Widget? child) {
                return Transform.scale(scale: _curveAnimation.value, child: child);
              },
              child: Container(
                width: 150,
                height: 150,
                color: Colors.green,
              ),
            ),
            TextButton(
                onPressed: () {
                  isChanged ? _controller.reverse() : _controller.forward();
                },
                child: Text('Animate!')
            )
        ],
    );
  }
}