Cocos Creator中的Tween

最新的Cocos Creator 3.x版本使用了Tween系统来代替原来的Action系统，很多小伙伴不明白Tween到底是什么，并且怎么用。今天就来给大家讲解一下Tween吧，希望能够帮助大家快速掌握Tween的使用，并且对Tween有一个更加深入的了解。先来看一张UML图：

此UML图中，涉及到两个新的类Tween以及TweenAction，下面分别介绍。

何为TweenAction

新增的TweenAction类从ActionInterval派生(图中简化成从Action派生)，它是一个非常特殊的Action，能够针对目标对象的多个任意属性进行指定的缓动方式进行变换。只要目标对象的属性能够直接赋值和取值，那么这个TweenAction就能够胜任。后面的by接口和to接口就是用这个TweenAction实现的。它的强大之处在于，不用像以前的版本那样，每一个属性都要实现重复代码的Action类。是不是非常灵活和强大？

何为props

props其实就是TweenAction需要进行变换的属性，它其实就是一个键值对数据结构，键为对象的属性名称，值为进行变换的值。例如：

{ angle: 360, position: v3(100, 80, 10) }

ITweenOption

ITweenOption其实就是进行变换的缓动方式以及变换过程中的回调。你可以指定如下属性：
1. easing: 缓动方式
2. progress: 插值函数，这个是用来自定义缓动方式的
3. onStart: 缓动动作启动时的回调函数
4. onUpdate: 缓动动作更新时的回调函数
5. onComplete: 缓动动作完成时的回调函数

何为Tween

Tween作为一个类，本质上其实就是一个Action的建造器或者创建器，类似ActionBuilder或者ActionCreator，负责Action的创建是它的主要职责之一。在使用的时候，你可以告诉这个Tween对象，我需要添加什么样的Action到内部缓冲中，也可以添加多个Action或者Tween来组合成一个串行的Action或者并行的Action。

Tween的另一个职责就是它内部维护一个最终的Action，并且可以控制这个Action的启动与停止。

Tween类的内部有几个重要成员：
1. _target: 目标对象，比如节点
2. _actions: 类型为Action[]，创建过程中的一组Action缓冲
3. _finalAction: 创建完成之后的最终使用的Action

Tween类的几个重要接口：
1. target: 设置目标对象
2. delay: 添加一个DelayAction
3. to: 添加一个TweenAction来将指定的属性变换(每个属性变换到多少，目标值)
4. by: 添加一个TweenAction来将指定的属性变换(每个属性变换多少，变化值)
5. union: 将缓冲中的多个Action变成一个串行Action
6. sequence: 将指定的多个Action或者Tween变成一个串行Action后添加到缓冲中
7. parallel: 将指定的多个Action或者Tween变成一个并行Action后添加到缓冲中
8. start: 开始运行，此时会创建最终的Action，并且启动此Action。
9. stop: 停止Action的运行

Tween的使用

知道原理并且知道几个重要接口之后，使用起来就比较简单了。使用步骤如下：

1. 创建一个Tween对象(new Tween)
2. 往Tween里面添加一个一个的Action创建(to, by, then, ......)
3. 执行Tween对象，引擎会完成最终的Action创建，并且启动Action(start)

例如：在2秒以内，让A物体从当前位置，移动到(100, 80, 10)位置，代码如下：

1. 你要改变A物体位置，所以Tween的目标对象是A物体所在节点。

// 创建了一个针对A物体节点的Tween对象
let tw =newTween(A物体对应节点);

2. 添加中间执行过程Action，这个执行过程可以是一个，也可以是多个。这里我们要将目标从当前位置移动到(100, 80, 10)的位置，并且旋转到360度，所以使用Tween对象的to函数来指定：

tw.to(时间(2s), 属性列表{})

上面的属性列表，可以填写Tween针对的目标对象实例中的任意属性，我们这里是angle和position，所以如下的代码：

tw.to(2.0, {angle:360,position:v3(100,80,10) });

这样就给目标物体创建了一个Action，2s之内从当前位置移动到了目标位置(100, 80, 10)，并且旋转了360度。

3. 启动执行这个tween对象：

tw.start();

最后整体代码如下：

// step1: 创建一个针对目标的Tween对象
let tw = newTween(this.node);
// step2: 添加执行过程
tw.to(2.0, {angle:360,position:v3(100,80,10) });
// step3: 开始执行tween对象
tw.start();

Tween可以添加哪些过程

我们可以去查看一下Tween的API文档，在代码编辑器里面右键Tween对象，然后再点击"Go to Definition"

这样可以知道往这个Tween里面可以添加哪些Action。这些接口在creator.d.ts里面都有，这里就不再重复编写。下面再总结一下：
1. by和to方式的Action添加，只要目标对象的属性是可直接读取和设置的，就可以。例如节点的angle属性，就可以直接读取和赋值。
2. 一些特殊形式的Action添加，其实这个也就那么几个，比如delay、show等等

Tween的源码实现

如果你想更加深入的了解Tween，可以打开Cocos引擎源码tween/tween.ts直接看源代码。你会发现代码并不多，也就500行代码左右，逻辑也非常简单。我建议把这个类完整的看一遍，并且也建议花点时间把TweenAction类也完整的看一遍，这样使用起来会更加得心应手，并且心中有数。

好吧，希望这篇文章能够帮到大家。