标签：原生 动画 arr JavaScript ani Ani let ms
设计目标：简单易用，不依赖其他库，对旧版浏览器具有一定兼容性，功能可扩展。
动画调用：
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。
标签：原生,动画,arr,JavaScript,ani,Ani,let,ms 来源： https://www.cnblogs.com/ljzc002/p/13896348.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。