JS封装缓动动画效果函数

原理

JS的动画效果原理其实就是添加一个定时器,每多少毫秒调用一次,就可以使盒子运动一次.
在这里我封装了一个缓动动画函数,只要有对象需要添加动画就可以调用这个动画函数,就可以实现动画效果.

  // 封装缓动动画函数 传递两个参数 需要执行动画的对象和目标位置
        function animate (obj , target){
            //先把原先的定时器清除,只保留一个.
            clearInterval(obj.time);
             obj.time = setInterval( function(){
                 //步长 公式:(目标位置-现在的位置)/10 
                //  Math.ceil 是往大的取整. Math.floor s是往小的取整;
                 var step =(target - obj.offsetLeft) / 10;
                 step = step > 0 ? Math.ceil(step): Math.floor(step);
                if(obj.offsetLeft == target){
                    clearInterval(obj.time);
                }
                obj.style.left = obj.offsetLeft + step +'px';
            },15);
        }

通过这个函数,只要我调用一下,就可以实现运动效果

 		var box = document.querySelector('.box');
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        btn1.addEventListener('click', function(){
          //调用动画函数
            animate(box,300);
        });
        btn2.addEventListener('click', function(){
            animate(box,100);
        });

看效果

如果你想在运动之后再做其他效果,那就需要给动画添加回调函数了

回调函数的原理
函数作为一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行万之后,在执行传进去的函数,这个过程叫做回调

于是我就想当我的盒子运动完之后就要使盒子变色,然后我就这样做
我把回调函数当参数callback传入
要把这个回调函数写到定时器的后面,因为要动画效果完成之后再执行回调函数,

```javascript
  // 封装缓动动画函数 传递两个参数 需要执行动画的对象和目标位置
        function animate (obj , target, callback){
            //先把原先的定时器清除,只保留一个.
            clearInterval(obj.time);
             obj.time = setInterval( function(){
                 //步长 公式:(目标位置-现在的位置)/10 
                //  Math.ceil 是往大的取整. Math.floor s是往小的取整;
                 var step =(target - obj.offsetLeft) / 10;
                 step = step > 0 ? Math.ceil(step): Math.floor(step);
                if(obj.offsetLeft == target){
                    clearInterval(obj.time);
                    //动画结束,再执行回调函数
                    //这里的意思就是,如果有callback这个参数传进来.那就调用这个函数
                    //没有的话就不执行这个条件语句.
                    if(callback){
                        //调用函数
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step +'px';
            },15);
        }

然后我就写回调函数
这个回调函数就是function(){};
我需要盒子变色,那我直接再回调函数里面加
box.style.backgroundColor = “red”;语句就行.

var btn3 = document.querySelector('.btn3');
        btn3.addEventListener('click', function(){
            animate(box, 400, function (){
                box.style.backgroundColor = "red";
            });
        })

这样就成功了,盒子运动完之后就会变成红色.

就这样,就完成了动画函数封装完成了,
以后需要用到动画函数,就直接调用的行.