tween.js

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`

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

使用指南
贡献者指南
教程 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)