[Flutter]回転するアニメーションをする方法

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

回転するアニメーションをする方法を解説します。

必要なもの

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

• AnimationController : アニメーションを操作する
• AnimatedBuilder：ウェジェットでアニメーションをする
• Transform.rotate：回転するアニメーションをする

この３つを組み合わせることで、回転するアニメーションをすることが出来ます。

方法

ここからは回転するアニメーションをする方法を流れに沿って、説明します。

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

  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,//AnimationControllerの設定
          builder: (BuildContext context, child) => child!,
          ・・・
        ),

AnimatedBuilderの「child」に、「Transform.rotate」を指定します。

Transform.rotateの引数「angle」にはAnimation<double>型の変数の「value」を指定し、引数「child」には回転したいウェジェットを指定します。

        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!'),
        )
      ],
    ));
  }

まとめ

回転するアニメーションをするには、次の３つを組み合わせて使います。

• AnimationController
• AnimatedBuilder
• Transform.rotate

使用したコード

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

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!'),
        )
      ],
    ));
  }
}