详解tween.js的使用教程
前面的话
TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。本文将详细介绍tween.js的使用
概述
tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果
例如，假设有一个对象position，它的坐标为x和y：
varposition={x:100,y:0}
如果想改变x的值从100到200，只需要这样做：
//Createatweenforpositionfirst
vartween=newTWEEN.Tween(position);
//Thentellthetweenwewanttoanimatethexpropertyover1000milliseconds
tween.to({x:200},1000);
到这里只是创建了tween对象，需要激活它，让它开始动画：
//Andsetittostart tween.start();
最后为了平滑动画效果，需要在同一个循环动画中调用TWEEN.update方法。代码如下：
animate();
functionanimate(){
requestAnimationFrame(animate);
//[...]
TWEEN.update();
//[...]
}
这个动作将会更新所有被激活的tweens，在1秒钟（例如1000ms）position.x将变为200。
也可以使用onUpdate回调函数将结果打印到控制台上
tween.onUpdate(function(){
console.log(this.x);
});
这个函数在每次tweens被更新时都被调用。它的出现频次依赖于很多因素。例如：依赖于你的电脑或设备的运行速度
开始动画
Tween.js本身不会运行，需要通过update方法明确的告诉它什么时候开始运行。推荐在动画主循环中使用该方法。可以通过调用requestAnimationFrame方法来获得良好的图像性能
animate();
functionanimate(){
requestAnimationFrame(animate);
//[...]
TWEEN.update();
//[...]
}
这里使用无参数调用方式，update方法将明确当前时间，以便于获取上一次动画的执行时间。
也可以为update方法明确一个时间：
TWEEN.update(100);
上面语句的意思是说：update的时间=100毫秒。可以使用这种方法来明确代码中所有随时间变化的函数。例如，动画已经开始，想所有动画都同步进行，animate代码改成这样：
varcurrentTime=player.currentTime; TWEEN.update(currentTime);
控制动画
【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);//repeats10timesandstops tween.repeat(Infinity);//repeatsforever
【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.js提供了一些可用的easing函数。可用函数有：Linear,Quadratic,Cubic,Quartic,Quintic,Sinusoidal,Exponential,Circular,Elastic,Back和Bounce。easing类型分为:In,Out和InOut
不但可以使用tween.js提供的easing函数，还可以自定义easing函数。但必须遵守下面的规则
1、它必须接收一个参数
2、它必须基于输入参数返回一个值
easing函数仅在每个tween每次被更新时调用，而不管有多少属性被改变。结果随后会被用于初始值
easedElapsed=easing(k); foreachproperty: newPropertyValue=initialPropertyValue+propertyDelta*easedElapsed;
下面是一个使用Math.floor来做easing效果的例子：
functiontenStepEasing(k){
returnMath.floor(k*10)/10;
}
可以在tween这样使用它
tween.easing(tenStepEasing);
回调函数
另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。
例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值
vartrickyObjTween=newTWEEN.Tween({
propertyA:trickyObj.getPropertyA(),
propertyB:trickyObj.getPropertyB()
})
.to({propertyA:100,propertyB:200})
.onUpdate(function(){
this.setA(this.propertyA);
this.setB(this.propertyB);
});
或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：
vartween=newTWEEN.Tween(obj)
.to({x:100})
.onStart(function(){
this.x=0;
});
【onStart】
tween开始动画前的回调函数。
【onStop】
tween结束动画后的回调函数。
【onUpdate】
在tween每次被更新后执行。
【onComplete】
在tween动画全部结束后执行。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。