JS 57 动画原理

一.动画原理实现

1.核心原理:通过定时器setInterval()不断移动盒子位置
2.实现步骤:
①获得当前盒子位置
②让盒子在当前位置加上1个移动距离
③用定时器不断重复
④结束定时器来停止动画
⑤注意元素需要添加定位,才能使用element.style.left
3.案例:让一个盒子从左到右动起来
代码:

        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

window.onload=function(){
    var div=document.querySelector('div');
    var timer = setInterval(function(){
        if(div.offsetLeft >= 400){
            clearInterval(timer);
        }
        div.style.left = div.offsetLeft + 1 + 'px';
    },30);          
}

<div></div>

4.封装一个动画函数
注意:函数要传递两个参数,动画对象 和 移动到的距离
代码:

        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            position: absolute;
            left: 0;
            top: 200px;
            width: 170px;
            height: 170px;
            background-color: grey;          
        }

            window.onload=function(){
                function animate(obj,target){
                    var timer = setInterval(function(){
                        if(obj.offsetLeft >= target){
                             clearInterval(timer);
                    }
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                    },30);                
                }
                animate(div,500);  
                animate(span,300); //调用函数 
            }

    <div></div>
    <span></span>

5.给不同元素记录不同定时器
必要性:如果多个元素都要使用这个动画效果,每次都要var声明定时器,浪费内存.
优点:优化性能
原理:给当前对象添加属性
代码:

        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            position: absolute;
            left: 0;
            top: 200px;
            width: 170px;
            height: 170px;
            background-color: grey;          
        }

        window.onload=function(){
            var btn=document.querySelector('button');
            var div=document.querySelector('div');
            var span=document.querySelector('span');

            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);                
            }


            btn.addEventListener('click',function(){
                animate(div,500);  
                animate(span,300); //点击之后调用函数
                //发现BUG:当我们不断点击按钮,动画会越来越快,因为开启了太多定时器
                //解决方发:先清除原先的定时器,在开启新的
            })        
        }

    <button>点击启动</button>
    <div></div>
    <span></span>