32 动画函数封装

技术交流 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文件；

7.资料下载

• 笔记及代码，欢迎 star,follow,fork......