three js 9 补间动画tween

文章目录

快速实现匀速

javascript 复制代码

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


//创建补间动画
const tween = new Tween(cube.position);
tween.to({x: 3}, 1000);//毫秒
tween.repeat(Infinity);
tween.yoyo(true);
tween.delay(1000);//延迟1秒开始 循环模式下每次循环开始前都会延迟
//开启动画，打印动画的值
tween.start().onUpdate(v=>
    {
        console.log(v);
    });

//定义一个每帧更新函数
function Update() 
{
    requestAnimationFrame(Update);
    controls.update();
    
    //更新动画 用TWEEN会更新所有的动画 可以用引用只更新某一个具体的动画
    TWEEN.update();
    
    renderer.render(scene, camera);
}
Update();

效果是方块会移动

yoyo动画的bug

如果使用了yoyo的动画，且没有加delay，会有如下问题

javascript 复制代码

每次切换方向，方块都会闪一下，看起来他先跑到了终点的位置，然后再从起点移动向终点

AI给的解释为这是已知的bug

javascript 复制代码

每一帧 update() 里顺序大致是：

先按当前的「起点 → 终点」插值，改 cube.position
若本帧刚好超过时长，再做 yoyo：对调起点/终点
问题出在第 1 步：时间稍微超过 1000ms 时，进度会被算成「下一轮接近 0」，但此时还没用新方向，仍按旧的 0 → 3 插值，于是先被拉回接近起点；接着才交换起终点，下一帧又按 3 → 0 插值，再跳到接近 3。肉眼就是切换方向时闪一下。

方案有两个

1 加上一个极短的delay

2 改用两个动画相互调用

javascript 复制代码

const tweenGo = new Tween(cube.position).to({ x: 3 }, 1000);
const tweenBack = new Tween(cube.position).to({ x: 0 }, 1000);
tweenGo.chain(tweenBack);
tweenBack.chain(tweenGo);
tweenGo.start();

动画曲线

javascript 复制代码

//注意必须要以这个形式导入
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";

const tween = new TWEEN.Tween(cube.position);
tween.to({x: 5}, 3000);//毫秒
tween.easing(TWEEN.Easing.Quintic.InOut);//速度曲线
tween.start()

动画链

javascript 复制代码

const tween1 = new TWEEN.Tween(cube.position).to({x: 2}, 1000);
let tween2 = new TWEEN.Tween(cube.position).to({y: -2}, 1000);
tween1.chain(tween2);
tween1.start();

常用事件函数

javascript 复制代码

tween1.onComplete(v=>{console.log("动画完成")});
tween1.onUpdate(v=>{console.log(v)});
tween1.onStart(v=>{console.log("动画开始")});
tween1.onLoop(v=>{console.log("动画循环")});
tween1.onRepeat(v=>{console.log("动画重复")});
tween1.onStop(v=>{console.log("动画停止")});
tween1.onPause(v=>{console.log("动画暂停")});
tween1.onResume(v=>{console.log("动画恢复")});