实现简单的缓动函数_在线缓动函数编辑-CSDN博客

本文链接：https://blog.csdn.net/angry_rooster/article/details/117670116

本文介绍如何利用JavaScript实现一个简单的缓动函数，用于让绝对定位的元素在移动过程中速度逐渐减慢，涉及清除旧定时器、判断是否到达目标位置以及调整每次移动距离的逻辑。最终实现了一个具有缓动效果的示例。

摘要由CSDN通过智能技术生成

如果使用过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();