tween.js 简单轻量级 JavaScript 补间动画引擎 - 文章教程

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

发布于 2021-09-28 字数 10497 浏览 1109 评论 0

用于简单动画的 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 之外重用
  • 也可以使用自定义缓动函数

文档

示例


Custom functions
Custom functions
(source)

Stop all chained tweens
Stop all chained tweens
(source)

Yoyo
Yoyo
(source)

Relative values
Relative values
(source)

Repeat
Repeat
(source)

Dynamic to
Dynamic to
(source)

Array interpolation
Array interpolation
(source)

Video and time
Video and time
(source)

Simplest possible example
Simplest possible example
(source)

Graphs
Graphs
(source)

Black and red
Black and red
(source)

Bars
Bars
(source)

hello world
hello world
(source)

Projects using tween.js

A-Frame VR MOMA Inventing Abstraction 1910-1925 Web Lab MACCHINA I Minesweeper 3D ROME WebGL Globe Androidify The Wilderness Downtown Linechart

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82725 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0