一、动画实现原理

核心原理：通过定时器不断移动盒子位置

（1）获取盒子当前位置

（2）让盒子在当前位置加上一个移动距离

（3）利用定时器不断重复这个操作

（4）加一个结束定时器的条件

（5）注意此元素需要添加定位，才能使用element.style.left

二、封装动画函数

function(obj,target){

            clearInterval(timer); //先清除能保证多次点击按钮触发事件重复创建定时器

            var timer = setInterval(function(){

                if(obj.offsetLeft >= target){

                    clearInterval(timer);    //如果到达指定位置就停止定时器

                }

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

            },30);

        }

三、动画函数给不同元素记录不同定时器

如果很多的元素都要使用同一个封装的动画函数，每次都要声明一个定时器，名字重复且过多占用内存资源。所以给不同的元素使用不同的定时器。

核心原理：利用JS动态语言原理，给当前对象添加属性。

所以给以上封装的函数中的timer改为obj.timer，且不使用var声明

四、缓动动画原理

缓动动画就是让元素运动速度有所变化，比如速度慢慢的停下来

（1）让盒子每次移动的距离慢慢的变小，速度就会慢慢降下来。

（2）核心算法：Math.ceil（（目标值-现在的位置）/10），作为每次移动的距离步长。其中Math.ceil是为了避免运算出现小数导致最后的元素位置出现偏差，往上一位取整。

（3）停止的条件；让当前盒子的位置等于目标位置就停止定时器

五、缓动动画多个目标值之间移动

步长为负值时候会使动画后退，但是核心算法需求在负值时候进行修改，Math.floor往下一位取整。

六、动画函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行穿进去的这个函数，这个过程就叫做回调。

函数写到定时器结束的位置。

七、动画函数封装到单独的JS文件里面

（1）单独创建一个JS文件

（2）在JS文件粘贴代码

（3）在目标文件引入该JS文件 <script scr='JS地址'></script>