前言
随着前端技术的不断发展，npm 已经成为我们开发中不可或缺的一部分。npm 上有很多优秀的包，例如 bezi-b，它是一个可以通过贝塞尔曲线控制 CSS 动画时间的包。在本篇文章中，我们将一起来学习如何使用 bezi-b。
安装
安装 bezi-b 是非常简单的，只需要执行以下命令即可：
npm install bezi-b --save
使用
bezi-b 的使用可以分为两部分，一部分是在 JavaScript 中使用，另外一部分是在 CSS 中使用。
JavaScript 中使用
在 JavaScript 中使用 bezi-b，我们需要先引入它：
import BeziB from 'bezi-b';
然后，我们就可以通过 BeziB 的三个静态方法来生成贝塞尔曲线公式了。
BeziB.linear()
这是一个返回线性公式的方法：
const linear = BeziB.linear();
BeziB.easeIn()
这是一个返回减速公式的方法：
const easeIn = BeziB.easeIn(0.42, 0, 1, 1);
BeziB.easeOut()
这是一个返回加速公式的方法：
const easeOut = BeziB.easeOut(0, 0, 0.58, 1);
CSS 中使用
在 CSS 中使用 bezi-b，我们需要把生成的贝塞尔曲线公式写在 CSS 的 transition-timing-function 属性中。例如：
transition-timing-function: cubic-bezier(.42, 0, .58, 1);
示例代码
这里有一个完整的示例代码，它可以让你更好地了解如何使用 bezi-b。
-- -------------------- ---- -------
------
------
------------ ------------
-------
---- -
------ ------
------- ------
----------------- ----
----------- --- -- ----------------- -- ---- ---
-
---------- -
---------- ------------------
----------------- -----
-
--------
-------
------
---- ---------------
------- ----------------------------------------
--------
----- ------- - ---------------- -- ----- ---
----- --- - -------------------------------
--------------------------------- -- -- -
---------------------------------- - --------
---
---------------------------------- -- -- -
---------------------------------- - ------------------ -- ---- ----
---
---------
-------
-------在这个示例代码中，当鼠标悬停在 #box 上时，我们会把 transition-timing-function 更改为 bezi-b 生成的加速公式，这样在移动完成的时候就会有一个明显的加速效果。当鼠标移开时，我们又把 transition-timing-function 更改回了 cubic-bezier(.42, 0, .58, 1)，这样在移动回来时就会有一个缓慢变化的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822b66