tweenjs缓动算法的使用实例分析
本文实例讲述了tweenjs缓动算法的使用。分享给大家供大家参考，具体如下：
这里的tweenjs不是依托于createjs的tewwnjs，而是一系列缓动算法集合。因为本身是算法，可以用在各个业务场景中，这也正是总结学习它的价值所在。tweenjs代码详情：
/*
*Tween.js
*t:currenttime（当前时间）；
*b:beginningvalue（初始值）；
*c:changeinvalue（变化量）；
*d:duration（持续时间）。
*youcanvisit'http://easings.net/zh-cn'togeteffect
*/
varTween={
Linear:function(t,b,c,d){
returnc*t/d+b;
},
Quad:{
easeIn:function(t,b,c,d){
returnc*(t/=d)*t+b;
},
easeOut:function(t,b,c,d){
return-c*(t/=d)*(t-2)+b;
},
easeInOut:function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t+b;
return-c/2*((--t)*(t-2)-1)+b;
}
},
Cubic:{
easeIn:function(t,b,c,d){
returnc*(t/=d)*t*t+b;
},
easeOut:function(t,b,c,d){
returnc*((t=t/d-1)*t*t+1)+b;
},
easeInOut:function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t*t+b;
returnc/2*((t-=2)*t*t+2)+b;
}
},
Quart:{
easeIn:function(t,b,c,d){
returnc*(t/=d)*t*t*t+b;
},
easeOut:function(t,b,c,d){
return-c*((t=t/d-1)*t*t*t-1)+b;
},
easeInOut:function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t*t*t+b;
return-c/2*((t-=2)*t*t*t-2)+b;
}
},
Quint:{
easeIn:function(t,b,c,d){
returnc*(t/=d)*t*t*t*t+b;
},
easeOut:function(t,b,c,d){
returnc*((t=t/d-1)*t*t*t*t+1)+b;
},
easeInOut:function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t*t*t*t+b;
returnc/2*((t-=2)*t*t*t*t+2)+b;
}
},
Sine:{
easeIn:function(t,b,c,d){
return-c*Math.cos(t/d*(Math.PI/2))+c+b;
},
easeOut:function(t,b,c,d){
returnc*Math.sin(t/d*(Math.PI/2))+b;
},
easeInOut:function(t,b,c,d){
return-c/2*(Math.cos(Math.PI*t/d)-1)+b;
}
},
Expo:{
easeIn:function(t,b,c,d){
return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;
},
easeOut:function(t,b,c,d){
return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;
},
easeInOut:function(t,b,c,d){
if(t==0)returnb;
if(t==d)returnb+c;
if((t/=d/2)<1)returnc/2*Math.pow(2,10*(t-1))+b;
returnc/2*(-Math.pow(2,-10*--t)+2)+b;
}
},
Circ:{
easeIn:function(t,b,c,d){
return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;
},
easeOut:function(t,b,c,d){
returnc*Math.sqrt(1-(t=t/d-1)*t)+b;
},
easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;
returnc/2*(Math.sqrt(1-(t-=2)*t)+1)+b;
}
},
Elastic:{
easeIn:function(t,b,c,d,a,p){
vars;
if(t==0)returnb;
if((t/=d)==1)returnb+c;
if(typeofp=="undefined")p=d*.3;
if(!a||a
具体每种算法的操作实例，可以看大神张鑫旭的博客实例：http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html
当然，以上这些算法仅仅是一个状态，需要配合时间上的变化，才能实现缓动，这里使用的是requestAnimationFrame，具体代码好吧，也是拿来主义
(function(){
varlastTime=0;
varvendors=['ms','moz','webkit','o'];
for(varx=0;x
最后是简单的实例应用，很简单，
使用tweenjs
div{
width:100px;
height:100px;
border:1pxsolidred;
text-align:center;
line-height:100px;
position:absolute;
}
这是测试