动画animate的封装

最新推荐文章于 2025-09-11 22:10:09 发布

weixin_30732825

最新推荐文章于 2025-09-11 22:10:09 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/xxcnhj/p/11028280.html

function getStyle(Ele,attr){
 if(window.getComputedStyle){
   return window.getComputedStyle(Ele,attr);
 }
   return Ele.currentStyle[attr];
}

function animate(Ele,json,callback){
//清空定时器,保证一个dom对象,只有一个定时器
 clearInterval(Ele.timer);
 Ele.timer=setInterval(()=>{
    "use strict";
     let flag=true;
     let current=0;     
     let target=0;
     let step=0;      
     for(var attr in json){
        if(attr=="opacity"){
           current=getStyle(Ele,attr)*100;
           target=json[attr]*100;
       }else{
           current=parseInt(getStyle(Ele,attr));        
           target=json[attr]
       }

        step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);        
            
        if(attr=="opacity"){
             Ele.style[attr]=(current+step)/100;
             Ele.style.filter=`Alpha(Opacity=${current+step})`;   
         }else if(attr=="zIndex"){
             Ele.style[attr]=json[attr]  
         }else{
            Ele.style[attr]=current+step+'px';
         }
          if(current!=target){
                flag=false; 
           }
    }   
         if(flag){
             clearInterval(Ele.timer);
             if(typeof(callback)=="function"){
                   callback();  
            }
          }     
   
  },50)

}