attr === “opacity”)curVal = Tween [tween](t,beginAttr,count,time); //调用Tween,返回当前属性值,此时计算方法为移动到
写入位置else curVal = Tween [tween](t,beginAttr [i],count + beginAttr,time); //调用Tween,返回当前属性值,此时计算方法为移动了
写入距离if(attr === “opacity”)target.style [attr] = curVal;
否则 target.style [attr] = curVal + “px” ;
if(t <time)requestAnimationFrame(animate);
else callback && callback();
}
requestAnimationFrame(动画);
返回参数; //返回对象,供打断或其他用途
}
//Tween.js
/ *
* t:时间已过时间
* b:开始起始值
* c:计算总的运动值
* d:持续时间持续时间
*
*曲线方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* * /
让 Tween = {
linear:function(t,b,c,d) { //匀速
返回 c * t / d + b;
},
easeIn:function(t,b,c,d) { //加速曲线
return c *(t / = d)* t + b;
},
easeOut:function(t,b,c,d) { //减速曲线
return -c *(t / = d)*(t - 2)+ b;
},
easeBoth:function(t,b,c,d) { //加速减速曲线
if((t / = d / 2)< 1){
return c / 2 * t * t + b;
}
return -c / 2 *(( - t)*(t - 2) - 1)+ b;
},
easeInStrong:function(t,b,c,d) { //加加速曲线
return c *(t / = d)* t * t * t + b;
},
easeOutStrong:function(t,b,c,d) { //减减曲线
返回 -c *((t = t / d - 1)* t * t * t - 1)+ b;
},
easeBothStrong:function(t,b,c,d) { //加速减减速线
如果((t / = d / 2)< 1){
return c / 2 * t * t * t * t + b;
}
return -c / 2 *((t - = 2)* t * t * t - 2)+ b;
},
elasticIn:function(t,b,c,d,a,p) { //正弦衰减曲线(弹动渐入)
if(t === 0){
return b;
}
if((t / = d)== 1){
return b + c;
}
if(!p){
p = d * 0.3 ;
}
if(!a
关键词:CSS+JS如何完成浪漫流星雨动画效果?(代码示例)