tween.js 是用于简单动画的 JavaScript 补间引擎，结合了优化的 Robert Penner 方程。
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 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)
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>- 只做一件事且仅只做一件事: 补间特性
- 不关注 CSS 单位 (e.g. appending
px) - 不插入颜色
- 缓和功能可以在 Tween 之外重用
- 也可以使用自定义缓动功能
- 使用指南
- 贡献者指南
- 教程 using tween.js with three.js
- 其他: libtween, jsm174 写的一个 C 语言版本的 tween.js.
- 其他: es6-tween, dalisoft 写的一个 ES6/Harmony 版本的 tween.js.
- 理解 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) |
你首先需要安装npm--基于 node.js,所以首先安装它.然后,进入到tween.js的目录下并运行:
npm install如果是第一次运行测试,则为运行测试安装额外的依赖,然后运行
npm test每次你想运行测试.
如果你想添加任何功能或改变现有的功能，你必须运行测试，以确保你没有影响别的东西.如果你发一个 pull request（PR）添加新的东西,它没有测试,或测试不通过,这个 PR 将不被接受.更详细的请看 contributing.
