tween.js 中文使用指南

最新推荐文章于 2025-06-19 15:22:12 发布

weixin_33984032

最新推荐文章于 2025-06-19 15:22:12 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端测试 ViewUI

原文链接：http://www.cnblogs.com/wwhhq/p/8228059.html

tween.js 是一个用于创建平滑动画的库，提供了多种控制动画的方法，如 start, stop, update, chain, repeat, yoyo 等。用户可以通过控制补间对象实现动画的启动、停止和更新，还可以设置缓动函数、回调函数，以及控制补间组。此外，tween.js 支持相对值、数组值的动画，和改变缓动功能以增强动画效果。为了提高性能，推荐在主循环中使用 requestAnimationFrame 调用 TWEEN.update，并尽量避免在 onUpdate 回调中执行复杂操作。" 80146384,7339566,进程间通信与文件系统详解,"['操作系统', '进程通信', '文件管理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tween.js 英文使用指南首先来看个例子: hello,tween.js

补间(动画)（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。

例如，position对象拥有x和y两个坐标:

var position = { x: 100, y: 0 }

如果你想将x坐标的值从100变成200，你应该这么做：

// 首先为位置创建一个补间(tween)
var tween = new TWEEN.Tween(position);

// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
tween.to({ x: 200 }, 1000);

一般来说这样还不够，tween 已经被创建了，但是它还没被激活(使用)，你需要这样启动：

// 启动
tween.start();

最后，想要成功的完成这种效果，你需要在主函数中调用TWEEN.update，如下使用：

animate();

function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

这样在更新每帧的时候都会运行补间动画；经过 1秒后 (1000 毫秒) position.x将会变成 200。

除非你在控制台中打印出 x 的值，不然你看不到它的变化。你可能想要使用 onUpdate 回调:

tween.onUpdate(function(object) {
    console.log(object.x);
});

tips:你可能在这里获取不到 object.x ,具体的见我提的这个 issue

这个函数将会在动画每次更新的时候被调用；这种情况发生的频率取决于很多因素 - 例如，计算机或设备的速度有多快（以及如何繁忙）。

到目前为止，我们只使用补间动画向控制台输出值，但是您可以将它与 three.js 对象结合：

var tween = new TWEEN.Tween(cube.position)
        .to({ x: 100, y: 100, z: 100 }, 10000)
        .start();

animate();

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

    threeRenderer.render(scene, camera);
}

在这种情况下，因为three.js渲染器将在渲染之前查看对象的位置，所以不需要使用明确的onUpdate回调。

你可能也注意到了一些不同的地方：tween.js 可以链式调用！每个tween函数都会返回tween实例，所以你可以重写下面的代码：

var tween = new TWEEN.Tween(position);
tween.to({ x: 200 }, 1000);
tween.start();

改成这样：

var tween = new TWEEN.Tween(position)
    .to({ x: 200 }, 1000)
    .start();

在将会看到很多例子，所以熟悉它是很好的！比如 04-simplest 这个例子。

tween.js的动画

Tween.js 不会自行运行。你需要显式的调用 update 方法来告诉它何时运行。推荐的方法是在主动画循环中执行这个操作。使用 requestAnimationFrame 调用此循环以获得最佳的图形性能。

比如之前这个例子：

animate();

function animate() {
    requestAnimationFrame(animate)

最低0.47元/天解锁文章

200万优质内容无限畅学