简介

tweenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值。 

tweenjs 以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间（duration），之后 tween 引擎就可以计算从开始动画点到结束动画点之间值，从而产生平滑的动画效果。 

使用

将附件中下载的 tween.js 文件引入到需要使用动画的页面即可。

示例

示例说明：

1. 设置对象的初始位置：

var coords = { x: 0, y: 0 };

2. 设置对象的新位置，持续时间为 1s：

var tween = new TWEEN.Tween(coords)
.to({ x: 300, y: 200 }, 1000)

3. 启动动画：

 tween.start();

4.  为了平滑的动画效果，需要在同一个循环动画中调用 TWEEN.update 方法:

animate();
function animate(){
requestAnimationFrame(animate);
TWEEN.update();
}

tweenjs 动画说明

Tween.js 本身不会运行，你需要通过 update 方法明确告诉它什么时候开始运行，推荐在动画主循环中使用该动画，可以调用 requestAnimationFrame 方法来获得良好的图像性能使用无参数的调用方法，update 将明确当前时间。也可以为 update 方法法明确一个时间。

TWEEN.update(100);

update 的时间为 100毫秒 ，可以使用这种方法来明确代码中所有随时间变化的函数。 

动画控制

1.    start 和 stop ==> Tween.start 和 Tween.stop 分别用来控制 tween 动画的开始和结束。对于已经结束和没有开始的动画，Tween.stop 方法不起作用。 Tween.start 可以方法接收一个时间参数，若使用了该参数，tween 动画将在延迟该时间数后才开始动画，否则他将立刻开始动画。

2.  update ==> 通过 TWEEN.update 方法执行动画的更新。

3.  chain ==> 制作多个多行，例如一个动画在另一个动画结束后开始，可以通过 chain 来实现：

tweenA.chain(tweenB); //tweenB 在 tweenA 之后开始动画，故可以制作一个无线循环的动画

tweenB.chain(tweenA);

4.  repeat ==> 制作循环动画，优于 chain，接收一个用于描述循环次数的参数：

tween.repeat(10);

tween.repeat(infinity);

5.  delay ==> 用于控制动画之间的延迟：

tween.delay(1000);

tween.start()