技术交流 QQ 群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
1.动画实现原理
- 核心原理：通过定时器setInterval()不断移动盒子位置。
实现步骤：- a.获得盒子当前位置；
- b.让盒子在当前位置上加一个移动距离；
- c.利用定时器不断重复这个操作；
- d.加一个结束定时器的条件；
- 注意：此元素需要添加定位，才能使用element.style.left。
2.动画函数简单封装
- 注意函数需要传递2个参数：动画对象和移动到的距离。
3.动画函数给不同元素添加不同定时器
- 如果多个元素都使用一个动画函数，函数的内部每次都要声明var定时器timer。我们可以给不同的元素使用不同的定时器(自己专门调用自己的定时器)。
- 核心：由于JS是一门动态语言，可以很方便的给当前对象添加属性。
4.缓动效果原理
- 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
- 思路：
- (1).让盒子每次移动的距离慢慢变小，速度就会慢慢落下来；
- (2).核心算法：(目标位置 - 现在位置) / 10作为每次移动的距离即步长。步长值需要向上取整；
- (3).停止条件：让当前盒子位置等于目标位置就停止定时器；
5.动画函数添加回调函数
- 回调函数原理：函数可作为一个参数，将这个函数作为参数传到另一个函数中。当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
- 回调函数写的位置：定时器结束的位置。
6.动画函数封装到单独JS文件中
- 因为以后经常会用到这个动画函数，可以单独封装到一个JS文件中，使用的时候引入这个JS文件即可。
- 思路：
- (1).创建一个JS文件；
