Three.js —— Tween.js 使用文档 （补间动画）

Tween.js官网文档：tween.js user guide | tween.js (tweenjs.github.io)

1. 引入Tween.js

import TWEEN from "./tween.js-master/dist/tween.esm.js"

2. 定义基本Tween动画

目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。

模式一：

 

// 1 设置动画
const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值
    .to({x:20,y:50,z:30},1000) // 目标值，毫秒数
    // 在动画执行期，不断被调用。其中obj为"to"里面的内容
    .onUpdate(function(obj){ 
        model.position.x=obj.x; // x:20
        model.position.y=obj.y;
        model.position.z=obj.z;
    })
    .start()

// 2 启动动画
function loop(){
    // 更新动画
    TWEEN.update() 
    requestAnimationFrame(render);
}

模式二：

 

const action=new TWEEN.Tween(model.position) // 初始值：模型的初始位置
    .to({x:20,y:50,z:30},1000) // 目标值，毫秒数
    .start()

3 字段说明

const action=new TWEEN.Tween(需添加动画的属性)

const action=new TWEEN.Tween(需添加动画的属性)

字段	含义	示例	备注
start	执行动画	action.start( ) action.start(num)	.start(毫秒数)：延迟n毫秒之后运行动画
stop	停止动画	action.stop( )	停止的动画必须为正在运行的动画
chain	链式执行动画	actA.chain(actB,actC)	1. 当actA动画执行完后,立即执行actB和actC动画，其中B和C同时被执行。2. 前提:actA.start( ), actB和actC不需要开启.start( )
repeat	重复执行动画	action.repeat(num) action.repeat(Infinity)	1. num 重复执行的次数 2. Infinity 无限循环
yoyo	重复执行时是否衔接（起始值-结束值-起始值）溜溜球	action.yoyo(true)	只有在repeat( )独立使用时有效
delay	延迟执行动画	action.delay(num)	action.delay(1000).start( ) 延迟1000毫秒后执行动画,delay在start之前
to	控制动画结束时的目标值+动画持续时间(毫秒)	action.to(object,num)
easing	缓动动画	TWEEN.Easing.easing函数.easing类型	easing函数:算法->运动效果 easing函数:算法起作用的地方In、Out、InOut
onUpdate	在动画播放时，一直被调用	onUpdate(function)	function(obj){ } 形参obj指目标值(to( )的第1个参数)
onStart	动画开始播放时被调用一次	onStart(function)
onComplete	动画结束时被调用一次	onComplete(function)

警告：调用 actA.chain（actB） 实际上修改了actA，所以chain 的返回值只是actA，不是一个新的tween。

警告：yoyo(true) 只有在repeat(Infinity||200)单独使用时有效

 

4 easing 缓动动画

地址：/tween.js-master/examples/03_graphs.html 官方网址 · GitHub

Tween.js / easing with a power of number 

// 动画开始缓动-类比加速器
action.easing(TWEEN.Easing.Sinusoidal.In);
// 动画结束时缓动-类比减速刹车
action.easing(TWEEN.Easing.Sinusoidal.Out);
// 同时设置In和Out
action.easing(TWEEN.Easing.Sinusoidal.InOut);
 

5 例：相机旋转+模型淡入淡出动画

目的：

1. 当镜头移动时，镜头始终对准model模型，模型呈现淡入的效果
2. 当移动返回时，镜头始终对准model模型，模型呈现淡出的效果

镜头移动动画：

const cameraAct=new TWEEN.Tween(camera.position)
    .to({x:-100},3000)
    // 相机移动时，焦点始终为模型的位置
    .onUpdate(function(){
        camera.lookAt(model.position)
    })
    .start()

模型淡入动画：

const meshActIn = new TWEEN.Tween({ opacity: 0.0 })
    .to({ opacity: 1.0 }, 3000)
    // 动画开始：开启材质的透明度
    .onStart(function () {
        mat.transparent = true;
    })
    .onUpdate(function (obj) {
        mat.opacity = obj.opacity;
    })
    // 动画结束：关闭材质的透明度
    .onComplete(function () {
        mat.transparent = false;
    })
    .start();

模型淡出动画：

const meshActOut =new TWEEN.Tween({opacity:mat.opacity})
    .to({opacity:0.0}, 3000)
    // 动画开始：允许透明opacity属性才能生效
    .onStart(function(){
        material.transparent = true;
    })
    .onUpdate(function(obj){
        material.opacity = obj.opacity
    })
    .start();

备注

1. 材质需开启transparent，才能设置透明程度opacity

const mat = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.8,
});

1. 调用 actA.chain（actB） 实际上修改了actA，所以chain 的返回值只是actA，不是一个新的tween。
2. yoyo(true) 只有在repeat(Infinity||200)单独使用时有效