仿支付宝下拉加载笑脸动画【原创】

js代码

<script>
    	window.onload=function(){
			var eye=document.getElementsByClassName('backdrop');
			var face=document.getElementsByClassName('circle_bar');
			var t=null,t2=null;
			
			function run()
			{
				for(var i=0;i<eye.length;i++)
				{
					eye[i].style.opacity=1;
					eye[i].style.transition='opacity ease 0.1s '+i*0.2+'s';	    //0.2		
				}
				face[0].style.animation='donut 0.8s linear  0.5s forwards' ;
	
				/*if(t>=1)  // 清除眼睛定时器
				{clearTimeout(t);t=null;}*/
				
				t=setTimeout(function(){
							for(var i=0;i<eye.length;i++)
							{  
								eye[i].style.opacity=0;
								eye[i].style.transition='opacity ease 0.1s '+i*0.2+'s';   //0.2
							}
							eye[1].addEventListener("transitionend",end,false); // 关闭眼睛定时器	
	
					},1100); // 笑脸走到一半的时候 消失眼睛   //02+0.5+0.8/2=1.1
					
				face[1].style.animation=' donut 0.8s linear 1.1s forwards'    
				face[1].addEventListener("animationend",end2,false);  //笑脸开始消失  1.1s
			
			}
			run(); // 执行动画
			
			function end(e)   // 清除眼睛定时器
			{
				if(e.propertyName=='opacity')	  //  透明度属性过渡完成 执行				
				{ 
					if(t) 
					{
						//console.log(t);
						clearTimeout(t);t=null;
					}
					this.removeEventListener("transitionend",end);
				}
			} ///----------------------------end 函数使用 57,58行代替 更便捷
			
			function end2(e)
			{
				if(e.animationName== "donut")
				{
					// 清除动画 回归最初状态
					/*eye[0].style.transition='';
					eye[1].style.transition='';*/
					face[1].style.animation='';
					face[1].style.opacity=0;
					face[0].style.animation='';
					face[0].style.opacity=0;
					this.removeEventListener("animationend",end2);
					if(t2)clearTimeout(t2);	
					t2=setTimeout(run,10);
				}		
			}
		}
    </script>