一 为什么要进行自定义动画
- 当系统提供的动画不满足业务需求时,就需要我们自己进行自定义动画
- 通过自定义动画,可以提高自定义组件的能力
二 自定义动画过程
- 继承StatefulWidget ,完成动画界面的绘制
setState
中动画执行及状态监听并刷新UIdispose
释放资源
三 示例
3.1 代码
//入口位置
Future<void> main() async {
runApp(Home());
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(body: Center(child: AnimationDemo(),),),
);
}
}
//自定义动画
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimationDemo();
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
_animation = Tween(begin: .5, end: .1).animate(_animationController);
_animationController.forward(); //开始动画
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: _animation,
child: Container(height: 200, width: 200, color: Colors.red,),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
3.2 效果图
![](https://i-blog.csdnimg.cn/blog_migrate/597ee4791e325147cb7874717392469f.gif)