缓动系统

为了更友好和高效的开发，并且保持 Cocos Creator 2D 缓动系统的使用体验，Cocos Creator 3D 在 tween.js 的基础上封装了一层类似于 Cocos Creator 2D 的缓动系统的 API 使用方式，并且未来将兼容 tween.js 的使用方式（目前暂未开放）。

简单示例

  1. import { _decorator, Component, Vec3, tween } from "cc";
  3. @ccclass("tween-test")
  4. export class tweentest extends Component {
  6.     private _pos: Vec3 = new Vec3(0, 0, 0);
  8.     start () {
  9.         Vec3.copy(this._pos, this.node.position);
  10.         tweenUtil(this._pos)
  11.             .to(3, new Vec3(10, 10, 10), { easing: 'Bounce-InOut' })
  12.             .to(3, new Vec3(0, 0, 0), { easing: 'Elastic-Out' })
  13.             .union()
  14.             .repeat(1)
  15.             .start();
  16.     }
  18.     update (deltaTime: number) {
  19.         this.node.position = this._pos;
  20.     }
  21. }

注意事项

API 差异

由于底层的实现不同，以及 3D 与 2D 的差异较大，所以目前 API 上存在以下区别：

  • tween 方法改名为了 tweenUtil。
  • repeat 方法语义为重复几次，即repeat(1) 代表重复一次，执行两次，在 2D 中语义为执行次数，即执行一次。
  • repeat 方法多次调用为重写，在 2D 中是累加。
  • repeat 方法中暂不支持插入缓动，后面会考虑支持。
  • 暂不支持对单个属性进行 easing 、progress 等
  • easing 的可选值有变化，并且形式与 2D 的不同。
  • progress 用 easing 代替，可以输入自定义函数到 easing 参数。
  • 部分 API 暂不支持：clone 、 removeSelf 、 reverseTime 、 sequnence 、 target 、 then 。
  • 部分 API 尚不稳定，行为与 2D 可能有所出入。

特殊机制产生的差异

Cocos Creator 3D 中 Node 的 dirty 机制

为了降低更新 Node Transform 信息的频率，Node 内部维护了一个 dirty 状态，只有在调用了可能会改变 Node Transform 信息的接口，才会将 dirty 置为需要更新的状态。

但是目前的接口存在一定的局限性，例如：通过 this.node.position 获取到的 position 是一个通用的 Vec3，当执行this.node.position.x = 1这段代码的时候，只执行 Node position 的 getter，并没有执行postion 的 setter，由于 dirty 并没有更新，就会导致渲染时使用的节点的 Transform 信息没有更新。

目前，我们也不支持这样的调用，而是鼓励使用 setPostion 这样的接口，或者通过 position 的 setter，即以下代码方式：

  1. let _pos = new Vec3(0, 1, 0);
  2. this.node.position = _pos;      // 这里将通过 position 的 setter
  3. this.node.setPosition(_pos);    // 这里将通过接口 setPosition

因此，缓动系统目前暂不支持直接为 Node Transform 相关的数据进行插值，后续变化请留意更新公告。注：简单示例中介绍了如何通过缓动系统改变 Node 的 Transform。