动画基本结构
需要继承StatefulWidget来使用
需要继承TickerProvider,如果有多个AnimationController,则应该使用TickerProviderStateMixin。
动画控制器
AnimationController _controller;
_controller = AnimationController(
vsync: this, //
duration: Duration(seconds: 3),//动画时间 microseconds:500
动画曲线类型CurvedAnimation
//使用弹性曲线 animation=CurvedAnimation(parent: controller, curve: Curves.bounceIn);//还有curve:easeOutQuart
启动动画controller.forward()
class _ScaleAnimationRouteState extends State<ScaleAnimationRoute> with SingleTickerProviderStateMixin{
Animation<double> animation;
AnimationController controller;
initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(seconds: 3), vsync: this);
//图片宽高从0变到300
animation = new Tween(begin: 0.0, end: 300.0).animate(controller)
..addListener(() {
setState(()=>{});
});
//使用弹性曲线
animation=CurvedAnimation(parent: controller, curve: Curves.bounceIn);
//启动动画(正向执行) repeat()重复执行
controller.forward();
}
@override
Widget build(BuildContext context) {
return new Center(
child: Image.asset("imgs/avatar.png",
width: animation.value,
height: animation.value
),
);
}
dispose() {
//路由销毁时需要释放动画资源
controller.dispose();
super.dispose();
}
}