animate用法 js原生_animate动画方法封装：原生JS实现

1 /**2 * Created by guoyongfeng on 2014/7/7.3 * @Author guoyongfeng4 * @Date 2014-07-075 * @Version 1.0.06 * @update 2014-07-077 * @described tween动画库函数封装8 *9 */

10 define('animate/0.0.1', function(){11 /**12 *13 */

14 return function(ele, json, duration, effect, fnCallBack){15 //对传参effect进行判断，并将获得的方法统一赋值给action方法

16 //对传参的判断可以实现js的重载功能。

17 var action=null;18 if(typeof effect =="number"){19 //1 buffer,2 flex,3 bounce 4 linear

20 switch(effect){21 case 1:22 action=moveEffect.Exponential.easeOut;23 break;24 case 2:25 action=moveEffect.Elastic.easeOut;26 break;27 case 3:28 action=moveEffect.Bounce.easeOut;29 break;30 case 4:31 action=moveEffect.Linear;32 break;33 default:34 break;35 }36 }else if(typeof effect == 'string'){37 switch(effect){38 case 'Exponential':39 action=moveEffect.Exponential.easeOut;40 break;41 case 'Elastic':42 action=moveEffect.Elastic.easeOut;43 break;44 case 'Bounce':45 action=moveEffect.Bounce.easeOut;46 break;47 case 'Linear':48 action=moveEffect.Linear;49 break;50 default:51 break;52 }53

54 }else if(typeof effect == "function"){55 //参数effect是个函数，则默认为这是回调函数，并采用默认的运动效果

56 fnCallback=effect;57 }else if(effect instanceofArray){58 //输入格式：['Expo','easeOut']

59 if(effect.length===2){60 action=moveEffect[effect[0]][effect[1]];61 }else if(effect.length==1){62 action=moveEffect.Linear;63 }64 }else{65 action=moveEffect.Exponential.easeOut;66 }67

68 //获取初试值

69 var oBegin={};70 var oChange={};71 for(var attr injson){72 var begin=0, change=0, count=0;73 if(attr == 'opacity'){74 begin=Math.random((parseFloat(getStyle(ele, attr)))*100);75 change=json[attr]-begin;76 if(begin == 'undefined'){77 ele.style[attr]='alpha(opacity:100)';78 ele.style.opacity=1;79 }80 }else{81 begin=parseInt(getStyle(ele, attr));82 change=json[attr]-begin;83 }84 //保存

85 if(change){86 count++;87 oBegin[attr]=begin;88 oChange[attr]=change;89 }90 }91 //判断所有变量是否到齐

92 if(count == 0){93 if(typeof fnCallBack == 'function'){94 fnCallBack.call(ele);95 }else{96 return;97 }98 }99

100 //封装运动函数

101 var times=0;102 var interval=30;103 move();104

105 functionmove(){106 clearInterval(ele.timer);107 times+=interval;108

109 if(times<=duration){110 for(var attr injson){111 //var val=times*oChange[attr]/duration+oBegin[attr];

112 var val=action(times, oBegin[attr], oChange[attr], duration);113 if(attr == 'opacity'){114 ele.style[attr]=val/100;

115 ele.style.filter="alpha(opacity="+val+")";116 }else{117 ele.style[attr]=val+'px';118 }119 }120 ele.timer=window.setInterval(move, interval);121 }else{122 if(attr == 'opacity'){123 ele.style[attr]=json[attr]/100;

124 ele.style.filter="alpha(opacity="+json[attr]+")";125 }else{126 ele.style[attr]=json[attr]+'px';127 }128 //回调函数

129 if(typeof fnCallBack == 'function'){130 fnCallBack.call(ele);131 }132

133 ele.timer=null;134 }135 }136

137 //获取css样式的兼容性写法

138 functiongetStyle(obj, attr){139 if(obj.currentStyle){140 returnobj.currentStyle[attr];141 }else{142 return getComputedStyle(obj, null)[attr];143 }144 }145

146 }147

148 //思路：当前时间*变化量/持续时间+初始值

149 var moveEffect ={150 //1.线性运动

151 Linear: function(t,b,c,d){152 return c*t/d + b;

153 },154 //2.二次方的缓动(t^2)；

155 Quadratic: {156 easeIn: function(t,b,c,d){157 return c*(t/=d)*t + b;

158 },159 easeOut: function(t,b,c,d){160 return -c *(t/=d)*(t-2) + b;

161 },162 easeInOut: function(t,b,c,d){163 if ((t/=d/2) < 1) return c/2*t*t + b;

164 return -c/2 * ((--t)*(t-2) - 1) + b;

165 }166 },167 //3.三次方的缓动(t^3)

168 Cubic: {169 easeIn: function(t,b,c,d){170 return c*(t/=d)*t*t + b;

171 },172 easeOut: function(t,b,c,d){173 return c*((t=t/d-1)*t*t + 1) + b;

174 },175 easeInOut: function(t,b,c,d){176 if ((t/=d/2) < 1) return c/2*t*t*t + b;

177 return c/2*((t-=2)*t*t + 2) + b;

178 }179 },180 //4.四次方的缓动(t^4)；

181 Quartic: {182 easeIn: function(t,b,c,d){183 return c*(t/=d)*t*t*t + b;

184 },185 easeOut: function(t,b,c,d){186 return -c * ((t=t/d-1)*t*t*t - 1) + b;

187 },188 easeInOut: function(t,b,c,d){189 if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

190 return -c/2 * ((t-=2)*t*t*t - 2) + b;

191 }192 },193 //5.五次方的缓动(t^5)；

194 Quintic: {195 easeIn: function(t,b,c,d){196 return c*(t/=d)*t*t*t*t + b;

197 },198 easeOut: function(t,b,c,d){199 return c*((t=t/d-1)*t*t*t*t + 1) + b;

200 },201 easeInOut: function(t,b,c,d){202 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

203 return c/2*((t-=2)*t*t*t*t + 2) + b;

204 }205 },206 //6.正弦曲线的缓动sin(t)

207 Sinusoidal: {208 easeIn: function(t,b,c,d){209 return -c * Math.cos(t/d * (Math.PI/2)) + c +b;210 },211 easeOut: function(t,b,c,d){212 return c * Math.sin(t/d * (Math.PI/2)) +b;213 },214 easeInOut: function(t,b,c,d){215 return -c/2 * (Math.cos(Math.PI*t/d) - 1) +b;216 }217 },218 //7.指数曲线的缓动(2^t)；

219 Exponential: {220 easeIn: function(t,b,c,d){221 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

222 },223 easeOut: function(t,b,c,d){224 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

225 },226 easeInOut: function(t,b,c,d){227 if (t==0) returnb;228 if (t==d) return b+c;229 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

230 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

231 }232 },233 //8.圆形曲线的缓动(sqrt(1-t^2))；

234 Circular: {235 easeIn: function(t,b,c,d){236 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

237 },238 easeOut: function(t,b,c,d){239 return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

240 },241 easeInOut: function(t,b,c,d){242 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

243 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

244 }245 },246 //9.指数衰减的正弦曲线缓动；

247 Elastic: {248 easeIn: function(t,b,c,d,a,p){249 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

250 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }

251 else var s = p/(2*Math.PI) * Math.asin (c/a);252 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

253 },254 easeOut: function(t,b,c,d,a,p){255 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

256 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }

257 else var s = p/(2*Math.PI) * Math.asin (c/a);258 return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);

259 },260 easeInOut: function(t,b,c,d,a,p){261 if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);262 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }

263 else var s = p/(2*Math.PI) * Math.asin (c/a);264 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

265 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

266 }267 },268 //10.超过范围的三次方缓动((s+1)*t^3 - s*t^2)；

269 Back: {270 easeIn: function(t,b,c,d,s){271 if (s == undefined) s = 1.70158;272 return c*(t/=d)*t*((s+1)*t - s) + b;

273 },274 easeOut: function(t,b,c,d,s){275 if (s == undefined) s = 1.70158;276 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

277 },278 easeInOut: function(t,b,c,d,s){279 if (s == undefined) s = 1.70158;280 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

281 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

282 }283 },284 //11.指数衰减的反弹缓动。

285 Bounce: {286 easeIn: function(t,b,c,d){287 return c - moveEffect.Bounce.easeOut(d-t, 0, c, d) +b;288 },289 easeOut: function(t,b,c,d){290 if ((t/=d) < (1/2.75)) {291 return c*(7.5625*t*t) +b;292 } else if (t < (2/2.75)) {

293 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

294 } else if (t < (2.5/2.75)) {

295 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

296 } else{297 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

298 }299 },300 easeInOut: function(t,b,c,d){301 if (t < d/2) return moveEffect.Bounce.easeIn(t*2, 0, c, d) * .5 + b;

302 else return moveEffect.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 +b;303 }304 }305 };306 });