javaScript封装animate函数

•  动画原理

1、获取盒子当前位置

var div = document.querySelector('div');

2、当前位置加上移动距离

//offsetLeft获取盒子当前位置     style.left赋值盒子位置 
div.style.left = div.offsetLeft+1+'px';

3、利用定时器重复这个操作

var timer = setInterval(function(){},);

4、设定结束定时器条件

if( ){ 
//停止动画  本质是停止定时器         
clearInterval(timer);
};

5、注意：需要绝对定位(很多时候没有出现预期的动画效果，都先检查这个点)

//动画对象必须有css 
position: absolute;  top: 0; left: 0;

• 简单动画函数封装

匀速动画

1、参数：动画目标对象，目标位置

function animate(obj,target){     
        var timer = setInterval(function(){         
            if(obj.offsetLeft >=target){             
            //停止动画  本质是停止定时器，起个名字             
                clearInterval(timer);         
            }         
            obj.style.left = obj.offsetLeft+1+'px';     
        },30); 
}

2、调用

//直接调用 animate(span,200); 
//事件函数调用 
btn.addEventListener('click',function(){   
    animate(div,500);
})

3、优化

//解决var开辟空间问题 
function animate(obj,target){ 
    //可以给对象添加属性     
    obj.timer = setInterval(function(){         
        if(obj.offsetLeft >=target){             
            //停止动画  本质是停止定时器，起个名字             
            clearInterval(obj.timer);         
        }         
        obj.style.left = obj.offsetLeft+1+'px';     
    },30);
};
//如果不断点击按钮，就会开启多个定时器，速度会越来越快 
//解决方案：先清楚前一个定时器，只保留当前的一个定时器 
function animate(obj,target){ 
    clearInterval(obj.timer);     
    obj.timer = setInterval(function(){         
        if(obj.offsetLeft >=target){             
            //停止动画  本质是停止定时器，起个名字             
            clearInterval(obj.timer);        
    }         
    obj.style.left = obj.offsetLeft+1+'px';     
    },30); 
}

缓动动画

//缓动效果 
//核心算法： 
//让盒子每次移动的距离慢慢变小 （目标值-现在位置） / 10 = 移动距离 function animate(obj,target){ 
    clearInterval(obj.timer); 
    obj.timer = setInterval(function(){ 
        // 移动步长 取整 
        var step = (target-obj.offsetLeft)/10; 
        step = step >0 ? Math.ceil(step) : Math.floor(step); 
        if(obj.offsetLeft ==target){ 
            //停止动画 
            clearInterval(obj.timer); 
        } 
        obj.style.left = obj.offsetLeft + step + 'px'; 
    },15); 
}