Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ;
Animation 是抽象类 , 其 与 UI 组件没有产生直接联系 , 内部封装了当前值与状态 ;
Animation 动画中的 Animation 对象 与 UI 渲染没有任何关系 ;
Animation 可以在一个时间区间内 , 依次产生一个区间值 , 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值的二维图像 可以是 线性直线 , 也可以是曲线 , 或其它映射 ;
Animation 控制方式 : 根据设置的动画的控制方式 , 动画可以正向运行 , 从初始值到结束值 , 也可以反向运行 , 从结束值到初始值 ;
Animation 生成值类型 : Animation 可以生成 Double 类型的值 ( Animation<double> ) , 也可以生成 Color ( Animation<Color> ) , Size ( Animation<Size> ) 等类型的值 ;
CurvedAnimation : 继承自 Animation , 可以将动画过程计算成一个非线性的过程 ;
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 : 继承自 Animation , 用于 管理 Animation ;
AnimationController 是动画控制器 ;
AnimationController 功能 :
默认情况下 , AnimationController 在给定的动画时间内 , 生成 0.0 ~ 1.0 区间内的值 , 每当设备刷新新的画面帧时 , AnimationController 都会产生一个新值 , 一般情况下 FPS 值为 60 , 也就是画面每秒刷新 60 次 ;
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
Tween : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 ~ 360 ;
Tween 标识动画值的 开始值 和 结束值 之间的线性插值 ;
如果需要在指定的范围内差值 , 就必须使用 Tween ;
在动画中使用 Tween 对象 , 调用 Tween 对象的 animate 方法 , 将要修改的 Animation 动画传给该方法 ;
多个 Tween 对象链接 : 可以使用 chain 方法将多个 Tween 对象链接在一次 , 这样一个动画对象可以配置多个 Tween 对象 ; 这与调用 Tween 对象的 animate 方法多次效果是不同的 ;
创建一个由 AnimationController _controller
控制的动画 Animation<Offset>
, 有两种方式 :
方式一 :
_animation = _controller.drive(
Tween<Offset>(
begin: const Offset(100.0, 50.0),
end: const Offset(200.0, 300.0),
),
);
方式二 :
_animation = Tween<Offset>(
begin: const Offset(100.0, 50.0),
end: const Offset(200.0, 300.0),
).animate(_controller);
参考资料 :
重要的专题 :
博客源码下载 :