tween.js 简单轻量级 JavaScript 补间动画引擎

Question

用于简单动画的 JavaScript 补间引擎，包含优化的 Robert Penner 方程。

更新说明：在 v18 中，您应该包含的脚本已从 src/Tween.js 移至 dist/tween.umd.js。请参阅下面的安装部分。

const box = document.createElement('div')
box.style.setProperty('background-color', '#008800')
box.style.setProperty('width', '100px')
box.style.setProperty('height', '100px')
document.body.appendChild(box)

// Setup the animation loop.
function animate(time) {
	requestAnimationFrame(animate)
	TWEEN.update(time)
}
requestAnimationFrame(animate)

const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
	.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
	.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
	.onUpdate(() => {
		// Called after tween.js updates 'coords'.
		// Move 'box' to the position described by 'coords' with a CSS translation.
		box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`)
	})
	.start() // Start the tween immediately.

安装

目前需要 npm 来构建项目。

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

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

• UMD : tween.umd.js
• AMD : tween.amd.js
• CommonJS : tween.cjs.js
• ES6 Module : tween.es.js

您现在可以将 tween.umd.js 复制到您的项目中，然后将其包含在脚本标记中。这会将 TWEEN 添加到全局范围。

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

require('@tweenjs/tween.js')

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

npm i @tweenjs/tween.js@^18

如果您使用的是 Node、Webpack 或 Browserify，那么您现在可以使用以下内容来包含 tween.js：

const TWEEN = require('@tweenjs/tween.js')

特征

• 只做一件事：补间属性
• 不处理 CSS 单元（例如 append px）
• 不插入颜色
• 缓动函数可在 Tween 之外重用
• 也可以使用自定义缓动函数

文档

• User guide 中文版
• Contributor guide
• Tutorial using tween.js with three.js
• Also: libtween, a port of tween.js to C by jsm174
• Also: es6-tween, a port of tween.js to ES6/Harmony by dalisoft
• Understanding tween.js

示例

	Custom functions (source)		Stop all chained tweens (source)
	Yoyo (source)		Relative values (source)
	Repeat (source)		Dynamic to (source)
	Array interpolation (source)		Video and time (source)
	Simplest possible example (source)		Graphs (source)
	Black and red (source)		Bars (source)
	hello world (source)

Projects using tween.js

项目地址：https://github.com/tweenjs/tween.js