网站前端之纯CSS贝塞尔曲线运动路径

来源： All文章

发布时间：2023-04-19 16:04:30

　　除了优雅之外，贝塞尔曲线还因其定义和构造而具有良好的数学特性。难怪它们被广泛应用于这么多领域：

　　作为绘图/设计工具：它们在矢量绘图软件中通常被称为路径。

　　作为表示曲线的格式：它们用于SVG、字体和许多其他矢量图形格式。

　　作为数学函数：通常用于控制动画时间。

　　现在，如何使用贝塞尔曲线作为CSS的运动路径？

根据上下文，当提到贝塞尔曲线时，我们通常假设是二维三次贝塞尔曲线。

　　这样的曲线由四个点定义：

　　三次一词表示曲线的基础函数是三次多项式。还有类似的二次贝塞尔曲线，但控制点少了一个。

假设给定了一条任意的2D三次Beizer曲线，您将如何使用纯CSS动画为元素设置动画，使其沿着曲线精确移动？

　　例如，您将如何重新创建此动画？

　　在本文中，我们将探索三种不同风格的方法。对于每个解决方案，我们将展示一个交互式演示，然后解释它是如何工作的。幕后有很多数学计算和证明，但请放心，我们不会讲得很深。

　　开始吧！

这是基本的想法：

使用cubic-bezier()具有正确参数的函数，我们可以创建任何三次贝塞尔曲线的运动路径：

　　这个演示展示了一个纯CSS动画。然而使用了canvas和JavaScript，它们有两个目的：

您可以拖动两个端点（黑点）和两个控制点（黑色方块）。JavaScript代码将通过更新一些CSS变量相应地更新动画。

假设所需的三次贝塞尔曲线由四个点定义：p0、

　　1、p2和p3。我们设置CSS规则如下：

　　规则并确定元素的开始和结束位置@keyframes。在我们有两个神奇的函数中，参数的计算使得两者在任何时候都始终具有正确的值。move-xmove-yanimation-timing-functioncubic-bezier()topleft

　　我会跳过数学，但我在这里起草了一个简短的证明，供你好奇的数学头脑使用。

这种方法应该适用于大多数情况。您甚至可以通过为该值引入另一个动画来制作3D三次贝塞尔曲线z。

　　但是，有一些小警告：

贝塞尔曲线的数学构造已经给了我们很好的提示。

　　一步一步，我们可以确定所有移动点的坐标。p0首先，我们确定在和之间移动的绿点的位置p1：

　　可以用类似的方式构建额外的绿点。

　　接下来，我们可以像这样确定蓝点的位置：

　　冲洗并重复，最终我们会得到想要的曲线。

在本文中，我们讨论了2种仅使用CSS动画沿着贝塞尔曲线精确移动元素的不同方法。

　　虽然所有2种方法都或多或少实用，但它们各有利弊：

就这样！我希望你觉得这篇文章很有趣。请让我知道你的想法！

* 文章来源于网络，如有侵权，请联系客服删除处理。