Flutter：如何在没有插件的情况下制作旋转动画
本文将向您展示如何使用Flutter 中内置的RotationTransition小部件创建旋转动画。
简单说明
该RotationTransition小部件用于创建一个旋转的转变。它可以采用一个子部件和一个控制该子部件旋转的动画：
RotationTransition( turns: _animation, child: /* Your widget here */ } 复制代码
您可以创建一个无限旋转的动画，如下所示：
// Create a controller late final AnimationController _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, )..repeat(reverse: false); // Create an animation with value of type "double" late final Animation<double> _animation = CurvedAnimation( parent: _controller, curve: Curves.linear, ); 复制代码
要停止动画，只需调用 stop() 方法：
_controller.stop() 复制代码
要开始动画，请使用 repeat() 方法：
_controller.repeat() 复制代码
为了更清楚，请参阅下面的示例。
完整示例
我们将要构建的应用程序包含一个浮动操作按钮和一个由四种不同颜色的四个圆圈组合而成的小部件。一开始，小部件会自行无限旋转。但是，您可以使用浮动按钮停止和重新启动动画。
网络异常，图片无法展示
|
编码
main.dart 中的完整源代码和解释：
// main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false, title: '坚果前端', theme: ThemeData( primarySwatch: Colors.indigo, ), home: HomePage()); } } class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with TickerProviderStateMixin { // Create a controller late final AnimationController _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, )..repeat(reverse: false); // Create an animation with value of type "double" late final Animation<double> _animation = CurvedAnimation( parent: _controller, curve: Curves.linear, ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('坚果前端'), ), body: Center( child: RotationTransition( turns: _animation, child: Padding( padding: EdgeInsets.all(8.0), child: Container( child: Wrap( children: [ Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.amber, shape: BoxShape.circle), ), Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.green, shape: BoxShape.circle), ), Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.indigo, shape: BoxShape.circle), ), Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.red, shape: BoxShape.circle), ) ], ), ), ), ), ), // This button is used to toggle the animation floatingActionButton: FloatingActionButton( child: Icon(Icons.moving), onPressed: () { if (_controller.isAnimating) { _controller.stop(); // Stop the animation } else { _controller.repeat(); // Start the animation } }, ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } 复制代码
结论
您已经在不使用任何第三方软件包的情况下构建了自己的旋转动画。
