Flutter 动画库中的核心类,插入用于指导动画的值。 Animation 对象知道动画目前的状态(例如,是否开始,暂停,前进或倒退),但是对屏幕上显示的内容一无所知。 AnimationController管理 Animation。 CurvedAnimation 定义进程为非线性曲线。 Tween 为动画对象插入一个范围值。例如,Tween 可以定义插入值由红到蓝,或从 0 到 255。 使用 Listeners 和 StatusListeners 监视动画状态变化。
Animation<double> 在 Flutter 中,动画对象无法获取屏幕上显示的内容。 Animation 是一个已知当前值和状态(已完成或已解除)的抽象类。一个比较常见的动画类型是 Animation<double>。
一个 Animation 对象在一段时间内,持续生成介于两个值之间的插入值。这个 Animation 对象输出的可能是直线,曲线,阶梯函数,或者任何自定义的映射。根据 Animation 对象的不同控制方式,它可以反向运行,或者中途切换方向。
动画还可以插入除 double 以外的类型,比如 Animation<Color> 或者 Animation<Size>。
Animation 对象具有状态。它的当前值在 .value 中始终可用。
Animation 对象与渲染或 build() 函数无关。
CurvedAnimation
CurvedAnimation 定义动画进程为非线性曲线。
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
CurvedAnimation 和 AnimationController(下面将会详细说明)都是 Animation<double> 类型,所以可以互换使用。 CurvedAnimation 封装正在修改的对象 — 不需要将 AnimationController 分解成子类来实现曲线。
AnimationController
AnimationController 是个特殊的 Animation 对象,每当硬件准备新帧时,他都会生成一个新值。默认情况下,AnimationController 在给定期间内会线性生成从 0.0 到 1.0 的数字。例如,这段代码创建了一个动画对象,但是没有启动运行。
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
AnimationController 源自于 Animation<double>,所以可以用在任何需要 Animation 对象的地方。但是 AnimationController 还有其他方法控制动画。例如,使用 .forward() 方法启动动画。数字的生成与屏幕刷新关联,所以一般来说每秒钟会生成 60 个数字。数字生成之后,每个动画对象都调用附加 Listener 对象。为每个 child 创建自定义显示列表,请参考 RepaintBoundary。 创建 AnimationController 的同时,也赋予了一个 vsync 参数。 vsync 的存在防止后台动画消耗不必要的资源。您可以通过添加 SingleTickerProviderStateMixin 到类定义,将有状态的对象用作 vsync。可参考 GitHub 网站 animate1 中的示例。
Tween
在默认情况下,AnimationController 对象的范围是 0.0-0.1。如果需要不同的范围或者不同的数据类型,可以使用 Tween 配置动画来插入不同的范围或数据类型。例如下面的示例中,Tween 的范围是 -200 到 0.0。
tween = Tween<double>(begin: -200, end: 0);
Tween 是无状态的对象,只有 begin 和 end。 Tween 的这种单一用途用来定义从输入范围到输出范围的映射。输入范围一般为 0.0-1.0,但这并不是必须的。 Tween 源自 Animatable<T>,而不是 Animation<T>。像动画这样的可动画元素不必重复输出。例如,ColorTween 指定了两种颜色之间的过程。
colorTween = ColorTween(begin: Colors.transparent, end: Colors.black54);
Tween 对象不存储任何状态。而是提供 evaluate(Animation<double> animation) 方法,将映射函数应用于动画当前值。 Animation 对象的当前值可以在 .value 方法中找到。 evaluate 函数还执行一些内部处理内容,比如确保当动画值在 0.0 和1.0 时分别返回起始点和终点。 Tween.animate 要使用 Tween 对象,请在 Tween 调用 animate(),传入控制器对象。例如,下面的代码在 500 ms 的进程中生成 0-255 范围内的整数值。
AnimationController controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);
提示 animate() 方法会返回一个 Animation,而不是 Animatable。 下面的示例展示了一个控制器,一个曲线,和一个 Tween。
AnimationController controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
final Animation<double> curve =
CurvedAnimation(parent: controller, curve: Curves.easeOut);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(curve);
标签:动画,入门,对象,AnimationController,Tween,CurvedAnimation,Animation,Flutter
From: https://blog.51cto.com/u_15777557/8570811