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

左手的ㄟ右手 2022-12-04 08:49 144阅读 0赞

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

函数封装\_01

--------------------

### 文章目录 ###

*  用JS封装一个简单的动画函数
 *  PC端网页特效
 *   *  一、元素偏移量offset系列
     *   *  1-1. offset系列的常用属性
         *  1-2. offset 与 style
     *  二、元素可视区client系列
     *  三、元素滚动scroll系列
     *  三大系列总结
 *  动画函数的封装
 *   *  1-1. 动画函数的实现原理
     *  1-2. 动画缓动效果原理
     *  1-3. 动画函数添加回调函数（callback）
     *  1-4. 节流阀

--------------------

# 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. 节流阀 ##

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

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

--------------------

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

// 动画函数animantion
    // 这里需要两个个参数
    // obj 哪个元素做动画, target 要移动到的目标位置
    function animation(obj, target) { 
    	var timer = setInterval(function() { 
            if(obj.offsetLeft == target) { 
            	// 当元素到达指定位置时，清除定时器
                clearInterval(timer)
           }
            obj.style.left = obj.offsetLeft + 1 + 'px'
        }, 15)
    }

这样，我们的代码就敲完了，当然，这个动画函数有很多bug，接下来我们需要解决这些bug

--------------------

首先，我们可以发现，当我们给多个元素做动画时，会出现变量timer重名的情况，而且会消耗过多的内存；  
于是，我们可以将变量 timer 换成这个做动画元素的一个属性方法：obj.timer；  
而且，我们还可以发现，当元素做动画是以一个按钮点击事件触发的时候，多次点击事件触发就会发生多个定时器同时触发的现象，于是我们需要在定时器开启之前，先清除一下定时器：clearInterval()

function animation(obj, target) { 
    	clearInterval(obj.timer)  //清除定时器
    	obj.timer = setInterval(function() { 
            if(obj.offsetLeft == target) { 
            	// 当元素到达指定位置时，清除定时器
                clearInterval(obj.timer)
           }
            obj.style.left = obj.offsetLeft + 1 + 'px'
        }, 15)
    }

好的，我们解决了第一个问题

**思考：** 这个动画函数是以一种匀速的状态做动画的，但是我们如果想要一种动画缓动效果，元素运动速度有所变化，让速度慢慢停下来，应该怎么做呢？

function animation(obj, target) { 
    	clearInterval(obj.timer)  //清除定时器
    	obj.timer = setInterval(function() { 
    		var step = (target - offsetLeft) / 10
            if(obj.offsetLeft == target) { 
            	// 当元素到达指定位置时，清除定时器
                clearInterval(obj.timer)
           }
           // 这里的1 就换成step
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }

step = （目标值 - 现在的位置）/ 10 作为每次移动的距离步长；这样子一看，好像就解决我们的问题了； **不过这里肯定会有bug的存在**  
当程序在运行除法时，可能会发生除不尽、有余数的情况，这样也就会导致我们想要移动到的目标位置可能会有所偏差

**所以我们需要取整**：1，当step为正数时，我们向上取整；2，当它为负数时，我们向下取整；这样也就解决了我们的问题

function animation(obj, target) { 
    	clearInterval(obj.timer)  //清除定时器
        obj.timer = setInterval(function() { 
            var step = (target - offsetLeft) / 10
            // 使用三元表达式判断正负数并取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if(obj.offsetLeft == target) { 
            	// 当元素到达指定位置时，清除定时器
                clearInterval(obj.timer)
           }
           // 这里的1 就换成step
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }

**好的，我们的动画函数就可以很好的运行起来了，不过如果我们想要在元素做动画的时候，做一些其他的效果，比如改变元素的颜色，大小之类；很显然，我们封装的动画函数没有这个功能，于是我们可以给这个动画函数添加一个 callback 参数（也就是回调函数），在我们的动画函数内部判断有没有这个 callback回调函数，如果有我们就执行它**

function animation(obj, target, callback) { 
        clearInterval(obj.timer)
        obj.timer = setInterval(function() { 
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if(obj.offsetLeft == target) { 
                clearInterval(obj.timer)
                callback && callback()
            }
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }

这样我们简单的动画函数到此就封装完毕了~~

小怪留言：有些知识点比较少用到，忘记了不可怕，有空回来看看吖