缓动动画特效

运用到的知识点：setInterval定时器；clearInterval清除定时器；offset系列中offsetLeft；

原理分析:

1. 首先我们创建一个animate(obj,target)函数,这个函数用来封装我们的缓动效果,其中两个形参分别是要运动的对象元素obj和它的最终位置target;
2. 然后在当前函数中创建定时器timer及其执行函数；
3. 通过获取对象元素的位置（obj.offsetLeft）加上我们的步长（step）来动态的给我们的对象元素的left赋值以达到移动的效果；
4. 最后在定时器中添加判断语句（obj.offsetLeft >=target）来判断元素对象是否到达指定位置，满足则执行清除当前对象的定时器的语句clearInterval(obj.timer)
5. 其中求步长step的公式为：（targe - obj.offsetLeft）/ 10  既目标值减去当前对象的位置再除以10
6. 附加点：当我们不想立即执行这个效果，例如：我们想通过一个按钮btn来调用animate函数：既
   　　btn.addEventListener('click',function(){

               animate(obj,target);

           })

   这个时候会出现一个bug，就是我们疯狂点击btn时候会创建多个定时器，导致元素对象移动速度变快；解决办法是在调用animate这个函数的时候先清除以前的定时器：clearInterval(obj);

源代码：

　　

//简单动画函数封装

    function animate(obj,target,callback) {

            //当我们不停的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

            //解决方案是 让我们元素只有一个定时器执行;先清除以前的定时器，只保留当前的一个定时器执行

            clearInterval(obj);

            var timer=setInterval(function(){

                //步长值写到定时器里面

                // 把步长值改为整数不要出现小数问题

                var step = Math.ceil((target - obj.offsetLeft) / 10);

                var step = (target - obj.offsetLeft) / 10;

　　　　　　　　　 obj.style.left = obj.offsetLeft + step + 'px';

                if(obj.offsetLeft == target){

                    clearInterval(object.timer);

                }

            },10)

        }