tween.js 自定义缓动函数与相对值动画高级用法

一、自定义缓动函数的核心数学规范与运作原理

在 tween.js 中，动画插值的本质是根据时间推移计算属性的中间状态。在每一次调用 TWEEN.update(time) 时，补间实例会计算出当前动画的时间完成比例，即归一化进度因子 k：

k = (currentTime - startTime) / duration

其中 k 是一个取值范围严格在 [0, 1] 之间的浮点数。任何缓动函数的职责，就是接收这个 k，并返回一个映射后的插值权重 v = f(k)。tween.js 随后使用该权重计算目标对象的瞬时属性：

currentValue = startValue + (targetValue - startValue) * f(k)

二、开发与接入自定义缓动函数

在工程中实现自定义缓动函数时，不仅要满足数学上的曲线平滑，还要兼顾高频更新下的执行性能。以下是标准化的开发实施步骤：

常用高级自定义缓动示例

下面演示三种不同工程场景的自定义缓动函数：阻尼震荡（Spring Damping）、阶梯步进（Steps）以及高阶自定义曲线。

// 1. 物理阻尼衰减缓动（模拟弹簧回弹进入终点，避免引入沉重的物理引擎）
function createSpringEasing(mass = 1, stiffness = 100, damping = 10) {
  const w0 = Math.sqrt(stiffness / mass);
  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
  const wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;

  return function springEasing(k) {
    if (k <= 0) return 0;
    if (k >= 1) return 1;

    // 阻尼振荡公式衰减映射
    const decay = Math.exp(-zeta * w0 * k * 5);
    const oscillation = Math.cos(wd * k * 5);
    return 1 - decay * oscillation;
  };
}

// 2. 阶梯量化缓动（模拟像素复古跳跃或打字机定格节奏）
function createStepEasing(steps = 5) {
  return function stepEasing(k) {
    if (k <= 0) return 0;
    if (k >= 1) return 1;
    return Math.floor(k * steps) / steps;
  };
}

// 3. 缓入重击并轻微回弹缓动（工程定制手感）
function heavyImpactEase(k) {
  if (k <= 0) return 0;
  if (k >= 1) return 1;
  // 前 75% 极速加速突进，后 25% 发生反向过冲收敛
  if (k < 0.75) {
    const t = k / 0.75;
    return 1.1 * (t * t * t);
  } else {
    const t = (k - 0.75) / 0.25;
    return 1.1 - 0.1 * Math.sin(t * Math.PI * 0.5);
  }
}

三、相对值动画的高级语法与动态增量机制

默认情况下，tween.to({ x: 300 }, 1000) 是绝对目标插值：无论对象当前 x 坐标为何值，补间结束时都会移动到固定绝对坐标 300。

但在游戏控制、手势拖拽松手、连续点击微调或滚动步进等场景中，往往需要“在当前位置的基础上再偏移一段距离”。tween.js 原生支持字符串前缀语法表达相对位移：

• '+100' 或 '+=100'：在动画启动时的当前值基础上增加 100；
• '-50' 或 '-=50'：在动画启动时的当前值基础上减少 50。

相对值在连续动态输入中的核心代码范式

在键盘方向键监听或 UI 列表按步翻滚场景下，开发者通常会复用同一个坐标状态对象。以下代码演示如何正确通过相对值实现连击平滑累加：

// 托管的实体状态
const player = { x: 0, y: 0 };

// 运动调度器：连续调用时平滑累加
function moveDelta(deltaX, deltaY, duration = 600) {
  // 格式化相对值字符串（注意符号处理）
  const xStr = deltaX >= 0 ? `+${deltaX}` : `${deltaX}`;
  const yStr = deltaY >= 0 ? `+${deltaY}` : `${deltaY}`;

  new TWEEN.Tween(player)
    .to({ x: xStr, y: yStr }, duration)
    .easing(TWEEN.Easing.Cubic.Out)
    .onUpdate((obj) => {
      renderSprite(obj.x, obj.y);
    })
    .start();
}

// 模拟用户连续按键触发右移
moveDelta(100, 0); // 移动至 100
setTimeout(() => moveDelta(100, 0), 200); // 在移动中途再次增量 100，终点动态推至 200

四、综合实战：多轴相对增量与自定义弹簧联动控制器

下面给出一个将物理阻尼自定义缓动与多轴相对值插值深度结合的完整工程模块。该模块实现了三维视图或 Canvas 场景中具有机械抗阻手感的平移摄像机控制器。

/**
 * 带有物理弹簧手感的平移联动控制器
 */
class SpringMotionController {
  constructor(targetElement) {
    this.state = { x: 0, y: 0, scale: 1.0 };
    this.targetElement = targetElement;
    this.activeTween = null;

    // 预生成高响应物理弹簧缓动
    this.springEase = createSpringEasing(1.2, 140, 14);
    this.initRenderLoop();
  }

  // 帧更新循环驱动
  initRenderLoop() {
    const loop = (time) => {
      requestAnimationFrame(loop);
      TWEEN.update(time);
    };
    requestAnimationFrame(loop);
  }

  // 增量步进操作
  nudge(stepX, stepY, scaleFactor = 0) {
    // 若前一个动画尚未完全停稳，平滑中断接管，防止起点突变
    if (this.activeTween) {
      this.activeTween.stop();
    }

    const xRelative = stepX >= 0 ? `+${stepX}` : `${stepX}`;
    const yRelative = stepY >= 0 ? `+${stepY}` : `${stepY}`;
    const scaleRelative = scaleFactor >= 0 ? `+${scaleFactor}` : `${scaleFactor}`;

    this.activeTween = new TWEEN.Tween(this.state)
      .to({ x: xRelative, y: yRelative, scale: scaleRelative }, 850)
      .easing(this.springEase)
      .onUpdate((val) => {
        // 将多轴计算值赋给 DOM 变换矩阵
        this.targetElement.style.transform = 
          `translate3d(${val.x.toFixed(2)}px, ${val.y.toFixed(2)}px, 0) scale(${val.scale.toFixed(3)})`;
      })
      .onComplete(() => {
        this.activeTween = null;
      })
      .start();
  }
}

五、生产环境避坑要点与性能调优

在实际项目落地中，由于缓动函数是在帧循环中高频调用的，而相对值会在运行时解析字符串，若不注意生命周期管理，容易产生卡顿或意外的状态漂移。必须严密注意以下三处陷阱：

六、总结与关键决策对照

掌握自定义缓动函数与相对值语法，意味着打破了 tween.js 仅用于常规线性位移的局限。在技术选型与实现时，可参照以下对照表快速决策：

在编写生产级动画时，将纯数学思维融入缓动函数的 k 映射，配合相对值的解耦增量，可以在保持轻量级（无额外体积膨胀）的前提下，构建出丝滑、灵动且具备工程稳健性的现代 Web 动效体系。