Skip to content

Latest commit

 

History

History
297 lines (251 loc) · 9.55 KB

README_zh-CN.md

File metadata and controls

297 lines (251 loc) · 9.55 KB

tween.js

tween.js 是用于简单动画的 JavaScript 补间引擎,结合了优化的 Robert Penner 方程。

NPM Version NPM Downloads Travis tests Flattr this CDNJS

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

// 设置循环动画
function animate(time) {
	requestAnimationFrame(animate)
	TWEEN.update(time)
}
requestAnimationFrame(animate)

var coords = {x: 0, y: 0} // 起始点 (0, 0)
var tween = new TWEEN.Tween(coords) // 创建一个新的tween用来改变 'coords'
	.to({x: 300, y: 200}, 1000) // 在1s内移动至 (300, 200)
	.easing(TWEEN.Easing.Quadratic.Out) // 使用缓动功能使的动画更加平滑
	.onUpdate(function () {
		// 在 tween.js 更新 'coords' 后调用
		// 将 'box' 移动到 'coords' 所描述的位置,配合 CSS 过渡
		box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
	})
	.start() // 立即开始 tween

在线代码测试

安装

下载 library 并将它引入至你的代码中:

<script src="js/Tween.js"></script>

您也可以在代码中引用 CDN 托管的版本,这要感谢 cdnjs 。例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>

See tween.js for more versions.

查看更多 tween.js 版本.

更多高级用户想要的...

使用 npm

npm install @tweenjs/tween.js

然后用标准的 node.js require 包含 Tween.js 模块:

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

您可以像所有其他示例一样使用 Tween.js,例如:

var t = new TWEEN.Tween(/* etc */)
t.start()

你将需要使用诸如browserify之类的工具将使用此风格的代码转换为可以在浏览器中运行的代码(浏览器无法识别 require)

Use bower

bower install @tweenjs/tweenjs --save

或者安装特定的 tag.他们是 git tags,如果你已经在本地克隆仓库,你可以在命令行中运行git tag查看 tag 列表,或者你可以查看下 tween.js tags page 列表.例如,安装 v16.3.0:

bower install @tweenjs/tweenjs#v16.3.0

然后引入库源码:

<script src="bower_components/@tweenjs/tweenjs/src/Tween.js"></script>

Features

  • 只做一件事且仅只做一件事: 补间特性
  • 不关注 CSS 单位 (e.g. appending px)
  • 不插入颜色
  • 缓和功能可以在 Tween 之外重用
  • 也可以使用自定义缓动功能

Documentation

示例

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)

Tests

你首先需要安装npm--基于 node.js,所以首先安装它.然后,进入到tween.js的目录下并运行:

npm install

如果是第一次运行测试,则为运行测试安装额外的依赖,然后运行

npm test

每次你想运行测试.

如果你想添加任何功能或改变现有的功能,你必须运行测试,以确保你没有影响别的东西.如果你发一个 pull request(PR)添加新的东西,它没有测试,或测试不通过,这个 PR 将不被接受.更详细的请看 contributing.

People

维护者: mikebolt, sole.

所有贡献者.

使用 tween.js 的项目

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