flutter如何实现旋转动画

在Flutter中如何实现一个旋转动画？我想让一个图标或小部件持续旋转，但不太清楚具体的实现步骤。是否需要使用AnimationController和Transform.rotate？能否提供一个简单的代码示例说明旋转动画的基本实现方式？另外，如何控制旋转的速度、方向和循环次数？

2 回复

Flutter中使用RotationTransition或Transform.rotate实现旋转动画。通过AnimationController控制旋转角度，结合Tween设置旋转范围，如0到2π实现完整旋转。在build方法中包裹需旋转的组件即可。

更多关于flutter如何实现旋转动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现旋转动画主要有两种方式：

1. 使用AnimatedContainer（简单旋转）

class RotationExample extends StatefulWidget {
  @override
  _RotationExampleState createState() => _RotationExampleState();
}

class _RotationExampleState extends State<RotationExample> {
  double _rotation = 0.0;

  void _rotate() {
    setState(() {
      _rotation += 0.5; // 旋转180度
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          transform: Matrix4.rotationZ(_rotation * pi),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Icon(Icons.refresh, color: Colors.white),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _rotate,
        child: Icon(Icons.autorenew),
      ),
    );
  }
}

2. 使用AnimationController（控制更精细）

class RotationAnimation extends StatefulWidget {
  @override
  _RotationAnimationState createState() => _RotationAnimationState();
}

class _RotationAnimationState extends State<RotationAnimation> 
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    
    _animation = Tween<double>(
      begin: 0,
      end: 2 * pi, // 完整旋转一圈
    ).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Icon(Icons.star, color: Colors.white),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startAnimation,
        child: Icon(Icons.play_arrow),
      ),
    );
  }

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

主要区别：

  • AnimatedContainer：适合简单的状态切换动画
  • AnimationController：提供更精细的控制，支持循环、反转等复杂动画效果

选择哪种方式取决于你的具体需求复杂度。

回到顶部