前言
在前端开发中，生动的动画效果能增强用户体验，调用 @nathanfaucett/easing 包能够方便我们实现这样的效果。本次教程将介绍如何使用该 npm 包。
安装
在终端中运行以下命令即可安装 @nathanfaucett/easing 包
npm install @nathanfaucett/easing
如何使用
API 说明
在使用 @nathanfaucett/easing 包时，我们会用到以下 API：
easingFunctions
easingFunctions 包含了 30 种不同类型的缓动函数。我们可以通过设置 easingFunctions.linear 来设置默认的缓动函数。也可以直接使用 easingFunctions 中的某一个函数来替代。
easing
easing 接受以下参数：
progress (Number)：代表动画执行进度的值，区间为[0, 1]start (Number)：动画起始值end (Number)：动画结束值easing (Function)：可选参数，表示缓动函数，如果不传入则使用默认的缓动函数。
示例
我们将通过例子来演示如何使用 @nathanfaucett/easing 包。
HTML 代码
以下是我们的 HTML 代码，主要包含一个矩形和一个按钮，点击按钮后矩形会沿着 y 轴移动到顶部。
<div class="rectangle"></div> <button class="moveButton">开始运动</button>
CSS 代码
我们使用 CSS 来设计矩形的样式。
-- -------------------- ---- ------- ---------- - ------ ------ ------- ------ ----------------- ----- --------- --------- ----- ---- ------------ ------ ------- -- -
JavaScript 代码
在 JavaScript 中，我们需要使用 easing 函数来计算每一时刻的位置。
-- -------------------- ---- -------
------ --------------- ---- ------------------------
----- --------- - -------------------------------------
--------------------------------------------------------------- -- -- -
--- - - --
--- --------- - -----
----- -------- - -----
-------- ----------------- -
-- ---------- --- ----- -
--------- - ------------
-
- - ----------- - ----------
-- -- -- --------- -
- - ---------
-
----- - - - - ---------
----- - - -------------------------------- - ----
---------------------- - - - -----
-- -- - --------- -
-----------------------------------
-
-
-----------------------------------
---上述代码中，我们创建了一个函数 move 来控制矩形的运动。我们使用 easeOutBounce 缓动函数，并且在每一帧中使用 requestAnimationFrame 函数来不断更新矩形的位置，达到动画效果。
参数调整
我们可以通过调整 duration 来控制动画的时间长度，调整 easingFunctions 中的缓动函数来改变运动效果。
总结
通过本篇文章，我们可以了解到如何使用 @nathanfaucett/easing 包来实现动画效果。这个包包含了多种缓动函数，可以轻松帮助我们实现各种动画效果。同时，我们也应该根据情景选择合适的缓动函数，来达到更好的运动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244917