我们在上一章回中介绍了转场动画相关的内容,本章回中将介绍如何实现动画.闲话休提,让我们一起Talk Flutter吧。
1 概念介绍
提到动画相信大家都不陌生,在程序中使用动画可以增加程序酷炫的效果,因此我们有必要掌握动画相关的知识。其实在我们在上一章回中介绍转场动画时已经使用过动画,
只是当时使用的是系统提供的动画,本章回中将详细介绍如何实现动画。
2 实现方法
- 创建AnimationController类型对象,该类的构造方法中有一个必选参数:vsync表示屏幕刷新时是否通知当前界面,传递了当前对象(this)给它;
- 自定义Widget类,在类中混入了SingleTickerProviderStateMixin类,这样才能把当前对象传递给vsync参数;
- 创建CurvedAnimation类型对象,该类主要用来控制动画的插值,比如动画以线性方式播放;
- 创建Tween类型对象,该类主要用来控制动画的开始值和结束值;
- 在Tween对象中关联CurvedAnimation类型对象,这样就可以控制动画的播放效果;
- 创建动画widget类,主要用来更新动画,本质上是AnimatedWidget的子类,通过类的构造方法加入前面步骤中的动画参数;
- 创建动画Builder,主要用来更新动画,和自定义动画widget类的功能相同,通过类参数加入前面步骤中的动画参数;
- 通过AnimationController类型对象,释放动画相关的资源;
上面的步骤中包含两个6,不是写错了,是它们的功能相同,实现实现方式不同。我们在实际项目中选择其中一种就可以,常用的是动画Builder;步骤6中可以控制颜色,
大小,位置,角度。把它放到组件的color,size,transform等属性中就可以实现缩放,平移,旋转,渐变动画。上面的介绍的步骤比较抽象,不容易理解,而且步骤
中还包含了很多类,接下来我们通过示例代码来演示。
3 示例代码
class _ExAnimationState extends State<ExAnimation> with SingleTickerProviderStateMixin{
late final AnimationController _animationController;
late final CurvedAnimation _animationCurve;
late final Animation _animationTween;
void initState() {
// TODO: implement initState
super.