无限循环轮播图之运动框架（原生JS）

Posted 2020-08-25 NT.Wang

封装运动框架

 1 function getStyle(obj,name){
 2     if(obj.currentStyle){
 3         return obj.currentStyle[name];
 4     }else{
 5         return getComputedStyle(obj,false)[name];
 6     }
 7 }
 8 function move(obj,json,options){
 9     var options=options || {};
10     var duration=options.duration || 800;
11     var easing=options.easing || ‘linear‘;
12     var n=0;
13     var start={};
14     var dis={};
15     var count=Math.ceil(duration/30);
16     //{top:0,left:0}
17     for(name in json){
18         start[name]=parseFloat(getStyle(obj,name));
19         dis[name]=json[name]-start[name];
20     }
21 
22     clearInterval(obj.timer);
23     obj.timer=setInterval(function(){
24         n++;
25         for(name in json){
26             switch (easing){
27                 case ‘linear‘:
28                     var a=n/count;
29                     var cur=start[name]+dis[name]*a;
30                     break;
31                 case ‘ease-out‘:
32                     var a=1-n/count;
33                     var cur=start[name]+dis[name]*(1-a*a*a);
34                     break;
35                 case ‘ease-in‘:
36                     var a=n/count;
37                     var cur=start[name]+dis[name]*a*a*a;
38                     break;
39             }
40             if(name==‘opacity‘){
41                 obj.style[name]=cur;
42             }else{
43                 obj.style[name]=cur+‘px‘;
44             }
45         }
46         if(n==count){
47             clearInterval(obj.timer);
48             options.complete && options.complete();
49         }
50     },30);
51 }