一个原生JavaScript动画库原型

设计目标:简单易用,不依赖其他库,对旧版浏览器具有一定兼容性,功能可扩展。

动画调用:

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>为若干个标签添加若干个动画,动画要有变化属性(默认为样式属性)、动画名、属性值类型、是否循环、多关键帧、ease函数(默认为线性)、有添加方法、删除方法</title>
 6     <style>
 7         .div_ani {background: red;width: 100px;height:100px;position:relative}
 8     </style>
 9     <script src="Ani.js"></script>
10 </head>
11 <body>
12     <div class="div_ani">111</div>
13     <div class="div_ani">222</div>
14 </body>
15 <!--script type="module"-->
16 <script>
17     //import Ani from './ani.js'
18     let objs1=document.querySelector(".div_ani");
19     let objs2=document.querySelectorAll(".div_ani");
20     Ani.addAni(objs2,[
21     {
22       arr_pname:"width",loop:true,endcallback:function(){console.log("动画结束")}//动画属性
23       ,arr_key:[//关键帧数组
24         {ms:0,value:100,callback:function(ani){console.log(ani.elem.innerHTML+"第0ms")}},
25         {ms:1000,value:300,callback:function(){console.log("第1000ms")}},
26         {ms:2000,value:100,callback:function(){console.log("第2000ms")}},
27       ]
28     }
29   ]//addAni的第一个参数可以是dom对象或dom对象数组,第二个参数是动画对象数组
30     )
31   //可以多次执行addAni添加更多动画
32     Ani.startAni();//启动所有动画
33
34
35
36
37
38 </script>
39 </html>

代码实现:

1 //考虑到更好的兼容性
  2 // export default class Ani{
  3 //     constructor(elem,p){
  4 //         /*let p_default={
  5 //             type:"css_px",
  6 //             id:Ani.randomString(32),//没有必要生成两次
  7 //
  8 //         }*/
  9 //         this.type=p.type||"css_px";
 10 //         this.id=p.id||Ani.randomString(32);
 11 //         this.arr_key=[];
 12 //         let len=p.arr_key.length;//每个基础类型属性都要用直接量赋值
 13 //         for(let i=0;i<len;i++)
 14 //         {
 15 //             let key=p.arr_key[i]
 16 //             this.arr_key.push(
 17 //                 {
 18 //                     ms:key.ms,
 19 //                     value:JSON.parse(JSON.stringify(key.value)),
 20 //                     callback:key.callback,//回调函数可以共用一个
 21 //                 }
 22 //             )
 23 //         }
 24 //         //this.arr_key=p.arr_key;
 25 //         this.loop=p.loop;
 26 //         this.elem=elem;
 27 //         this.countms=0;
 28 //         this.arr_pname=p.arr_pname;
 29 //         this.func_ease=p.func_ease||Ani.obj_func_ease.float_line;
 30 //         //this.arr_framecallback=p.arr_framecallback||[];
 31 //         this.endcallback=p.endcallback;
 32 //         this.func_set=p.func_set||Ani.setValue;
 33 //     }
 34 // }
 35 function Ani(elem,p){
 36     this.type=p.type||"css_px";
 37     this.id=p.id||Ani.randomString(32);
 38     this.arr_key=[];
 39     var len=p.arr_key.length;//每个基础类型属性都要用直接量赋值
 40     for(var i=0;i<len;i++)
 41     {
 42         var key=p.arr_key[i]
 43         this.arr_key.push(
 44             {
 45                 ms:key.ms,
 46                 value:JSON.parse(JSON.stringify(key.value)),
 47                 callback:key.callback,//回调函数可以共用一个
 48             }
 49         )
 50     }
 51     //this.arr_key=p.arr_key;
 52     this.loop=p.loop;
 53     this.elem=elem;
 54     this.countms=0;
 55     this.arr_pname=p.arr_pname;
 56     this.func_ease=p.func_ease||Ani.obj_func_ease.float_line;
 57     //this.arr_framecallback=p.arr_framecallback||[];
 58     this.endcallback=p.endcallback;
 59     this.func_set=p.func_set||Ani.setValue;
 60 }
 61 Ani.obj_anis={};
 62 Ani.addAni=function(objs,p_anis)//添加动画
 63 {
 64     if(objs.outerHTML)//如果是一个html标签
 65     {
 66         objs=[objs];
 67     }
 68     var len1=objs.length;
 69     var len2=p_anis.length;
 70     for(var i=0;i<len1;i++)
 71     {
 72         var obj=objs[i];
 73         /*if(!obj.arr_ani)//如果以前没有动画数组,dom元素没有易于使用的唯一id,所以不应把动画配置保存再dom元素对象里
 74         //使用一个全局obj_anis保存所有动画对象
 75         {
 76             obj.arr_ani=[];
 77         }*/
 78         for(var j=0;j<len2;j++)
 79         {
 80             var p_ani=p_anis[j];
 81             var ani=new Ani(obj,p_ani);
 82             Ani.obj_anis[ani.id]=ani;
 83             //let len3=obj.arr_ani;
 84             /*let flag_canpush=true;
 85             for(let k=0;k<len3;k++)
 86             {
 87                 //if(obj.arr_ani[k]===ani)//如果已经添加过这个动画对象
 88                 if(obj.arr_ani[k].id==p_ani.id)
 89                 {
 90                     flag_canpush=false;
 91                 }
 92             }
 93             if(flag_canpush==true)
 94             {
 95                 obj.arr_ani.push(p_ani);
 96             }*/
 97         }
 98
 99     }
100 }
101 Ani.runningAni=false;
102
103 //这里的一个问题是dom元素可能没有唯一id,后面很难再找到它的对象-》使用一个公用对象?
104 Ani.startAni=function()
105 {
106     if(Ani.runningAni==false)
107     {
108         Ani.lastframe=new Date().getTime();
109         //Ani.currentframe=Ani.lastframe;
110         window.requestAnimFrame(function(){
111             Ani.Frame();
112         })
113     }
114     Ani.runningAni=true;
115 }
116 Ani.pauseAni=function()
117 {
118     Ani.runningAni=false;
119 }
120
121 Ani.Frame=function()
122 {
123     Ani.currentframe=new Date().getTime();
124     Ani.framems=Ani.currentframe-Ani.lastframe;
125
126     //key_called=null;
127     for(var key in Ani.obj_anis)
128     {
129         var ani=Ani.obj_anis[key];
130         ani.countms+=Ani.framems;
131         var len=ani.arr_key.length;
132         var value=null;
133         for(var i=0;i<len-1;i++)
134         {
135             var key1=ani.arr_key[i];
136             var key2=ani.arr_key[i+1];
137             if(ani.countms>=key1.ms&&ani.countms<=key2.ms)
138             {
139                 value=ani.func_ease(key1,key2,ani.countms);
140                 //Ani.setValue(ani.elem,value,ani.type,ani.arr_pname);
141                 ani.func_set(ani.elem,value,ani.type,ani.arr_pname);
142                 if(key1.callback&&!key1.called)//如果这个关键帧上有回调函数,并且这个帧没有被调用过
143                 {
144                     key1.callback(ani);
145                     key1.called=true;//多个动画时有多个key1,要分别标记
146                 }
147                 break;
148             }
149         }
150         var endKey=ani.arr_key[len-1];
151         if(ani.countms>endKey.ms)//如果完成了一次动画
152         {
153             //Ani.setValue(ani.elem,endKey.value,ani.type,ani.arr_pname);
154             ani.func_set(ani.elem,value,ani.type,ani.arr_pname);
155             if(endKey.callback)//如果结束帧上有回调函数
156             {
157                 endKey.callback();
158                 console.log(ani.countms);
159             }
160             if(ani.loop)
161             {
162                 ani.countms=ani.countms%endKey.ms;
163                 for(var i=0;i<len;i++)
164                 {
165                     var key1=ani.arr_key[i];
166                     key1.called=false;
167                 }
168
169             }
170             else{
171                 if(ani.endcallback)//如果有动画结束回调
172                 {
173                     ani.endcallback(ani);
174                 }
175
176                 delete Ani.obj_anis[key];
177                 ani=null;
178             }
179         }
180
181     }
182
183
184     Ani.lastframe=Ani.currentframe;
185     if(Ani.runningAni==true)
186     {
187         window.requestAnimFrame(function(){
188             Ani.Frame();
189         })
190     }
191 }
192
193
194 Ani.setValue=function(elem,value,type,arr_pname)//在这里扩展更多的属性设置方法
195 {
196     if(type=="css_px")//这时arr_pname只有一层,是一个字符串,处理颜色时则可能是3维数组
197     {
198         elem.style[arr_pname]=value+"px";
199     }
200     else if(type=="transform-rotate-deg")//
201     {
202         elem.style["transform"]="rotate("+value+"deg)";
203     }
204 }
205 Ani.obj_func_ease={//在这里扩展更多的插值方法
206     //单浮点数线性
207     float_line:function(key1,key2,countms){
208         var ms1=key1.ms;
209         var ms2=key2.ms;
210         var v1=key1.value;
211         var v2=key2.value
212         return Ani.inBetween(ms1,ms2,v1,v2,countms);
213     }
214 };
215 //插值
216 Ani.inBetween=function(ms1,ms2,v1,v2,ms)
217 {
218     var v=v1+((ms-ms1)/(ms2-ms1))*(v2-v1);
219     return v;
220 }
221 Ani.randomString=function(len)
222 {
223     len = len || 32;
224     var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
225     var maxPos = $chars.length;
226     var pwd = '';
227     for (var i = 0; i < len; i++) {
228         pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
229     }
230     return pwd;
231 }
232
233 // Copyright 2010, Google Inc.
234     window.requestAnimFrame = (function() {
235         return window.requestAnimationFrame ||
236             window.webkitRequestAnimationFrame ||
237             window.mozRequestAnimationFrame ||
238             window.oRequestAnimationFrame ||
239             window.msRequestAnimationFrame ||
240             function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
241                 window.setTimeout(callback, 1000/60);
242             };
243     })();

编写过程中参考了Babylon.js动画模块、Google requestAnimFrame方法、网上的randomString方法。可基于MIT协议发布的部分基于MIT协议发布,项目Github地址:https://github.com/ljzc002/SimpleAni。

(0)

相关推荐