tween.js
用于简单动画的 JavaScript (TypeScript) 补间引擎，结合优化的 Robert Penner 方程式。
<div id="box"></div>
<style>
#box {
background-color: deeppink;
width: 100px;
height: 100px;
}
</style>
<script type="module">
import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
const box = document.getElementById('box') // 获取我们想要设置动画的元素。
const coords = {x: 0, y: 0} // 从 (0, 0) 开始
const tween = new Tween(coords, false) // 创建一个修改"坐标"的新 tween。
.to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。
.easing(Easing.Quadratic.InOut) // 使用缓动函数使动画流畅。
.onUpdate(() => {
// 在 tween.js 更新"坐标"后调用。
// 使用 CSS transform 将 'box' 移动到 'coords' 描述的位置。
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
})
.start() // 立即开始 tween。
// 设置动画循环。
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
特性
- 专注于一件事并且做得很好：补间对象的属性
- 不处理 CSS 单位（例如添加
px） - 不插值颜色
- 缓动函数可在 Tween 之外重复使用
- 也可以使用自定义缓动函数
- 不创建自己的动画循环，使其能够灵活地集成到 任何动画循环中。
示例
|
hello world (source) |
|
Bars (source) |
|
Black and red (source) |
|
Graphs (source) |
|
Simplest possible example (source) |
|
Video and time (source) |
|
|
Array interpolation (source) |
|
Dynamic to, object (source) |
|
Dynamic to, interpolation array (source) |
|
Dynamic to, large interpolation array (source) |
|
Repeat (source) |
|
Relative values (source) |
|
Yoyo (source) |
|
Stop all chained tweens (source) |
|
|
Custom functions (source) |
|
Relative start time (source) |
|
Pause tween (source) |
|
Complex properties (source) |
|
Animate an array of values (source) |
安装
推荐的方法是使用 import 语法。这里我们列出了各种安装方法，大致按照最推荐到最不推荐的顺序排列。请评估以下所有方法，选择最适合你项目的方法。
使用 npm install 和从 node_modules 导入
你可以将 tween.js 添加为 npm 依赖项：
npm install @tweenjs/tween.js
不使用构建工具
本地安装
如果你将 node_modules 作为网站的一部分提供服务，可以使用标准的 importmap 脚本标签从 node_modules 导入。首先，假设 node_modules 位于你网站的根目录，你可以在 HTML 文件中编写导入映射：
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
}
}
</script>
现在在任何模块脚本中，你都可以通过包名导入 Tween.js：
<script type="module">
import {Tween} from '@tweenjs/tween.js'
</script>
从 CDN 导入
请注意，没有 importmap 的情况下，你可以像上面第一个示例一样直接从 CDN 导入：
<script type="module">
import {Tween} from 'https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
</script>
如果你愿意，也可以将 importmap 链接到 CDN 而不是本地的 node_modules 文件夹：
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js"
}
}
</script>
<script type="module">
import {Tween} from '@tweenjs/tween.js'
</script>
使用构建工具
如果你使用 Node.js、Parcel、Webpack、Rollup、Vite 或其他构建工具，那么你可以使用 npm install @tweenjs/tween.js 安装，然后将库 import 到你的 JavaScript（或 TypeScript）文件中，构建工具会知道如何从 node_modules 找到源代码，而无需创建 importmap 脚本：
import * as TWEEN from '@tweenjs/tween.js'
但是请注意，这种方法需要始终运行构建工具才能使你的应用程序工作，而 importmap 方法无需任何构建工具即可作为简单的静态 HTML 站点工作。
手动构建
另一种方法是使用 git 下载源代码，手动构建库，然后将输出放置在你的项目中。这需要 Node.js。
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
这将在 dist 目录中创建一些构建文件。目前有两种不同的库构建版本：
- ES6 模块在
/dist/tween.esm.js（推荐） - UMD 在
/dist/tween.umd.js（已弃用，将在未来的主要版本中删除）
你现在可以将这两个文件中的一个复制到你的项目中，并像这样使用（推荐）：
<script type="module">
import {Tween} from 'path/to/tween.esm.js'
</script>
或（已弃用，将在未来的主要版本中删除）：
<script src="path/to/tween.umd.js"></script>
<script>
const {Tween} = TWEEN
</script>
其中 path/to 替换为你放置文件的位置。
[!Note] 你也可以从 unpkg 下载这些文件，例如： https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/
从 CDN 使用全局变量（已弃用）
[!Note] 此方法已弃用，将在未来的主要版本中删除！
使用 UMD 文件从内容分发网络（CDN）安装全局 TWEEN 变量。
从 cdnjs：
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
或从 unpkg.com：
<script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
然后在任何脚本中使用 TWEEN 变量：
<script>
const {Tween, Easing, Group /*, ...*/} = TWEEN
const tween = new Tween(someObject)
// ...
</script>
[!Note] unpkg.com 支持 URL 中的 semver 版本，其中 URL 中的
^告诉 unpkg 提供最新版本 20.x.x。
CommonJS（已弃用）
如果你不知道 CommonJS 是什么，请跳过此部分！
[!Note] 此方法已弃用，将在未来的主要版本中删除！
以上任何方法都适用于仍使用 CommonJS 的旧系统。重复以上任何方法，但使用 dist/tween.cjs 而不是 dist/tween.esm.js 或 dist/tween.umd.js。
文档
测试
你需要先安装 npm——它随 node.js 一起提供，因此请先安装它。然后，cd 到 tween.js 的（或你克隆 repo 的任何地方）目录并运行：
npm install
运行测试：
npm test
如果你想添加任何功能或更改现有功能，你 必须 运行测试以确保你没有破坏任何其他功能。任何拉取请求 (PR) 都需要在 src/tests.ts 中为功能更改提供更新的通过测试（或为新功能或修复提供新的通过测试）才能被接受。有关更多信息，请参阅 贡献。
人员
维护者：Joe Pea (@trusktr)。
使用 tween.js 的项目
