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

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

画像を回転するアニメーションをする方法を紹介します。

方法

画像を回転するアニメーションには、RotationTransitionを使います。

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

late AnimationController _controller;//アニメーションコントローラ
late Animation<double> _rotateAnimation;//角度

次に、initStateで変数の初期化を行います。

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

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

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

//回転する角度の設定
    _rotateAnimation = Tween<double>(
      begin: 0,
      end: 1,
    ).animate(_controller);

  }

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

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

最後に用意した変数と画像をRotateAnimationに指定します。

       RotationTransition(
          turns: _rotateAnimation, //角度
          child: Image.asset('asset/images/dog-illust.jpg'),
        ),

後は、AniamationControllerの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,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RotationTransition(
          turns: _rotateAnimation,
          child: Image.asset('asset/images/dog-illust.jpg'),
        ),
        TextButton(onPressed: _animationChange, child: Text('Rotate!'))
      ],
    ));
  }

まとめ

画像を回転するアニメーションをするには、RotateTransitionを使います。

RotateTransitionとAnimationControllerやTweenを組み合わせることで、画像を回転するアニメーションをすることが出来ます。

使用したコード

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: 3),
      vsync: this,
    );

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

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

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RotationTransition(
          turns: _rotateAnimation,
          child: Image.asset('asset/images/dog-illust.jpg'),
        ),
        TextButton(onPressed: _animationChange, child: Text('Rotate!'))
      ],
    ));
  }
}