下面给你一份 最新整理（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）
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></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 |
告诉我你要哪个？
发表回复