文章目录
一、动画的核心类 Animation
二、动画的核心类 CurvedAnimation
三、动画的核心类 AnimationController
四、动画的核心类 Tween
五、相关资源
一、动画的核心类 Animation
Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ;
组成 : Animation 动画由值和状态组成 ;
动画值 : 该值就是动画的执行过程中计算的值 , 该值可能会按照某种曲线变化 , 也可能单调变化 ;
动画状态 : 状态标记当前的动画的执行顺序 ( 从到到尾 / 从尾到头 ) ;
监听 : 动画的执行过程中可以添加监听器 , 监听动画的执行状态 ;
参考文档 : https://api.flutter.dev/flutter/animation/Animation-class.html
Animation 是抽象类 , 其 与 UI 组件没有产生直接联系 , 内部封装了当前值与状态 ;
Animation 动画中的 Animation 对象 与 UI 渲染没有任何关系 ;
Animation 可以在一个时间区间内 , 依次产生一个区间值 , 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值的二维图像 可以是 线性直线 , 也可以是曲线 , 或其它映射 ;
Animation 控制方式 : 根据设置的动画的控制方式 , 动画可以正向运行 , 从初始值到结束值 , 也可以反向运行 , 从结束值到初始值 ;
Animation 生成值类型 : Animation 可以生成 Double 类型的值 ( Animation<double> ) , 也可以生成 Color ( Animation<Color> ) , Size ( Animation<Size> ) 等类型的值 ;
二、动画的核心类 CurvedAnimation
CurvedAnimation : 继承自 Animation , 可以将动画过程计算成一个非线性的过程 ;
主要作用 : 将曲线应用于另一个动画的动画 ;
参考文档 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html
CurvedAnimation 将动画制作成非线性的曲线动画 , 即 时间-动画值 的二维图像是曲线 ;
下面的代码是将 AnimationController 创建的线性动画 转为非线性的曲线动画的过程 ; 这里的线性 , 非线性指的是 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值 的二维图像是直线还是曲线 ;
final Animation<double> animation = CurvedAnimation( parent: controller, curve: Curves.ease, );
动画执行有两个方向 , 正向执行 ( 从初始值到结束值 ) , 反向执行 ( 从结束值到初始值 ) , 这两个方向可以各自设置不同的曲线 ;
final Animation<double> animation = CurvedAnimation( parent: controller, curve: Curves.easeIn, reverseCurve: Curves.easeOut, );
自定义曲线 : 根据正弦函数以及传入的参数值生成的曲线动画值 ;
class SinCurve extends Curve { @override double transform(double t) { return math.sin(t * math.PI * 2); } }
三、动画的核心类 AnimationController
AnimationController : 继承自 Animation , 用于 管理 Animation ;
参考文档 : https://api.flutter.dev/flutter/animation/AnimationController-class.html
AnimationController 是动画控制器 ;
AnimationController 功能 :
播放动画 : 正向 ( 从初始值到结束值 ) 播放动画 , 逆向 ( 从结束值到初始值 ) 播放动画 , 停止动画 ;
设置动画值 : 给动画设置一个特定值 ;
定义动画区间 : 定义动画值的最大值与最小值 , 如旋转角度定义为 0 00 ~ 360 360360 ;
物理引擎 : 使用物理引擎创建一个投掷动画 ;
默认情况下 , AnimationController 在给定的动画时间内 , 生成 0.0 0.00.0 ~ 1.0 1.01.0 区间内的值 , 每当设备刷新新的画面帧时 , AnimationController 都会产生一个新值 , 一般情况下 FPS 值为 60 6060 , 也就是画面每秒刷新 60 6060 次 ;
AnimationController 构造函数 : 每个字段的作用都在下面的注释中 ;
AnimationController( {double? value, /// 动画的初始值 Duration? duration, /// 动画正向播放持续时间 Duration? reverseDuration, /// 动画逆序播放持续时间 String? debugLabel, /// 调试期间标识动画的标志 double lowerBound: 0.0, /// 动画最小值 double upperBound: 1.0, /// 动画最大值 AnimationBehavior animationBehavior: AnimationBehavior.normal, /// 上下文的 TickerProvider , 用于防止屏幕外的动画消耗不必要的资源 , /// 一般将 StatefulWidget 作为 vsync 值 required TickerProvider vsync} )
AnimationController 常用方法 :
启动动画 : forward({double? from}) → TickerFuture
逆序播放 : reverse({double? from}) → TickerFuture
重置动画 : reset() → void
停止动画 : stop({bool canceled: true}) → void
