除了优雅◣之外，贝塞尔曲□□□线还因其□□定义和构□□□□造而具有□□□□良好的数□□学特性。难怪它们□□□□被广泛应●用于这么□□□□多领域：
· 作为绘图/设计工具：它们在矢量绘图软件中通常被称为“路径”。
· 作为表示曲线的格式：它们用于 SVG、字体和许多其他矢量图形格式。
· 作为数学函数：通常用于控制动画时间。
现在，如何使用贝塞尔曲线作为 CSS 的运动路径？
快速回顾
根据上下□□文，当提到“贝塞尔曲▼线”时，我们通常□□□□假设是二□□□□维三次贝✦塞尔曲线。
这样的曲线由四个点定义：
“三次”一词表示□□□□曲线的基□□□□础函数是◤三次多项△式。还有类似□□□□的“二次”贝塞尔曲□□□线，但控制点□□□少了一个。
问题
假设给定□□□□了一条任□□意的 2D 三次 Beizer 曲线，您将如何□□□□使用纯 CSS 动画为元□□□素设置动◎画，使其 沿着曲线□□□精确移动？
例如，您将如何重新创建此动画？
在本文中，我们将探□□索三种不□□□同风格的□□□方法。对于每个□□□□解决方案，我们将展□□□示一个交□□□□互式演示，然后解释□□□它是如何□□□工作的。幕后有很□□多数学计□□算和证明，但请放心，我们不会◢讲得很深。
开始吧！
方法一：时间扭曲
这是基本的想法：
- 设置@keyframes以将元素从曲线的一个端点移动到另一个端点。
- 分别扭曲每个坐标的时间，使用animation-timing-function.
使用cubic-bezier()具有正确□□参数的函□□数，我们可以□□□□创建任何◎三次贝塞□□□尔曲线的□□运动路径：
这个演示展示了一个纯 CSS 动画。然而使用了 canvas 和 JavaScript，它们有两个目的：
- 可视化底层贝塞尔曲线（红色曲线）。
- 允许使用典型的“路径”UI 调整曲线。
您可以拖□□□□动两个端□□□□点（黑点）和两个控□□制点（黑色方块）。JavaScript 代码将通□□过更新一□□□□些 CSS 变量相应□□□□地更新动·画。
这个怎么□□□运作
假设所需的三次贝塞尔曲线由四个点定义：p0、p1、p2和p3。我们设置 CSS 规则如下：
规则并确□□定元素的□□□开始和结□□□□束位置@keyframes。在我们有◢两个神奇△的 函数中，参数的计□□□□算使得两※者在任何◇时候都始□□□终具有正□□确的值。move-xmove-yanimation-timing-functioncubic-bezier()topleft
我会跳过□□□□数学，但我在这•里起草了□□□一个简短□□的证明，供你好奇□□□的数学头□□□脑使用。
讨论
这种方法□□□□应该适用□□□于大多数✦情况。您甚至可□□□以通过为★该值引入□□□□另一个动□□□画来制作 3D 三次贝塞○尔曲线 z 。
但是，有一些小警告：
- 由于被零除错误，当两个端点位于水平或垂直线上时，它不起作用。
- 它不支持阶数高于 的贝塞尔曲线 3。
- 动画时间选项有限。
- 我们使用 1/3 和 2/3 以上来实现线性时序。
- 您可以调□□□□整这两个◉值来调整□□时间，但与其他□□□方法相比□□它是有限◆的。稍后会详□□□□细介绍。
方法二：标准贝塞□□□尔曲线构•造
贝塞尔曲线的数学构造已经给了我们很好的提示。
一步一步，我们可以□□□确定所有□□移动点的□□□□坐标。p0首先，我们确定□□□在和之间□□□移动的绿□□□□点的位置p1：
可以用类似的方式构建额外的绿点。
接下来，我们可以像这样确定蓝点的位置：
冲洗并重复，最终我们会得到想要的曲线。
结论
在本文中，我们讨论□□了 2 种仅使用 CSS 动画沿着□□□贝塞尔曲□□□□线精确移○动元素的□□□□不同方法。
虽然所有 2 种方法都或多或少实用，但它们各有利弊：
- 方法 1 对于熟悉□□□计时函数 hack 的人来说□□□□可能更直◢观。但是它在○动画时间□□□□方面不太□□灵活。
- 对于熟悉贝塞尔曲线数学构造的人来说，方法 2 更有意义。动画时间也很灵活。另一方面，由于使用@property.
就这样！我希望你觉得这篇文章很有趣。请让我知道你的想法！
