怎么在CSS中反轉貝塞爾曲線

今天就跟大家聊聊有關怎么在CSS中反轉貝塞爾曲線，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由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;
}

看完上述內容，你們對怎么在CSS中反轉貝塞爾曲線有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。