Tweenjs怎么使用

Tween.js 是一个 JavaScript 动画库，可以用于创建平滑的动画效果。使用 Tween.js 需要先引入 Tween.js 库文件，然后按照以下步骤创建动画：

定义动画的起始状态和目标状态。

var start = {x: 0, y: 0};
var end = {x: 100, y: 100};

创建 Tween 对象，指定起始状态、目标状态和动画持续时间。

var tween = new TWEEN.Tween(start)
    .to(end, 1000);

设置动画的缓动函数。

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

监听动画完成事件。

tween.onComplete(function() {
    console.log('Animation complete');
});

开始动画。

tween.start();

在每一帧更新动画状态。

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
}
animate();

完整的代码示例：

var start = {x: 0, y: 0};
var end = {x: 100, y: 100};

var tween = new TWEEN.Tween(start)
    .to(end, 1000)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .onComplete(function() {
        console.log('Animation complete');
    })
    .start();

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
}
animate();