三次贝塞尔（）函数如何工作？

Question

我目前正在尝试学习如何使用cubic-bezier()，但我有点挣扎。

据我了解，它有助于创建由 4 个点组成的贝塞尔曲线，比如说 P0、p1、p2、p3。

P0 和 p3 的坐标分别为 (0, 0) (1, 1)，它们代表曲线的起点和终点。

X代表时间，Y代表进度。

所以如果我的函数看起来像

transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);

在过渡时间的 7/10 之前，我的动画不应该真的很慢吗（所以在过渡时间的 7/10 时，我得到了 0.2 的进度）并且在其余时间非常快？ （所以从 7/10 -> 10/10 的时间应该有 0.8 的动画 - 所以应该很快）

这就是我假设它工作的方式，实际上它没有。 这是我的代码

.transitionTest {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 100px 0 0 100px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);
}

.transitionTest:hover {
    transform: rotate(180deg);
    background-color: red;
    width: 100px;
    height: 100px;
}

<div class="transitionTest"></div>

另外，如果我在这个函数中使用负值会发生什么？

Answer 1

在过渡时间的 7/10 之前，我的动画不应该真的很慢（所以在过渡时间的 7/10 处，我得到了 0.2 的进度）并且在其余时间非常快？

并非如此，因为点不会定义计算，但会定义曲线，然后您需要考虑曲线以找到进展。这是您的点的贝塞尔曲线：

黑色曲线是你的动画，一开始你会有点慢。在大约70% 的时间你将到达动画的50%，另一个50% 将从70% 到100%。

要得到你想要的（20% 到 70%），你需要像下面这样的东西

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.6, 0.05, 1, 0.2);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>

当然，它不是获得预期效果的唯一组合。有很多组合可以获得它。

获取有关计算的更多详细信息的相关问题：When exactly does an ease animation reach its midpoint?

一个有用的在线工具，可以绘制曲线并轻松了解正在发生的事情：https://www.desmos.com/calculator/d1ofwre0fr?lang=fr

另一个：https://cubic-bezier.com/

---

另外，如果我在这个函数中使用负值会发生什么？

没什么特别的。您的点将在区域 (0,0) (1,1) 之外，我们以相同的方式绘制曲线。示例：

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0, 0, 0, -1);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>