如果使用过CSS的animation
属性或transition
属性,应该会对ease
、ease-in
等缓动函数(easing function)有印象,这些函数能够在动画过程中改变变化的速度
这里作为练习,我实现一个移动速度逐渐变慢的缓动函数(可能在变化上不太严谨)
实现
通过缓动函数实现一个绝对定位的方块左右移动时速度慢慢降下来的缓动效果
这里使用到的JS内置API有以下几个:
// 获取元素左侧和带有定位的父元素左侧的距离,不带单位(px)
elem.offsetLeft;
// 实现速度变化的关键。实现速度变化的实质就是实现 每个相同时间间隔后,移动的距离逐渐变小
// 设置定时器
window.setInterval(callback, interval);
// 清除定时器
// 每次开始使用缓动函数时都要清除之前的定时器,防止出现混乱
// 在以下实现的缓动函数中也用于在到达目标位置后停止定时器
window.clearInterval(timerID);
// 用于对步长 step 进行取整(详见下面代码)
Math.ceil();
Math.floor();
首先确定缓动函数的“雏形”为:
function animateEase(