Three.js 补间动画Tween

在Three.js中，补间动画（Tween Animation）是一种常用的动画效果实现方法，用于在两个或多个状态之间平滑过渡。补间动画通过定义起始状态和目标状态，并指定过渡时间和缓动函数，在指定的时间内自动计算并更新中间状态，从而实现平滑的动画效果。这种动画可以应用于对象的属性，如位置、旋转、缩放等。

1. 使用步骤

1.1 导入补间动画库：

// 导入补间动画
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';

1.2 创建补间动画：

let tween = new TWEEN.Tween(cube.position);

1.3 定义目标状态和持续时间：

tween.to({ x: 4 }, 2000);

1.4 启动补间动画：

tween.start();

1.5 更新补间动画：

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    // 更新补间动画
    TWEEN.update();
}
animate();

2. 补间动画的进阶使用

2.1 重复动画：

tween.repeat(Infinity); // 无限次重复
// 或者指定重复次数
tween.repeat(2); // 重复2次

2.2 往返摆动（悠悠球效果）：

tween.yoyo(true);

2.3 延迟启动：

tween.delay(1000); // 延迟1秒

2.4 设置缓动函数：

tween.easing(TWEEN.Easing.Quadratic.InOut);

2.5 链式动画：

const tween2 = new TWEEN.Tween(object.position);
tween2.to({ y: -3 }, 1000);
tween.chain(tween2); // 第一个动画完成后执行第二个动画
tween.start();

3. 补间动画的回调函数

3.1 开始时回调：

tween.onStart(() => {
    console.log('开始时回调');
});

3.2 完成时回调：

tween.onComplete(() => {
    console.log('结束时回调');
});

3.3 停止时回调：

tween.onStop(() => {
    console.log('停止时回调');
});

3.4 更新时回调：

tween.onUpdate(() => {
    console.log('更新时的回调');
});

4. 效果如下：