前言
在前端开发中，动画效果的应用非常普遍。我们通常会使用 JavaScript 进行动画效果的处理，但是速度曲线（easing curve）的计算比较困难。@xg4/easings 包便是为此而生的，它提供了一些常用的速度曲线函数，可以轻松地实现各种动画效果。
安装
你可以使用 npm 在你的项目中安装 @xg4/easings 包。只需要在终端运行以下命令：
npm install @xg4/easings
使用方法
引入包
首先，需要在 JavaScript 中引入 @xg4/easings 包：
import easings from "@xg4/easings";
注意：你需要使用 ES6 module 语法或者类似 webpack 的打包工具来使用该包。
调用 API
easings 提供了很多函数，每个函数都是一个速度曲线。以 easeInQuad 曲线为例，在 JavaScript 中调用这个函数的方式如下：
const easing = easings.easeInQuad;
现在，你就可以使用这个 easing 变量来做一些事情了。例如，你可以使用这个变量来计算当前时间点的进度：
-- -------------------- ---- -------
----- ----------- - -----------
----- -------- - ----- -- -----
--- -------- - --
-------- --------- -
----- ----------- - ---------- - ------------
-------- - ----------- - ---------
-- --------- - -- -
-------------------------------
-
-应用到动画中
现在，你已经有了一个进度值。你可以将这个进度值应用到你的动画中。
例如，你可以将一个盒子从左侧移动到右侧，使用 easeInQuad 函数作为速度曲线。为了达到这个目的，我们需要使用 CSS 的 transform 属性。
首先，我们需要定义两个 CSS 类：
-- -------------------- ---- ------- ---- - --------- --------- ---- ---- ----- -- ------ ------ ------- ------ ----------------- ----- ---------- -------------- - ----------- - ---------- ------------------ -
这样，我们可以让 .box.active 类在动画期间应用到 .box 元素上。然后，我们可以在 JavaScript 中启动动画，如下所示：
-- -------------------- ---- -------
----- --- - -------------------------------
-------- --------- -
----- ------ - -------------------
----- ----------- - -----------
----- -------- - -----
--- -------- - --
-------- ------ -
-------- - ----------- ----------- - ------------ - ----------
------------------- - ------------------------------ - ---------
-- --------- - -- -
----------------------------
- ---- -
-------------------------------
-
-
----------------------------
----------------------------
-
----------------------------- ---------现在，当你点击这个盒子时，它会暂时变为 active 类。这个类设置了盒子的 transform 属性。然后，我们使用 requestAnimationFrame 函数启动了一个函数，这个函数会在动画期间不断地更新盒子的位置。
最后，我们从盒子上移除 active 类。这样，我们就完成了动画。
总结
@xg4/easings 包提供了简单易用的速度曲线计算函数。它可以帮助你轻松地实现各种动画效果，让你的 web 应用更加生动有趣。科学合理的运用它可以增加页面互动性的同时，也让你的动效更加优美。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822b67