Flutter 旋转动画 线性变化的旋转动画

直接上代码

图片自己添加一张就好了

import 'dart:math';import 'package:flutter/material.dart';import 'package:flutter/animation.dart';void main() => runApp(MyApp());
//旋转动画
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(color: Colors.blue,home: MyAnimatedWidget(),);}
}class MyAnimatedWidget extends StatefulWidget {@override_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}class _MyAnimatedWidgetState extends State<MyAnimatedWidget>with SingleTickerProviderStateMixin {late final AnimationController _repeatController;late final Animation<double> _animation;@overridevoid initState() {super.initState();_repeatController = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..repeat(); // 设置动画重复播放// 创建一个从0到1的补间动画   end: 1 * pi   转速_animation = Tween<double>(begin: 0, end: 1).animate(_repeatController);}@overrideWidget build(BuildContext context) {// 你的UI构建代码，使用_animation来控制动画// ...// 示例按钮来停止和继续动画return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Center(child: AnimatedSwitcher(duration: const Duration(milliseconds: 500),transitionBuilder: (child, animation) {return RotationTransition(turns: _animation!,child: child,);},child: Image.asset('assets/shenji2.png',),),),Text('Animation Example'),SizedBox(height: 20,),ElevatedButton(onPressed: () {stopAnimation(); // 停止动画},child: Text('Stop Animation'),),SizedBox(height: 20,),ElevatedButton(onPressed: () {resumeAnimation(); // 继续动画},child: Text('Resume Animation'),),SizedBox(height: 20,),ElevatedButton(onPressed: () {resumeAnimationZY(); // 继续动画},child: Text('Resume Animation2'),),],);}void stopAnimation() {_repeatController.stop();}void resumeAnimation() {_repeatController.repeat(reverse: false);}void resumeAnimationZY() {///左右转动_repeatController.repeat(reverse: true);}@overridevoid dispose() {_repeatController.dispose(); // 不要忘记在dispose中释放资源super.dispose();}
}

创建一个动画组件给其他界面调用自己回收内存
不规则图片的中心旋转动画

import 'dart:math';import 'package:flutter/material.dart';class AnimatedBox extends StatefulWidget {// final Color color;// final Duration duration;const AnimatedBox({Key? key,}) : super(key: key);@override_AnimatedBoxState createState() => _AnimatedBoxState();
}class _AnimatedBoxState extends State<AnimatedBox>with SingleTickerProviderStateMixin {late final AnimationController _repeatController;late final Animation<double> _animation;@overridevoid initState() {super.initState();//启动动画_repeatController = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..repeat(); // 设置动画重复播放// 创建一个从0到1的补间动画_animation =Tween<double>(begin: 0, end: 1 * pi).animate(_repeatController);}@overrideWidget build(BuildContext context) {return AnimatedBuilder(animation: _repeatController,builder: (BuildContext context, Widget? child) {return Center(child: Stack(children: [Positioned(top: 0,bottom: 0,left: 0,right: 0,child: Center(child: Image.asset('assets/ic_oxygen_pump_c_10.png', // 你想要居中的组件),),),Positioned(top: 0,bottom: 1.5,left: 0,right: 6,child: Center(child: AnimatedSwitcher(duration: const Duration(milliseconds: 500),transitionBuilder: (child, animation) {return RotationTransition(turns: _animation,child: child,);},child: Image.asset('assets/ic_oxygen_pump_c_polat.png', // 你想要居中的组件),),),),],),);///放大动画/*return Transform.scale(scale: _animation.value,child: Container(width: 100,height: 100,color: widget.color,),);*/},);}@overridevoid dispose() {///回收动画_repeatController.dispose();super.dispose();}
}

图片是白色的