Flutter动画和运动控件之旋转变化RotationTransition

使用Flutter实现旋转过渡效果

最新推荐文章于 2025-05-10 14:54:50 发布

原创最新推荐文章于 2025-05-10 14:54:50 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#旋转变化 #旋转变化Rotation #Flutter旋转变化

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客展示了如何在Flutter中创建一个旋转过渡效果。通过AnimationController和CurvedAnimation，作者设置了一个持续2秒的动画，该动画以反向方式重复，使Flutter Logo进行弹性旋转。在Widget构建时，RotationTransition被用来将动画应用于Flutter Logo，使其在界面上动态旋转。

late AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
)..repeat(reverse: true);
late Animation<double> _animation = CurvedAnimation(
  parent: _controller,
  curve: Curves.elasticOut,
);

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: RotationTransition(
        turns: _animation,
        child: const Padding(
          padding: EdgeInsets.all(8.0),
          child: FlutterLogo(size: 150.0),
        ),
      ),
    ),
  );
}