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