在 Cocos Creator 3.x 版本中， Tween系统代替了原来的Action系统。很多朋友不明白Tween到底是什么，Tween原理是什么？怎么使用Tween？
今天就来详细了解一下，希望能帮助到大家加深对Tween的了解，并快速掌握Tween的使用方法。
一、Tween到底是什么？
Tween 又称为缓动系统，可以用于变换位置、旋转、缩放和颜色等常规动画信息，也支持延迟，队列，并行等动作行为。
首先我们来看一段案例代码：
tween(this.node) //to,在第1秒的时候放大为2倍，位置为(50,50),角度变化到90 .to(1,{scale:2,position:cc.v2(50,50),rotation:90}) //by,在第2秒时，缩放变化了2倍（现在是原始大小的4倍），位置变化了(50,50)，现在位置为(100,100) .by(1,{scale:2, position:cc.v2(50,50)}) //在第3秒时缩放为原始大小，位置设置为(0,0)，然后加了一个缓动效果 backOut .to(1,{scale:1,position:cc.v2(0,0)},{easing:"backOut"}) .start();
通过上面演示的代码，我们可以知道，Tween可以同时设置多个属性， 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。
Tween的特点
- 支持以链式结构的方式创建一个动画序列
- 不局限于节点上的属性
Tween有2种设置方式
- to 改变到某个值(绝对值)
- by 变化值(相对值)
二、Tween 缓动系统原理
为了加深理解，来看一张UML图：
此UML图中，Node（目标节点）、Action（动作） 、ActionManager（动作管理） 类， 相信大家都比较熟悉了，这里就不作介绍。
这里还涉及到一些比较新的内容：Tween 、TweenAction、props 、ITweenOption下面分别介绍。
1、Tween类是干嘛的？
通过上面UML 图的接口，我们可以清晰地看到，Tween其实有两个主要功能：
- Action创建器，负责Action的创建
在使用的时候，可以添加一个或者多个Action到内部缓冲，也可添加多个Action组合的串行Action或者并行Action。
- 内部维护一个最终Action，可控制这个Action的启动与停止
Tween类重要成员属性：
- _target: 目标对象，比如节点。
- _actions: 类型为Action[]，创建过程中的一组Action缓冲。
- _finalAction: 创建完成之后的最终使用的Action。
Tween类重要接口：
- target: 设置目标对象
- delay: 添加一个DelayAction
- to: 添加一个TweenAction来指定每个属性变换到多少-目标值
- by: 添加一个TweenAction来指定每个属性变换多少-变化值
- union: 将缓冲中的多个Action变成一个串行Action
- sequence: 将指定的多个Action或者Tween变成一个串行Action后添加到缓冲中
- parallel: 将指定的多个Action或者Tween变成一个并行Action后添加到缓冲中
- start: 开始运行，此时会创建最终的Action，并且启动此Action
- stop: 停止Action的运行
2、TweenAction是做什么的？
TweenAction类从ActionInterval派生，UML图中简化成从Action派生，能够针对目标对象的多个任意属性，以指定缓动方式进行变换。
只要目标对象的属性能够直接赋值和取值，这个TweenAction就能够胜任。
前面的Tween类by接口和to接口就是用TweenAction实现。
它的灵活和强大之处在于，不用像以前那样，每个属性都要实现重复代码的Action类。
3、props是什么？
props是TweenAction需要进行变换的属性。
props 本质就是一个键值对数据结构，键为对象的属性名称，值为进行变换的值。
例如：
{ angle: 90, position: v3(200, 200, 0)}
4、ITweenOption接口
ITweenOption接口，其实就是进行变换的缓动方式以及变换过程中的回调，从UML 图中我们也可以看到，
可以指定如下属性：
- easing: 缓动方式
- progress: 插值函数，用来自定义缓动方式
- onStart: 缓动动作启动时的回调函数
- onUpdate: 缓动动作更新时的回调函数
- onComplete: 缓动动作完成时的回调函数
三、Tween 的使用
明白了Tween 的原理和重要的接口后，使用就比较简单了。
使用步骤可以简单分为三步：
Step1:创建一个针对目标的Tween对象
let tween = new Tween(this.node);
Step2:添加执行过程
tween.to(1.0, {angle:90,position:v3(100,100,0) });
Step3:开始执行tween对象
tween.start();
