Three.js之补间动画Tween - threejs - 前端 - 技术设计

补间动画（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

threejs