用JS封装一个简单的动画函数（超详细）

用JS封装一个简单的动画函数

函数封装_01

---

---

PC端网页特效

首先，你要先了解以下知识点

---

一、元素偏移量offset系列

offset翻译过来就是偏移量，我们使用offset系列相关属性可以 动态 的得到该元素的位置（偏移），大小等

1-1. offset系列的常用属性

• offsetParent 返回作为该元素带有定位的父级元素，父级元素没有定位返回body
• offsetTop 返回元素相对带有定位父元素上方的偏移
• offsetLeft 返回元素相对带有定位父元素左边的偏移
• offsetWidth 返回自身包括padding，边框，内容区的宽度，返回值不带单位
• offsetHeight 返回自身包括padding，边框，内容区的高度，返回值不带单位

1-2. offset 与 style

这里我们需要了解以下它们之间的区别

• offset可以得到任意样式表中的样式值，style只能得到行内样式值
• offset系列获取的数值是没有单位的，style.width获得的是带有单位的字符串
• offsetWidth包含padding+border+width，style.width不包括border和padding的值
• offsetWidth等属性是只读属性，只能获取不能赋值，style是可以读写属性，可以获取也可以赋值
• 获取元素大小用offset，给元素更改值用style

二、元素可视区client系列

client：客户端；使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等

• clientTop 返回元素上边框大小
• clientLeft 返回元素左边框大小
• clientWidth 返回自身包括padding，不含边框，内容区的宽度，返回值不带单位
• clientHeight 返回自身包括padding，不含边框，内容区的高度，返回值不带单位

三、元素滚动scroll系列

scroll：滚动；使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

• scrollTop 返回被卷去的上侧距离，返回数值不带单位
• scrollLeft 返回被卷去的左侧距离，返回数值不带单位
• scrollWidth 返回自身实际宽度，不含边框，返回数值不带单位
• scrollHeight 返回自身实际高度，不含边框，返回数值不带单位

---

三大系列总结

1. offset系列经常用于获得元素位置 offsetLeft，offsetTop
2. client经常用于获取元素大小 clientWidth，clientHeight
3. scroll经常用于获取滚动距离 scrollTop，scrollLeft
4. 注意页面滚动的距离通过 window.pageYOffset 获得

---

动画函数的封装

好的，看了以上知识点，想必已经有所收获，接下来我们还需要再了解一下动画函数的实现原理

1-1. 动画函数的实现原理

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

实现步骤：

1. 获得盒子（元素）当前的位置
2. 让盒子（元素）在当前位置加上1个移动距离（1px）
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件

1-2. 动画缓动效果原理

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

核心算法： （目标值 - 现在的位置）/ 10 作为每次移动的距离步长

1-3. 动画函数添加回调函数（callback）

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

1-4. 节流阀

防止轮播图按钮连续点击造成播放过快

节流阀目的： 当上一个函数动画执行完毕，再去执行下一个函数动画，让事件无法连续触发
思路： 利用回调函数，添加一个变量来控制，锁住函数和解锁函数

---

好的，了解了动画函数的基础知识后，我们开始写代码