动画Animation开发指南-动画基础类

一、

 

二、在Flutter中有哪些类型的动画？

（可根据官方提供的Flutter gallery中的示例来学习动画）

在Flutter中动画分为两类：基于tween或基于物理的。

--补间(Tween)动画：在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过度到结束点。

--基于物理的动画：在基于物理的动画中，运动被模拟为与真实时间的行为像似。例如，当你掷球时，它在何处落地，取决于抛球速度又多快、球又多重、距离地面有多远。

接在弹簧上的球落下（并弹起）与连接到绳子上的球放下的方式也是不同。

 

三、如何使用动画库中的基础类给widdget添加动画？

Animation:是Flutter动画库中的一个核心类，它生成指导动画的值

CurvedAnimation:Animation的一个子类，将过程抽象为一个非线性曲线

AnimationController:Animation的一个子类，用来管理Animation

Tween：在正正执行动画的对象所使用的数据范围之间生成值。例如，Tween可生成红到蓝之间的色值，或者从0到255

1、Animation

在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态（完成或停止）。其中一个比较常用的Animation类是Animation<double>.

Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。根据Animation对象的控制方式，动画可以反向运动，甚至可以在中间切换方向。

-Animation还可以生成除double之外的其它类型值，如:Animation<Color>或Animation<Size>

-Animation对象有状态。可以通过访问其value属性获取动画的当前值

-Animation对象本身和UI渲染没有任何关系

 

2、CurvedAnimation

CurvedAnimation将动画过程定义为一个非线性曲线。

 

3、AnimationController

AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值。默认情况下，AnimationController在给定的时间内会线性的生成从0.0到1.0的数字。例如，下面的代码创建一个Animation对象：

AnimationController派生自Animation<double>,因此可以在需要Animation对象的任何地方使用。但是，AnimationController具有控制动画的其他方法：

-forward():启动动画

-reverse（{double from}）：倒放动画

-reset（）：重置动画，将其设置到动画的开始位置

-stop（{bool canceled=true}）:停止动画

当创建一个AnimationController时，需要传递要给vsync参数，存在vsync时会防止屏幕外动画消耗不必要的资源，可以将stateful对象作为vsync的值。

 

注意：在某些情况下，值（position，值动画的当前值）可能会超出AnimationController的0.0-1.0的范围。例如，fling（）函数允许您提供速度（velocity）、力量（force）、position（通过Force对象）。位置（position）可以是任何东西，因此可以在0.0到1.0范围之外。CurvedAnimation生成的值也可以超出0.0到1.0的范围。根据选择的曲线，CurvedAnimation的输出可以具有比输入更大的范围。例如，Curves.elasticln等弹性曲线会生成大于或小于默认范围的值。

四、Tween

默认情况下，AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或者不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。例如，以下示例，Tween生成从-200.0到0.0的值：

Tween是一个无状态（stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0，但这不是必须的。

Tween继承自Animatable<T>,而不是继承自Animation<T>.Animatable与Animation相似，不是必须输出double值。例如，ColorTween指定两种颜色之间的过渡。

Tween对象不存储任何状态。相反，它提供了evaluate(Animation<double>animation）方法将映射函数应用于动画当前值。Animation对象的当前值可以通过value（）方法取到。evaluate函数还执行一些其它处理，例如分别确保在动画值为0.0和1.0时返回开始和结束状态。

Tween.animate

要使用Tween对象，可调用它的animate（）方法，传入一个控制器对象。例如，以下代码在500毫秒内生成从0到255的整数值。

注意animate（）返回的是一个Animation，而不是一个Animatable。

以下示例构建了一个控制器、一条曲线和一个Tween：