Tween.js仅计算数值插值，不操作DOM或渲染层；需手动配合requestAnimationFrame调用TWEEN.update()驱动动画；多tween不可同时作用于同一属性，应聚合更新或用onUpdate同步。
Tween.js 本身不操作 DOM，也不驱动 HTML5 Canvas 或 SVG 动画——它只负责计算任意两个数值之间的插值过程。直接用它“制作动画”会卡在“动不起来”这一步。
为什么 Tween 实例调用 .start() 后没反应？
因为 Tween 不自动绑定渲染循环。它默认只做一次数值计算，必须手动配合 requestAnimationFrame 才能形成动画帧流。
- 漏掉
requestAnimationFrame循环驱动，.start()只是把 tween 注册进全局 ticker，但没人调用.update() - 常见写法错误：
const t = new TWEEN.Tween(obj).to({x: 100}, 1000); t.start(); // ❌ 没有 requestAnimationFrame 驱动，不会动 - 正确做法是主动循环调用
TWEEN.update()：function animate() { TWEEN.update(); requestAnimationFrame(animate); } animate();
TWEEN.update() 的时间参数到底要不要传？
传不传取决于你是否需要精确控制时间步长。不传时，TWEEN 内部用 performance.now() 自行采样；传入则完全由你掌控时间逻辑（适合与游戏循环、音轨同步等场景）。
- 日常 Web 动画建议不传：让库自己处理，避免因手动传错时间导致倒播或跳帧
- 若需暂停/快进/逐帧调试，可传入自定义时间戳：
let elapsed = 0; function simulate() { elapsed += 16; // 模拟 60fps TWEEN.update(elapsed); } - 注意：传入的时间单位是毫秒，且必须单调递增，否则 tween 可能误判为已结束
如何让多个 tween 同时作用于同一个对象属性而不冲突？
不能直接对同一属性起多个 .to() tween——后启动的会覆盖前一个的缓动目标和状态。必须用 onUpdate 手动聚合，或改用单个 tween 管理复合状态。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
new TWEEN.Tween(box).to({x: 200}, 1000).start(); new TWEEN.Tween(box).to({x: 300}, 800).start(); // ❌ 第二个会中断第一个，box.x 最终只走向 300 - 推荐方式：用一个 tween 控制多个字段，或用
onUpdate合并逻辑：new TWEEN.Tween({x: box.x, y: box.y}) .to({x: 200, y: 150}, 1000) .onUpdate(v => { box.x = v.x; box.y = v.y; }) .start(); - 更健壮的做法是封装状态对象，避免直接操作原始 DOM 属性
真正难的不是写 tween 表达式，而是把数值变化映射到真实渲染层——CSS transform、Canvas ctx.translate、SVG setAttribute('cx')，每种都要单独桥接。别指望 Tween.js 自动帮你改样式，它连 document 都不认识。
