// 执行动画
controller.forward();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘AnimateApp’,
theme: ThemeData(
primaryColor: Colors.redAccent
),
home: Scaffold(
appBar: AppBar(
title: Text(‘AnimateApp’),
),
body: Center(
child: Container(
// 获取动画的值赋给 widget 的宽高
width: animation.value,
height: animation.value,
decoration: BoxDecoration(
color: Colors.redAccent
),
),
)
)
);
}
@override
void dispose() {
// 资源释放
controller.dispose();
super.dispose();
}
}
效果如下:
可以看出上面的动画是线性运动的,我们可以通过 CurvedAnimation
来实现非线性运动的动画代码如下:
controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
// 非线性动画
final CurvedAnimation curve = CurvedAnimation(
parent: controller, curve: Curves.elasticOut);
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
…addListener(() {
setState(() {});
});
效果如下:
然后我们还可以给动画添加状态监听,通过给 Animation
添加 addStatusListener(...)
来监听当前动画的状态,如&