1. 简介
Tween.js 是一款轻量级的 JavaScript 动画库，用于实现基于时间的动画效果。它有丰富的缓动效果，并支持链式动画与循环动画等高级功能。Tween.js 适用于前端 Web 开发及游戏动画开发。
2. 安装
我们可以使用 npm 包管理器来安装 Tween.js，执行以下命令安装 Tween.js：
npm install @tweenjs/tween.js
3. 使用
我们可以在项目中引入 Tween.js 模块并实例化一个 Tween 对象来创建一个 Tween 动画。以下是示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- -------------------- -- -- ----- -- ----- ----- - --- --------- -- -- --- ------- ---- -- ----- ----- -- ----- ------ ------------------------------------- -- ---- ------------------ -- ---- -- ------ -------- ------------- - ------------------------------- ------------------- - ----------
在上述代码中，我们首先从 @tweenjs/tween.js 模块中引入了 Tween 类，然后使用 new 关键字创建了一个 Tween 的实例对象 tween，并传入了一个包含初始属性值的对象 {x: 0, y: 0}。之后我们使用 to 方法指定了动画的目标属性值 {x: 100, y: 100}，并指定了动画的时长为 1000 毫秒。接着我们使用 easing 方法指定动画的缓动函数，这里我们使用了 TWEEN.Easing.Quadratic.InOut 默认的缓动函数。最后我们使用 repeat 方法指定了动画的重复次数为无限循环。
在创建完 tween 对象后，我们需要在主循环中循环渲染，实现动画的播放。我们使用 requestAnimationFrame 方法以每秒 60 帧的速度进行循环渲染，调用 tween.update 方法对动画进行更新。
4. API
Tween.js 提供了丰富的 API 用于设置 Tween 动画。常见的 Tween.js API 包括：
4.1 new Tween(obj)
构造函数，用于创建一个 Tween 对象实例，传入一个对象 obj 作为 Tween 动画的初始属性值。
4.2 to(obj, duration)
方法，指定 Tween 动画的目标属性值和动画时长 duration。
4.3 easing(easing)
方法，指定 Tween 动画的缓动函数，easing 可以是 Tween.js 中自带的缓动函数，也可以是自定义的缓动函数。
4.4 delay(time)
方法，指定 Tween 动画的延迟时间 time，单位为毫秒。
4.5 onStart(callback)
方法，指定 Tween 动画开始播放时的回调函数 callback。
4.6 onComplete(callback)
方法，指定 Tween 动画播放完成时的回调函数 callback。
4.7 repeat(times)
方法，指定 Tween 动画的重复次数 times，默认为 0，即不重复，设置为 Infinity 则表示无限循环。
5. 总结
本文介绍了 npm 包 @tweenjs/tween.js 的使用教程，讲解了 Tween.js 的基本用法及常用 API，希望能够为开发者们提供帮助。在实际开发中，Tween.js 可以帮助我们实现各种复杂的动画效果，提升 Web 应用与游戏的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116506