如何反转CSS中的贝塞尔曲线

首先来看一看我之前写的一个 CSS 轮播动画效果，为了让切换时动画的过渡更加的平滑我在 animation-timing-function 属性中并没有使用 CSS 提供的各种关键词，而使用了 cubic-bezier（贝塞尔）函数。

贝塞尔函数乍一看会让人困惑摸不着头脑，但如果使用得当，它可以为动画的用户体验增添一种更棒的感觉。

在构建这个轮播动画的时候，我意识到当我给一页添加了显示的贝塞尔函数时，它前一页隐藏的贝塞尔函数则是反向的。我觉得我们分享这篇文章的内容是非常值得的，因为创建一个贝塞尔曲线并反转它可能看起来很棘手，但实际上非常的简单。

了解基础的 easing

首先，Easing 这个词用来描述元素动画在时间线上的加速与减速节奏。我们可以将其绘制成一个图表，其中 x 轴是时间，y 轴是动画的进度。linear 是没有加速或减速（一直以相同的速度移动）的图形，表现在图上就是一条直线：

非线性的 Easing 会让动画更自然、更逼真。我们可以对 CSS 中的 transition 和 animation 应用各种的 easing，我们可以将这些值设置在 transition-timing-function 或者 animation-timing-function 属性上。总共有五个关键字可以设置：

• linear – 上面已经介绍了
• ease-in – 动画开始时很慢，并随着它的进行而加速。
• ease-out – 动画开始很快，最后减速。
• ease-in-out – 动画开始缓慢，中间加速，最后减速。
• ease – 默认值，与 ease-in-out 的动画过程相反。

了解 cubic-bezier

如果上面介绍的关键字值都不适合我们的动画，我们可以使用 cubic-bezier 贝塞尔函数创建自定义的曲线。下面是一个例子：

.my-element {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

我们可以将这些属性简写为一个，如下所示：

.my-element {animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

你会注意到 cubic-bezier 贝塞尔函数有四个值。这四个值是绘制曲线所需的两对坐标。这些坐标代表什么意思呢？如果你使用过 Illustrator，那么控制曲线大小和方向的向量点对你来说就会很熟悉。这就是我们用 cubic-bezier 贝塞尔函数绘制曲线所必须的点。

我们并不需要知道贝塞尔曲线背后的所有数学知识。因为有大佬为我们创建了方便的工具，例如 LeaVerou 的 cubic-bezier.com，这个网站中我们可以可视化的创建一条贝塞尔曲线并复制它的坐标点值。我的轮播效果的贝塞尔曲线就是用这个工具创建的，它看起来是这样的：

在这里，可以看到我们需要的两个点：cubic-bezier(x1, y1, x2, y2)。

在正反两个方向上应用 easing

上面的轮播图中应用了正反两个方向的动画 – 单击左箭头时，当前项目向右滑出视图，同时下一个项目向左滑入；如果点击右箭头，就会发生相反的情况。我最初的假设是，可以简单地反转动画使项目以相反方向滑出，如下所示：

.my-element--reversed {animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95) reverse;
}

这里有一个问题：给 animation 添加 reverse 也反转了 easing 曲线！所以，现在我的动画在一个方向看起来很好，但在反方向上是不对的。

下面的演示中，第一个框显示正方向的动画，第二个框显示添加 reverse 后的情况。

你可以看到这两个动画的感觉完全不一样。第一个盒子在开始加速，并且随着动画的进展缓慢地减速，而第二个盒子开始时相当缓慢，然后在停止之前有一个加速的过程。

我们有两种方法来解决这个问题：

1. 创建一个新的 keyframe animation 来显示动画，然后设置为相同的 easing。对于简单的动画这样设置无可厚非，但是如果遇到复杂的动画该怎么办呢？创建反向的动画需要做更多的工作，而且很容易出错。
2. 我们可以使用相同的 keyframe animation（并设置 animation-direction:reverse）并反转贝塞尔曲线，这样就实现了在正反两个方向上使用同一个 easing 的效果。这种方法并不难。

反转贝塞尔曲线，对应在坐标轴中就是将整体图形旋转 180 度：

通过简单的数学计算就可以得到反转后的点坐标，具体方法是：交换两个坐标点，并将每个值都用 1 减去。

例如，正方向的坐标是：

x1, y1, x2, y2

那么，反方向的坐标就通过下面的公式得出：

(1 - x2), (1 - y2), (1 - x1), (1 - y1)

在下面的演示中，第三个框是我们需要的效果：元素向相反的方向滑动，但是它与正方向的动画曲线是一样的。

我们来看看如何计算反向的贝塞尔曲线。

用 CSS 自定义属性来计算反向曲线

我们可以使用 CSS 自定义属来计算新的曲线！首先将每个值赋给一个变量：

:root {
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
}

然后我们可以使用这些变量来计算新值：

:root {--reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
}

现在，如果我们对第一组变量做任何的更改，反向曲线点将会被自动计算出来。为了在检查和调试代码时更容易发现问题，我喜欢将这些新值分配到它们自己的变量中：

:root {
  /* 正向原始值 */
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
  
  /* 反向计算值 */
  --x1-r: calc(1 - var(--x2));
  --y1-r: calc(1 - var(--y2));
  --x2-r: calc(1 - var(--x1));
  --y2-r: calc(1 - var(--y1));
  
  --reversedCurve: cubic-bezier(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));
}

现在剩下的就是将新的曲线应用到反向动画中：

.my-element--reversed {animation: slide 3s var(--reversedCurve) reverse;
}

为了更直观并切可视化的做到这些，我创建了一个小工具来计算一个贝塞尔曲线的反向值。输入原始坐标值就可以自动获得反向曲线的值：Reverse cubic-bezier 工具