如何利用原生JS优雅地实现滚动动画

如何利用原生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'

以上这些代码就能简单地实现一个优雅的滚动效果，想看更多前端代码，记得关注我哟！