美文网首页
animate () 多属性动画函数封装

animate () 多属性动画函数封装

作者: AnnQi | 来源:发表于2017-09-28 18:02 被阅读0次
    /*获取元素属性函数*/
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,null)[attr];
        }
    }
    
    //多属性运动框架
    function animate(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var flag = true;//判断停止计时器
            for(var attr in json){
                //利用attr遍历json数组,attr就是json的属性
                var current = 0;//初始值
                if(attr=='opacity'){
                    current=Math.round(parseInt(getStyle(obj,attr)*100));
                }else{
                    current=parseInt(getStyle(obj,attr));
                }
                var step = (json[attr] - current)/10;//json[attr];
                //就是我们传进来的,想要走到的位置,所以就是目标值,current就是初始值,也就是:(目标值-初始值)/10=步长
                step = step>0?Math.ceil(step):Math.floor(step);//步长取整
                if(attr=='opacity'){
                    obj.style.opacity=(current+step)/100;
                }else if(attr =='zIndex'){
                    obj.style.zIndex=json[attr];
                }else{
                    obj.style[attr]=current+step+'px';
                }
                if(current!=json[attr]){
                    flag=false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }
        },10);
    }
    

    相关文章

      网友评论

          本文标题:animate () 多属性动画函数封装

          本文链接:https://www.haomeiwen.com/subject/etsvextx.html