欢迎光临
我的个人博客网站

一个原生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) 打赏
未经允许不得转载:张拓的天空 » 一个原生JavaScript动画库原型
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏