tween.js是一款可生成平滑动画效果的js动画库。tween.js容许你以平滑的方式修改元素的属性值。它能够经过设置生成各类相似CSS3的动画效果。

tween.js是一款可生成平滑动画效果的js动画库。相关的动画库插件还有：snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件。html

tween.js容许你以平滑的方式修改元素的属性值。你只须要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就能够计算从开始动画点到结束动画点之间值，来产平生滑的动画效果。例如，假设你有一个对象position，它的坐标为 x 和 y：git

var position = { x: 100, y: 0 }

若是你想改变 x 的值从100到200，你只须要这样作：github

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

到这里只是建立了tween对象，你须要激活它，让它开始动画：数组

// And set it to start
tween.start();

最后为了平滑动画效果，你须要在同一个循环动画中调用TWEEN.update方法。代码以下：ide

animate();
 
function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

这个动做将会更新全部被激活的tweens，在1秒钟（例如1000ms）position.x 将变为200。函数

你也可使用onUpdate回调函数将结果打印到控制台上。post

tween.onUpdate(function() {
    console.log(this.x);
});

这个函数在每次tweens被更新时都被调用。它的出现频次依赖于不少因素-例如：依赖于你的电脑或设备的运行速度。性能

tween.js动画

Tween.js自己不会运行，你须要经过update方法明确的告诉它何时开始运行。推荐在动画主循环中使用该方法。你能够经过调用requestAnimationFrame方法来得到良好的图像性能。动画

来看下面的例子：ui

animate();
 
function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

这里使用无参数调用方式，update方法将明确当前时间，以便于获取上一次动画的执行时间。

你也能够为update方法明确一个时间：

TWEEN.update(100);

上面语句的意思是说：update的时间=100毫秒。你可使用这种方法来明确代码中全部随时间变化的函数。例如，动画已经开始，你想全部动画都同步进行，你的animate代码一改像这样：

var currentTime = player.currentTime;
TWEEN.update(currentTime);

控制tween动画

start和stop

Tween.start和Tween.stop分别用于控制tween动画的开始和结束。

对于已经结束和没有开始的动画，Tween.stop方法不起做用。Tween.start方法一样接收一个时间参数。若是你使用了该参数，tween动画将在延时该时间数后才开始动画。不然它将马上开始动画。

update

能够经过TWEEN.update方法来执行动画的更新。

chain

若是你想制做多个多行，例如：一个动画在另外一个动画结束后开始。能够经过chain方法来使实现。以下的代码，tweenB 在 tweenA 以后开始动画:

tweenA.chain(tweenB);

能够像下面这样制做一个无限循环的动画：

tweenA.chain(tweenB);
tweenB.chain(tweenA);

repeat

若是你想制做循环动画可使用chain来实现，可是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次的参数：

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

yoyo

这个函数只在你使用repeat方法是起做用。当它被激活时，tween 的效果相似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。

delay

delay方法用于控制动画之间的延时。

tween.delay(1000);
tween.start();

全局方法

如下的方法定义在 TWEEN 的全局对象中，其中大多数方法你都用不上，除了update方法：

TWEEN.update(time)

该方法用于全部被激活的tweens，若是time没有被指定，将使用当前时间。

TWEEN.getAll 和 TWEEN.removeAll

这两个方法用于胡获取被激活的tweens数组的一个引用，或从数组中删除全部tweens。

TWEEN.add(tween) 和 TWEEN.remove(tween)

用于向被激活的tweens中添加一个tween，或移除一个tween。

以上方法一般只是在内部使用，通常状况下你了解便可。

可用的easing函数：TWEEN.Easing

tween.js提供了一些可用的easing函数。可用函数有：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 类型分为: In, Out 和 InOut.

使用自定义的Easing函数

你不但可使用tween.js提供的easing函数，还能够自定义easing函数。但必须遵照下面的规则：

它必须接收一个参数。
它必须基于输入参数返回一个值。

easing函数仅在每一个tween每次被更新时调用，而无论有多少属性被改变。结果随后会被用于初始值：

easedElapsed = easing(k);
for each property:
    newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来作easing效果的例子：

function tenStepEasing(k) {
    return Math.floor(k * 10) / 10;
}

你能够在tween 这样使用它：

tween.easing(tenStepEasing);

回调函数

另一个有用的特性是你能够在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设你想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能经过setter方法，你能够经过update方法的回调函数来设置新的setter值。

var trickyObjTween = new TWEEN.Tween({
    propertyA: trickyObj.getPropertyA(),
    propertyB: trickyObj.getPropertyB()
})
    .to({ propertyA: 100, propertyB: 200 })
    .onUpdate(function() {
        this.setA( this.propertyA );
        this.setB( this.propertyB );
    });

或者若是你想确认tween动画开始后某个对象指定状态下的某个值，你能够经过start回调来获取它：

var tween = new TWEEN.Tween(obj)
    .to({ x: 100 })
    .onStart(function() {
        this.x = 0;
    });

onStart

tween开始动画前的回调函数。

onStop

tween结束动画后的回调函数。

onUpdate

在tween每次被更新后执行。

onComplete

在tween动画所有结束后执行。

更多关于tween的资料请参考：https://github.com/sole/tween.js/blob/master/docs/user_guide.md

tween的相关资料：Tween.js for Smooth Animation