缓动函数

引擎实现了一系列不同类型的缓动函数，通过这些缓动函数，可以实现不同的实时动画效果。这些缓动函数主要用于 Tween.to 和 Tween.by 这两个接口中。

内置缓动函数

目前引擎提供的缓动函数如下所示：

export type TweenEasing =
  | "linear"
  | "smooth"
  | "fade"
  | "constant"
  | "quadIn"
  | "quadOut"
  | "quadInOut"
  | "quadOutIn"
  | "cubicIn"
  | "cubicOut"
  | "cubicInOut"
  | "cubicOutIn"
  | "quartIn"
  | "quartOut"
  | "quartInOut"
  | "quartOutIn"
  | "quintIn"
  | "quintOut"
  | "quintInOut"
  | "quintOutIn"
  | "sineIn"
  | "sineOut"
  | "sineInOut"
  | "sineOutIn"
  | "expoIn"
  | "expoOut"
  | "expoInOut"
  | "expoOutIn"
  | "circIn"
  | "circOut"
  | "circInOut"
  | "circOutIn"
  | "elasticIn"
  | "elasticOut"
  | "elasticInOut"
  | "elasticOutIn"
  | "backIn"
  | "backOut"
  | "backInOut"
  | "backOutIn"
  | "bounceIn"
  | "bounceOut"
  | "bounceInOut"
  | "bounceOutIn";

其缓动效果可参考下图：

图片源自 http://hosted.zeh.com.br/tweener/docs/en-us/

通过 ITweenOption 接口，可以修改缓动函数。其代码示例如下：

let tweenDuration: number = 1.0; // 缓动的时长
tween(this.node)
  .to(
    tweenDuration,
    { position: new Vec3(0, 10, 0) },
    {
      // 这里以node的位置信息坐标缓动的目标
      easing: "backIn", // 缓动函数，可以使用已有的，也可以传入自定义的函数。
    }
  )
  .start(); // 调用 start 方法，开启缓动

ITweenOption 接口说明

ITweenOption 为缓动的可选属性接口定义。其接口皆为 可选，可按需使用。完整示例如下：

let tweenDuration: number = 1.0; // 缓动的时长
tween(this.node)
  .to(
    tweenDuration,
    { position: new Vec3(0, 10, 0) },
    {
      // 这里以node的位置信息坐标缓动的目标
      easing: "backIn", // 缓动函数，可以使用已有的，也可以传入自定义的函数。
      onStart: (target?: object) => {
        // 回调，当缓动动作启动时触发。
      },
      onUpdate: (target: Vec3, ratio: number) => {
        // onUpdate 接受当前缓动的进度
        this.node.position = target; // 将缓动系统计算出的结果赋予 node 的位置
      },
      onComplete: (target?: object) => {
        // 回调，当缓动动作更新时触发。
      },
      progress: (
        start: number,
        end: number,
        current: number,
        ratio: number
      ): number => {
        // 返回自定义插值进度
        return 0.0;
      },
    }
  )
  .start(); // 调用 start 方法，开启缓动

通过 progress 接口，也可以自定义缓动的进度，代码示例如下：

tween(this.node)
  .to(
    1.0,
    {
      position: new Vec3(0, 100, 0),
    },
    {
      progress: (
        start: number,
        end: number,
        current: number,
        ratio: number
      ): number => {
        return math.lerp(start, end, ratio);
      },
    }
  )
  .start();