如何反转CSS中的贝塞尔曲线的实现方法

如何反转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后的情况。

你可以看到这两个动画的感觉完全不一样。

第一个盒子在开始加速，并且随着动画的进展缓慢地减速，而第二个盒子开始时相当缓慢，然后在停止之前有一个加速的过程。

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

• 创建一个新的keyframe animation来显示动画，然后设置为相同的easing。
  

  
  

  对于简单的动画这样设置无可厚非，但是如果遇到复杂的动画该怎么办呢？创建反向的动画需要做更多的工作，而且很容易出错。
  

  
  

• 我们可以使用相同的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工具

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。