什么是 cubic-bezier
cubic-bezier 是一种用于定义动画缓动曲线的函数，也称为 Bezier 曲线。它是使用贝塞尔公式来计算动画轨迹的。
在前端开发中，通过曲线动画，我们可以为用户带来更加流畅自然的交互体验，而 cubic-bezier 就是实现这种效果的一种工具包。
安装
在使用 cubic-bezier 之前，我们需要在项目中安装它。可以通过以下命令来完成安装：
--- ------- ------------
使用
cubic-bezier 的使用非常简单，我们只需要用它提供的函数生成一个贝塞尔曲线函数，然后把它绑定到我们想要使用缓动动画的元素上即可。
生成曲线
cubic-bezier 提供了一个 cubicBezier() 函数用于生成一个贝塞尔曲线函数，该函数接受 4 个参数，分别对应曲线上 2 个控制点的 X 和 Y 坐标，如下所示：
----- ----------- - ------------------------ ----- -------------- - ----------------- ---- ----- ---
这里我们生成了一个 x1 为 0.25、y1 为 0.1、x2 为 0.25、y2 为 1 的曲线函数，并将其赋值给 timingFunction。
应用曲线
有了曲线函数，我们就可以将它应用到我们需要缓动的 CSS 属性上。
以 transform: translateX() 属性为例：
-- ------ -- --------------- - ---------- -------------- ----------- --------- --- - -- ------ -- --------------------- - ---------- ------------------ --------------------------- ------------------ -
这里我们将 timingFunction 绑定到 .target-element:hover 伪类的 transition-timing-function 属性上，以实现鼠标悬停时元素从原位置向右平移 200 像素的动画效果。
示例代码
下面是一个完整的示例代码，通过鼠标悬停实现一个圆形元素的位移和颜色变化动画：
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
-------
------- -
------ ------
------- ------
-------------- ----
----------------- --------
----------- --------- --- ---------------- --- ---------- ---
-
------------- -
---------- ----------------- -----------
----------------- --------
----------- - - ---- --------
--------------------------- ------------------ ---- ----- ---
-
--------
-------
------
---- ---------------------
-------
-------总结
通过使用 cubic-bezier，我们可以轻松地实现各类缓动效果，增强用户的交互体验。在使用时，我们需要注意曲线函数的取值，可以通过网上各种贝塞尔曲线生成工具来获得各种曲线函数的取值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabcfb5cbfe1ea061087d