动画函数封装

1.动画实现原理

简单动画封装函数

        //简单动画函数封装 obj对象 target目标位置
        function animate(obj,target){
            //给不同元素指定不同的定时器
            //本质是给指定元素对象添加定时器属性
            obj.timer=setInterval(function(){
                if(obj.offsetLeft>=target){
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left=obj.offsetLeft+1+'px';
            },30);
        }

2.缓动效果原理

动画函数添加回调函数

缓动动画封装函数

        //简单动画函数封装 obj对象 target目标位置 callback回调函数
        function animate(obj,target,callback){
            //给不同元素指定不同的定时器
            //本质是给指定元素对象添加定时器属性
            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);
                    //回调函数写到定时器结束里面
                    if(callback){
                        //如果有回调函数当参数传来则调用回调函数
                        callback();
                    }
                }
                obj.style.left=obj.offsetLeft+step+'px';
            },15);
        }

3.动画函数使用

因为动画函数经常用到，可以将动画函数封装到一个单独的js文件中，使用的时候直接调用该js文件即可

4.节流阀