Three.js之补间动画Tween

补间动画（Tween Animation）是一种常用的动画效果实现方法，用于在两个或多个状态之间平滑过渡。在 Three.js 中，可以使用补间动画库（Tween）来创建和控制补间动画。

补间动画通过定义起始状态和目标状态，并指定过渡时间和缓动函数，在指定的时间内自动计算并更新中间状态，从而实现平滑的动画效果，并且可以对对象的属性进行补间动画，比如位置、旋转、缩放等。

# 基本使用

# 导入补间动画

// 导入补间动画

import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

# 创建物体

const Ball=new Three.Mesh(

    new Three.SphereGeometry(1,16,16),

    new Three.MeshBasicMaterial({

        color:'red'

    })

)

Ball.position.x=-3

Ball.position.y=3

scene.add(Ball)

# 创建补间动画

// 创建补间动画

const tween=new TWEEN.Tween(Ball.position)

# 目标位置

// 定义目标位置

tween.to({x:3},1000)

# 启动动画

// 启动动画

tween.start()

# 更新动画

function animate() {

    controls.update()

    requestAnimationFrame(animate)

    render.render(scene, camera)

    // 更新 Tween

    TWEEN.update()

}

# 进阶使用

# 重复

// 无限次重复

tween.repeat(Infinity)

// 重复两次

tween.repeat(2)

# 往返摆动（悠悠球）

// 反复摆动

tween.yoyo(true)

# 延迟

// 延迟运行

tween.delay(1000)

# 启用缓动函数 (速度曲线) 官网有

// 启用缓动函数

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

# 动画链接（链式）

A 动画执行完，再执行 B 动画

tweena.chain(tweenb)

tweena.start()

# 坑点

启动动画链接的时候，不需要再开启另一个动画了

就是说 tweena.chain (tweenb)
只需要 tweena.start ()，执行完 tweena 后就会自动执行 tweenb
不需要 tweenb.start (), 这样会同时执行 tweena.chain (tweenb) 和 tweenb