简介
- Flutter动画核心类:Animation类,它可以判断当前动画的状态(开始,停止,移动,前进,反向),它是由AnimationController管理的,并通过Listeners和StatusListeners管理动画状态的所发生的变化,我们先对动画有了大体的了解,下面我们对其中提到的类进行逐一学习
- 这次主要学习flutter动画中的 平移,缩放,旋转,透明度,插值器,是为之后的自定义动画做准备嗷!
Animation
- Animation对象本身随手记屏幕是无感知的,,它仅仅直到当前动画的插值和状态,,Animation对象是一个在一段时间内,一次生成一个区间值的类,其输出值可以是线性的、非线性的,控制器可以控制Animation的动画方式:正向、反向、中间进行切换。
Animatable
- Animatable是控制动画类型的类,比如我们需要控制动画过程中颜色值的变化,那么Animatable就用来控制色值的变化
AnimationController
- 上面提到的动画控制器即AnimationController,它负责在给定的时间段内,以线性的方式生成默认区间为(0.0, 1.0)的数字,我们可以通过AnimationController来创建Animation对象
AnimationController 的常用操作说明
属性 |
说明 |
controller.forward() |
正向开始执行动画 |
controller.reverse() |
反向开始执行动画 |
controller.reset() |
重置动画到初始状态 |
controller.dispose() |
取消/停止动画 |
AnimationStatus 动画状态说明
属性 |
说明 |
AnimationStatus.forward |
执行controller.forward() 会回调此状态 |
AnimationStatus.reverse |
执行controller.reverse() 会回调此状态 |
AnimationStatus.dismissed |
动画从controller.reverse() 反向执行 结束时会回调此方法 |
AnimationStatus.completed |
动画从controller.forward() 正向执行 结束时会回调此方法 |
Tween补间动画
- 通常AnimationController的取值范围是(0.0,1.0), 但是有些时候我们呢可能会需要不同范围或者类型的值,就需要使用Tween来定义并生成相应的值,例如:
- 释义:
- Tween作用:定义从输入范围(左区间)到输出范围(右区间)的映射
- Tween继承自Animatable,例如上面的例子随着动画改变色值:
示例实现平移补间动画
示例实现缩放动画
- 实现方式都是相同的,大家可以再尝试旋转以及透明效果
Curve
- Curve类似于Android中的插值器,插值器如果不了解可以看一下这篇文章
- 通过Curve,可以将动画过程设置为线性或者非线性,初始化如下:
示例将弹跳的插值器和透明度结合
Demo地址