[Flutter]アイコンを回転するアニメーション

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

アイコンを回転するアニメーションをするには、どうしたらいいのでしょうか？

必要なもの

アイコンを回転するアニメーションをするには、次の４つが必要です。

• AnimationController：アニメーションを操作するためのもの
• Tween：角度を生成するためのもの
• AnimatedBuilder：アイコンでアニメーションをするためのウェジェット
• Transform：アイコンを回転するためのもの

方法

import 'dart:math';

まず、アニメーションのための変数を用意します。

  late AnimationController _controller;
late Animation<double> _rotateAnimation;

次に、変数を「initState」で初期化します。

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: Duration(seconds: 2), //アニメーションの時間
      vsync: this,
    );

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _rotateAnimation = Tween<double>(
      begin: 0,
      end: 2 * pi,
    ).animate(_controller);
  }

また、disposeでAnimationControllerの破棄をします。

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

次に、AnimatedBuilderを用意します。

        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          ・・・
        ),

最後に、「child」にTransform.rotateを指定します。

Transform.rotateの引数「rotate」に、用意したAnimation<double>の変数の「value」を指定します。

        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Transform.rotate(
            angle: _rotateAnimation.value,
            child: Icon(
              Icons.flutter_dash,
              size: 200,
            ),
          ),
        )

後は、AnimationControllerの「forwardメソッド」や「reverseメソッド」で、アニメーションを操作します。

使用例

  void _animationChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }  

@override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Transform.rotate(
            angle: _rotateAnimation.value,
            child: Icon(
              Icons.flutter_dash,
              size: 200,
            ),
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Rotate!'),
        )
      ],
    ));
  }

全体のコード

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotateAnimation;
  void _animationChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

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

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _rotateAnimation = Tween<double>(
      begin: 0,
      end: 2 * pi,
    ).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Transform.rotate(
            angle: _rotateAnimation.value,
            child: Icon(
              Icons.flutter_dash,
              size: 200,
            ),
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Rotate!'),
        )
      ],
    ));
  }
}