我们之前使用CSS实现过动画效果 https://blog.csdn.net/potato123232/category_11644821.html 30，31，32，现在我们使用JS实现

目录

1  动画原理

2  上面动画过程的一点儿bug

3  缓动效果动画

4  多个目标之间移动

5  动画的回调函数

5.1  重复使用回调函数

5.2  不重复使用回调函数

---

1  动画原理

js动画原理就是通过定时器setInterval()不断修改盒子的样式

比如说想让一个盒子移动，就让他一个像素一个像素的蹭着走

我们下面先搞一个看一看

运行后会发现盒子会从左侧开始移动，移动到400的位置会停下来

有时会有多个元素用到相似的动画，把动画封装成一个函数会让代码看起来更简洁，我们简单封装一下上面的函数

像上面的函数可以甩出来三个参数 执行对象，距离，速度

下面我们用一下

发现可以正常移动

2  上面动画过程的一点儿bug

如果按上面那样写的话执行一次是可以的，现在我们搞一个按钮，我们点一下按钮，动画才会执行

打开页面的时候盒子没动

只点击一次也可以正常到达指定位置

但当我在动画过程中点击多次按钮，那么红色的盒子就会以极快的速度向右走，并且会超出距离限制

这是因为我们每一次点击按钮都会设置一个定时器，我们每次点击按钮时取消上一次的定时器就可以了

这样点了多次他就不会出现刚刚的情况

当红色盒子到达位置的时候，再点击按钮，它还是会往前走一点，这个时候我们加入判断，如果小于距离再加入定时器，如果不小于距离就什么都不做

• 这里还是会向前走一点的原因是，section使用了相对定位，如果使用相对定位它就不会再向前走了

3  缓动效果动画

缓动效果就是让盒子越走越慢，原理是每次移动的距离随盒子与目标距离的减少而减少

虽然效果不是很明显，但确实执行的是减速运动

但会有一点儿问题，它最终到达的位置不准

所以我们小改一下

这里注意如果要移动到指定的位置，那么你一定要使用绝对位置，如果使用相对位置，每一步就是相对你之前的位置走，那样永远也是走不准的

这里做取整的原因有下面几个

• 我们的目的地是整数，如果不是整数你就不要取整
• 如果你不进行取整，它每一次都按小数走，（剩余距离的小数-步长的小数）再除10，小数的位数会越来越多，距离越远越不准
• 向上取整而不是向下取整的原因，你想一个极端情况，现在你距离终点还差9px，你除以10之后得到你应该走0.9px，这时如果你向下取整，那么你得到的信息就是走0px，所以他到不了指定的位置就动不了了，如果你向上取整就不会有这种问题

4  多个目标之间移动

我们现在加两个按钮，一个点击之后走到500px，另一个点击之后走到800px

先点击500按钮，发现可以成功

再点击800按钮，发现可以从500走到800

这是我再点击500按钮，发现是回不来的，现在我们想让它回来，我们需要取消这里的判断

这样它就可以回来了

由于我们的定位是绝对定位，所以取消了此处的判断，盒子也不会在到达位置的情况下点击后再次移动

回来的时候它会出现一个问题，它走到509就停了

这是因为我们走的是负方向，而且是向上取整，走到只挪动-0.几px时候，直接搞到0，走不动了

这是我们可以对step进行判断

如果正向走就向上取整，如果负向走就向下取整。这样无论是正向走还是负向走就都没有问题了

5  动画的回调函数

回调函数的意思就是返回值是另外一个函数，我们的递归思想就可以使用回调函数实现

5.1  重复使用回调函数

现在我们想让元素在200和500之间来回移动，我们可以这样写

这样它到达200后就可以反复移动了，如果你不想要一开始从0移动到200的过程，那么你把初始位置放在200px就好了

5.2  不重复使用回调函数

如果你要执行一个不重复的回调函数，那么你可以这样写

这样它走到指定位置的时候就会变为红色