封装动画以及原理分析过程

动画得原理以及封装分析

第一步 核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

第二步 函数需要传递2个参数，动画对象(就是你给谁设置动画)和移动到的目标距离。

第三步 动画函数给不同元素记录不同定时器 在我们日常开发中如果多个元素都使用这个动画函数，每次都要var 声明定时器 这会导致我们得代码效力变低。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性

第四步 缓动效果及原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

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

2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长

3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

4. 注意步长值需要取整

   注意：
   如果我们不要缓动效果 就是 盒子是当前的位置 + 固定的值 10
   如果要缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

第五步 动画函数多个目标值之间移动
比如我可以让动画函数从800移动到500 500移动到800 但是我们要判断取整数才能准确到达目标位置
判断步长距离是正值还是负值
如果是正值，则步长 往大了取整
如果是负值，则步长 向小了取整

第六步 动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。回调函数写的位置：定时器结束的位置

总结： 1.我们在移动动画距离得时候一定要取整数不然它得目标位置有差距，2.如果我们是给元素添加得是点击事件后才让动画走得，这时候会有一个Bug那就是你反复得点击按钮，这时候元素会走的越来越快，这是因为你每点击一次，定时器就每执行了一次所以你点击得越快那么你速度就走得越快，那我们怎么解决勒？那就是在你点击下一次之前先清除以前得定时器(动画函数)，只保留当前的一个定时器执行。这样不管你点击了多少次，都只是点击了一次 3.回调函数是写在动画函数形参最后一个得，而调用回调函数则是写在定时器结束里面，回调函数在结束定时器后才会去执行，是最后一个执行得，判断它有参数传过来才去执行，如果没有则不执行

代码演示

    // 缓动动画函数封装obj目标对象 target目标位置  callback = function(){}  调用的时候callback()
    function animate(obj, target, callback) {
   
        clearInterval(obj.timer); // 先清除以前的定时器，只保留当前的一个定时器执行
        obj.timer = setInterval(function(