如何利用原生JS优雅地实现滚动动画
在很多页面中,我们都会看到滚动的效果,比如说回到顶部、轮播图等等,这里的滚动效果到底是怎么优雅又简洁地实现呢?接下来就以一个小小的demo与大家共同学习。
下图是一个简单的页面
有一个按钮,一个box,点击按钮box将会优雅地降速水平移动到500px的位置。接下来一起来看js代码吧。
// 获取box与元素
let box = document.querySelector('div')
// 1. 获取btn元素,绑定点击事件
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
let timer = null
// 创建一个定时器, 15ms执行一次
timer = setInterval(function() {
// 由于移动的终点位置的水平位置是500,所以要先判断是否到box.offsetLeft值是否为500
if (box.offsetLeft >= 500) {
box.offsetLeft = 500
return // 当到达目的距离时,不要执行下面的操作
}
// 不断改变box.style.left的值
***** 注意这里的box一定要设置为absolute,否则left属性不起作用的呦***
box.style.left = box.offsetLeft + 4 + 'px
}, 15)
})
上面的方式固然可行,但是我们发现,虽然box的位置停止了,但是定时器依然在运行,对性能明显有损,我们可以进一步优化,只需要修改一处的代码
if (box.offsetLeft >= 500) {
clearInterval(timer) // 当到达时停止定时器
return // 当到达目的距离时,不要执行下面的操作
}
以上的方式固然优化了代码,但是滑动的体验始终不那么优雅,如何更优雅的实现滑动效果呢?
要更优雅其实就是让滑动的速度发生变化,渐慢或者渐快,我们这里以渐慢的效果实现,渐快的效果也是一样的,我们定义一个步长变量step,通过改变step实现渐慢效果:
let step
// 由于 box.offsetLeft在不断增大,500 - box.offsetLeft就不断减小,step也就不断缩小,故此实现动态的step效果
step = (500 - box.offsetLeft) / 10
box.style.left = box.offsetLeft + step + 'px'
以上这些代码就能简单地实现一个优雅的滚动效果,想看更多前端代码,记得关注我哟!