除了優(yōu)雅之外，貝塞爾曲線還因其定義和構(gòu)造而具有良好的數(shù)學(xué)特性。難怪它們被廣泛應(yīng)用于這么多領(lǐng)域：
· 作為繪圖/設(shè)計工具：它們在矢量繪圖軟件中通常被稱為“路徑”。
· 作為表示曲線的格式：它們用于 SVG、字體和許多其他矢量圖形格式。
· 作為數(shù)學(xué)函數(shù)：通常用于控制動畫時間。
現(xiàn)在，如何使用貝塞爾曲線作為 CSS 的運(yùn)動路徑？
 

快速回顧

根據(jù)上下文，當(dāng)提到“貝塞爾曲線”時，我們通常假設(shè)是二維三次貝塞爾曲線。
這樣的曲線由四個點定義：
“三次”一詞表示曲線的基礎(chǔ)函數(shù)是三次多項式。還有類似的“二次”貝塞爾曲線，但控制點少了一個。

問題

假設(shè)給定了一條任意的 2D 三次 Beizer 曲線，您將如何使用純 CSS 動畫為元素設(shè)置動畫，使其  沿著曲線精確移動？
例如，您將如何重新創(chuàng)建此動畫？



在本文中，我們將探索三種不同風(fēng)格的方法。對于每個解決方案，我們將展示一個交互式演示，然后解釋它是如何工作的。幕后有很多數(shù)學(xué)計算和證明，但請放心，我們不會講得很深。
開始吧！

方法一：時間扭曲

這是基本的想法：

• 設(shè)置@keyframes以將元素從曲線的一個端點移動到另一個端點。
• 分別扭曲每個坐標(biāo)的時間，使用animation-timing-function.

使用cubic-bezier()具有正確參數(shù)的函數(shù)，我們可以創(chuàng)建任何三次貝塞爾曲線的運(yùn)動路徑：



這個演示展示了一個純 CSS 動畫。然而使用了 canvas 和 JavaScript，它們有兩個目的：

• 可視化底層貝塞爾曲線（紅色曲線）。
• 允許使用典型的“路徑”UI 調(diào)整曲線。

您可以拖動兩個端點（黑點）和兩個控制點（黑色方塊）。JavaScript 代碼將通過更新一些 CSS 變量相應(yīng)地更新動畫。

這個怎么運(yùn)作


 

假設(shè)所需的三次貝塞爾曲線由四個點定義：p0、p1、p2和p3。我們設(shè)置 CSS 規(guī)則如下：
規(guī)則并確定元素的開始和結(jié)束位置@keyframes。在我們有兩個神奇的 函數(shù)中，參數(shù)的計算使得兩者在任何時候都始終具有正確的值。move-xmove-yanimation-timing-functioncubic-bezier()topleft
我會跳過數(shù)學(xué)，但我在這里起草了一個簡短的證明，供你好奇的數(shù)學(xué)頭腦使用。

討論

這種方法應(yīng)該適用于大多數(shù)情況。您甚至可以通過為該值引入另一個動畫來制作 3D 三次貝塞爾曲線 z 。
但是，有一些小警告：

• 由于被零除錯誤，當(dāng)兩個端點位于水平或垂直線上時，它不起作用。

• 它不支持階數(shù)高于 的貝塞爾曲線 3。
• 動畫時間選項有限。
  • 我們使用 1/3 和 2/3 以上來實現(xiàn)線性時序。
  • 您可以調(diào)整這兩個值來調(diào)整時間，但與其他方法相比它是有限的。稍后會詳細(xì)介紹。

方法二：標(biāo)準(zhǔn)貝塞爾曲線構(gòu)造

貝塞爾曲線的數(shù)學(xué)構(gòu)造已經(jīng)給了我們很好的提示。




一步一步，我們可以確定所有移動點的坐標(biāo)。p0首先，我們確定在和之間移動的綠點的位置p1：



可以用類似的方式構(gòu)建額外的綠點。
接下來，我們可以像這樣確定藍(lán)點的位置：



沖洗并重復(fù)，最終我們會得到想要的曲線。



 

結(jié)論

在本文中，我們討論了 2 種僅使用 CSS 動畫沿著貝塞爾曲線精確移動元素的不同方法。
雖然所有 2 種方法都或多或少實用，但它們各有利弊：

• 方法 1 對于熟悉計時函數(shù) hack 的人來說可能更直觀。但是它在動畫時間方面不太靈活。
• 對于熟悉貝塞爾曲線數(shù)學(xué)構(gòu)造的人來說，方法 2 更有意義。動畫時間也很靈活。另一方面，由于使用@property.

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