Tween.js使用指南与详解(最新推荐)

lichongyang

12 小时前

下面给你一份 最新整理（2025版）的 Tween.js 使用指南与详解，从基础到高级全部覆盖，结构清晰、可直接作为项目文档或学习笔记。

🎯 什么是 Tween.js？

Tween.js 是一个轻量、强大、独立的缓动动画库，通过 补间（Tween）方式平滑改变任意数值。

可用于：

✔ 位置移动
✔ 透明度变化
✔ 缩放旋转
✔ 颜色渐变
✔ 复杂动画序列
✔ Three.js、Canvas、小游戏、H5 动画

📦 一、安装与引入

1. npm 环境

npm install @tweenjs/tween.js

import * as TWEEN from '@tweenjs/tween.js';

2. script 引入（CDN）

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js">&lt;/script>

🧩 二、使用基本结构（最核心）

Tween.js 的动画由三部分组成：

初始状态（起点）
目标状态（终点）
动画循环更新

✅ 基础示例：让一个对象 x 从 0 → 100

const obj = { x: 0 };

const tween = new TWEEN.Tween(obj)
  .to({ x: 100 }, 1000) // 1000ms
  .start();

然后在你的渲染循环中（requestAnimationFrame）调用：

function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
animate();

📌 注意：没有 TWEEN.update()，动画不会动。

🧩 三、常用配置方法

下面是 Tween.js 最常用的链式 API：

new TWEEN.Tween(obj)
  .to({ ... }, duration)
  .easing(TWEEN.Easing.Quadratic.Out)
  .delay(500)
  .repeat(3)
  .yoyo(true)
  .chain(nextTween)
  .onStart(() => {})
  .onUpdate(() => {})
  .onComplete(() => {})
  .start();

下面为你逐一说明。

🧮 四、Easing（缓动函数）

Tween.js 内含几十种常用缓动：

TWEEN.Easing.Linear.None
TWEEN.Easing.Quadratic.In
TWEEN.Easing.Quadratic.Out
TWEEN.Easing.Quadratic.InOut
TWEEN.Easing.Cubic.InOut
TWEEN.Easing.Elastic.Out
TWEEN.Easing.Bounce.Out

示例：

tween.easing(TWEEN.Easing.Cubic.Out)

⏱ 五、delay / repeat / yoyo（重复播放）

1. 延迟 500ms

tween.delay(500);

2. 重复 3 次

tween.repeat(3);

3. yoyo：反向播放（来回动）

tween.yoyo(true);

📌 yoyo 必须配合 repeat 使用。

🔗 六、Tween 链接（chain）

可做序列动画：

tween1.chain(tween2);
tween2.chain(tween3);

示例：

tween1
  .to({ x: 100 }, 1000);

tween2
  .to({ x: 0 }, 1000);

tween1.chain(tween2);

🧨 七、完整示例：移动一个 DOM 元素

const box = document.getElementById("box");

const state = { x: 0 };

new TWEEN.Tween(state)
  .to({ x: 300 }, 1000)
  .easing(TWEEN.Easing.Quadratic.Out)
  .onUpdate(() => {
    box.style.transform = `translateX(${state.x}px)`;
  })
  .start();

function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
animate();

🎨 八、颜色动画（RGB 动画）

Tween.js 不支持颜色，需要自己拆分 RGB：

const color = { r: 255, g: 0, b: 0 };

new TWEEN.Tween(color)
  .to({ r: 0, g: 255, b: 0 }, 1000)
  .onUpdate(() => {
    box.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;
  })
  .start();

🧩 九、Three.js 结合 Tween.js（官方强推）

const mesh = new THREE.Mesh(...);
mesh.position.set(0, 0, 0);

new TWEEN.Tween(mesh.position)
  .to({ x: 5, y: 2, z: -3 }, 1500)
  .easing(TWEEN.Easing.Cubic.Out)
  .start();

⭐ 推荐：Three.js 的运动尽量使用 Tween.js，比自写插值更舒服。

🧠 十、多个 Tween 同时运行（Group）

每个 Group 独立更新：

const group = new TWEEN.Group();

const tween = new TWEEN.Tween(obj, group)
  .to({ x: 200 }, 1000)
  .start();

function animate(time) {
  requestAnimationFrame(animate);
  group.update(time);
}
animate();

🚦 十一、暂停与恢复动画

Tween.js 没有直接 pause 方法，但可以通过 stop/start 实现。

暂停

tween.stop();

恢复

tween.start();

🔥 十二、常见问题与注意事项（非常重要）

❗ 1. 忘了调用 TWEEN.update()

动画不动的 95% 原因。

❗ 2. 动画对象必须是数值

不能 tween 字符串：

{ x: "100px" } // ❌

需要自己解析。

❗ 3. 对象引用要一致

const obj = { x: 0 };
new TWEEN.Tween(obj) // ✔ 正确

不可传字面量：

new TWEEN.Tween({ x: 0 }) // ❌ 动画不会更新到外部

🎁 十三、终极模板：封装一个 Tween 动画函数（推荐项目中使用）

function tweenTo(obj, target, duration = 1000, easing = TWEEN.Easing.Quadratic.Out) {
  return new TWEEN.Tween(obj)
    .to(target, duration)
    .easing(easing)
    .start();
}

使用：

tweenTo(boxStyle, { x: 500, y: 200 }, 1000);

📚 十四、附：Tween.js 最常用 Easing 速查表

类别	方法
Linear	Linear.None
Quadratic	In / Out / InOut
Cubic	In / Out / InOut
Quartic	In / Out / InOut
Quintic	In / Out / InOut
Sinusoidal	In / Out / InOut
Exponential	In / Out / InOut
Circular	In / Out / InOut
Elastic	In / Out / InOut
Back	In / Out / InOut
Bounce	In / Out / InOut

告诉我你要哪个？