tween.js

用于简单动画的 JavaScript (TypeScript) 补间引擎，结合优化的 Robert Penner 方程式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>

<div id="box"></div>

<style>
	#box {
		background-color: deeppink;
		width: 100px;
		height: 100px;
	}
</style>

<script>
	const box = document.getElementById('box') // 获取我们想要设置动画的元素。

	const coords = {x: 0, y: 0} // 从 (0, 0) 开始

	const tween = new TWEEN.Tween(coords, false) // 创建一个修改“坐标”的新 tween。
		.to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。
		.easing(TWEEN.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>

在 CodePen 上试试这个例子

安装

从 CDN 安装

从上例中的内容分发网络 (CDN) 安装。

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>

请注意，unpkg.com 支持 URL 中的 semver 版本，其中 URL 中的 ^ 告诉 unpkg 为你提供最新版本 20.x.x。

使用 script 标签构建并包含在你的项目中

目前需要 npm 来构建项目。

git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build

这将在 dist 目录中创建一些构建。目前有两种不同的库版本：

UMD : tween.umd.js
ES6 Module : tween.esm.js

你现在可以将 tween.umd.js 复制到你的项目中，然后将其包含在一个 script 标签，它将 TWEEN 添加到全局范围，

<script src="path/to/tween.umd.js"></script>

或将 TWEEN 作为 JavaScript 模块导入，

<script type="module">
	import * as TWEEN from 'path/to/tween.esm.js'
</script>

其中 path/to 替换为你放置文件的位置。

使用 `npm install` 和 `import` 从 `node_modules` 中添加

你可以将 tween.js 添加为 npm 依赖项：

npm install @tweenjs/tween.js

使用构建工具

如果你使用 Node.js、Parcel、Webpack, Rollup、Vite 或者其他的构建工具，那么你现在可以使用以下方式来导入 tween.js：

import * as TWEEN from '@tweenjs/tween.js'

没有构建工具

如果你将 node_modules 作为网站的一部分提供服务，则可以使用 importmap script 标签从 node_modules 导入。首先，假设 node_modules 位于你网站的根目录，你可以编写一个导入映射：

<script type="importmap">
	{
		"imports": {
			"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
		}
	}
</script>

现在，在任何 module script 中，你都可以通过包名导入它：

import * as TWEEN from '@tweenjs/tween.js'

特性

做一件事并且只做一件事：补间属性
不处理 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)