[Flutter]AnimationControllerの「resetメソッド」とは?

Flutter

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

AnimationControllerのresetメソッドについて解説します。

スポンサーリンク

resetメソッドとは

インターフェース, インターネット, プログラム, ブラウザ, Www

resetメソッドは、名前通りアニメーションをリセットするメソッドです。

具体的には、AnimationControllerの値(value)を、元の状態にします。

元の状態というのは、AnimationControlleの値で言えば「0」になります。

また、ColorTweenやTweenなどの場合は、「begin」の値になります。

「reset」は、「value」を、最初の値にするメソッドなのです。

使うには?

プログラマー, プログラミング, コード, 仕事, コンピューター

「reset」メソッドは、AnimationControllerに「.reset()」を付けることで、使うことが出来ます。

var _controller = AnimationController(vsync : this);
・・・
_controller.reset()

以下は使用例です。

void _iconChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reset();
    } else {
      _controller.forward();
    }
  } 

@override
  Widget build(BuildContext context) {
    return Center(
        child: AnimatedBuilder(
            animation: _controller,
            child: IconButton(
              onPressed: _iconChange,
              icon: Icon(Icons.favorite),
              color: _colorAnimation.value,
            ),
            builder: (BuildContext context, child) {
              return child!;
            }));
  }

まとめ

resetメソッドは、アニメーションをリセットするメソッドです。

具体的には、AnimationControllerやTweenなどの値を初期値にします。

おまけ

おまけとして、使用例で使ったコードを載せておきます。

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

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _colorAnimation;

  void _iconChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reset();
    } else {
      _controller.forward();
    }
  }

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this);

    _controller.addListener(() {
      setState(() {});
    });
    _colorAnimation = ColorTween(
      begin: Colors.grey,
      end: Colors.red,
    ).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: AnimatedBuilder(
            animation: _controller,
            child: IconButton(
              onPressed: _iconChange,
              icon: Icon(Icons.favorite),
              color: _colorAnimation.value,
            ),
            builder: (BuildContext context, child) {
              return child!;
            }));
  }
}

コメント

タイトルとURLをコピーしました