动画函数封装#
动画实现原理#
核心原理 ：通过定时器setInterval()不断移动盒子位置
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
歪瑞古德
动画函数简单封装#
注意函数需要传递2个参数， 动画对象 和 移动到的距离
动画函数给不同元素记录不同定时器#
若多个元素都使用这个动画函数，每次都要var声明定时器，可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理 ：利用JS是一门动态语言，可以很方便的给当前对象添加属性。
缓动动画原理#
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法：(目标值-现在的位置)/10 作为每次移动的距离步长
- 停止的条件：让当前的盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
动画函数添加回调函数#
回调函数原理 ：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做 回调
回调函数写的位置：定时器结束的位置。
动画函数封装到单独的JS文件里面#
因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用时引用这个JS文件即可