Tween.js中⽂说明⽂档
简要教程
tween.js是⼀款可⽣成平滑动画效果的js动画库。相关的动画库插件还有：和。
tween.js允许你以平滑的⽅式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产⽣平滑的动画效果。例如，假设你有⼀个对象position，它的坐标为 x 和 y：
var
position = { x: 100, y: 0 }
如果你想改变 x 的值从100到200，你只需要这样做：
// 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
<({ x: 200 }, 1000);
到这⾥只是创建了tween对象，你需要激活它，让它开始动画：
// And set it to start
tween.start();
最后为了平滑动画效果，你需要在同⼀个循环动画中调⽤TWEEN.update⽅法。代码如下：
function
animate() {
requestAnimationFrame(animate);
// [...]
javascript说明TWEEN.update();
// [...]
}
这个动作将会更新所有被激活的tweens，在1秒钟（例如1000ms）position.x 将变为200。
你也可以使⽤onUpdate回调函数将结果打印到控制台上。
function
() {
console.log(
this
.x);
});
这个函数在每次tweens被更新时都被调⽤。它的出现频次依赖于很多因素-例如：依赖于你的电脑或设备的运⾏速度。tween.js动画
Tween.js本⾝不会运⾏，你需要通过update⽅法明确的告诉它什么时候开始运⾏。推荐在动画主循环中使⽤该⽅法。你可以通过调⽤requestAnimationFrame⽅法来获得良好的图像性能。
来看下⾯的例⼦：
function
animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}
这⾥使⽤⽆参数调⽤⽅式，update⽅法将明确当前时间，以便于获取上⼀次动画的执⾏时间。
你也可以为update⽅法明确⼀个时间：
TWEEN.update(100);
上⾯语句的意思是说：update的时间=100毫秒。你可以使⽤这种⽅法来明确代码中所有随时间变化的函数。例如，动画已经开始，你想所有动画都同步进⾏，你的animate代码⼀改像这样：
var
currentTime = player.currentTime;
TWEEN.update(currentTime);
控制tween动画
s t a r t和s t o p
Tween.start和Tween.stop分别⽤于控制tween动画的开始和结束。
对于已经结束和没有开始的动画，Tween.stop⽅法不起作⽤。Tween.start⽅法同样接收⼀个时间参数。如果你使⽤了该参数，tween动画将在延时该时间数后才开始动画。否则它将⽴刻开始动画。
u p d a t e
可以通过TWEEN.update⽅法来执⾏动画的更新。
c h a i n
如果你想制作多个多⾏，例如：⼀个动画在另⼀个动画结束后开始。可以通过chain⽅法来使实现。如下的代码，tweenB 在 tweenA 之后开始动画:
tweenA.chain(tweenB);
可以像下⾯这样制作⼀个⽆限循环的动画：
tweenA.chain(tweenB);
tweenB.chain(tweenA);
r e p e a t
如果你想制作循环动画可以使⽤chain来实现，但是更好的⽅法是使⽤repeat⽅法。它接收⼀个⽤于描述你想循环多少次的参数：
// repeats 10 times and stops
// repeats forever
y o y o
这个函数只在你使⽤repeat⽅法是起作⽤。当它被激活时，tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反⽅向反弹。
d e l a y
delay⽅法⽤于控制动画之间的延时。
tween.delay(1000);
tween.start();
全局⽅法
以下的⽅法定义在 TWEEN 的全局对象中，其中⼤多数⽅法你都⽤不上，除了update⽅法：
T W E E N.u p d a t e(t i m e)
该⽅法⽤于所有被激活的tweens，如果time没有被指定，将使⽤当前时间。
T W E E N.g e t A l l和T W E E N.r e m o v e A l l
这两个⽅法⽤于胡获取被激活的tweens数组的⼀个引⽤，或从数组中删除所有tweens。
T W E E N.a d d(t w e e n)和T W E E N.r e m o v e(t w e e n)
⽤于向被激活的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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。