除了優雅之外，貝塞爾曲線還因其定義和構造而具有良好的數學特性。難怪它們被廣泛應用于這么多領域：
· 作為繪圖/設計工具：它們在矢量繪圖軟件中通常被稱為“路徑”。
· 作為表示曲線的格式：它們用于 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.

就這樣！我希望你覺得這篇文章很有趣。請讓我知道你的想法！