如何使用CSS函數創建高級動畫？

作為前端開發人員，網站上微妙的細節變化通常比別人會更關注。我一直注意到的一件事是網站上的動畫的流暢性。動畫對于用戶體驗來說是非常好的，有時我們可以一些有趣的動畫來留住用戶。

創建高級動畫聽起來是一個很難的話題，但好消息是，在CSS中，可以將多個簡單的動畫相互疊加，以創建一個更復雜的動畫

在本文中，我們會學習如下幾點：

• 什么是貝塞爾曲線，以及如何用一行CSS來創建一個 “復雜”的動畫
• 如何將動畫相互疊加以創建一個高級動畫
• 如何通過應用上面學到的兩點來創建一個過山車動畫

什么是貝塞爾曲線？

CSS中的 cubic-bezier 函數是一個緩動函數，可以讓我們完全控制動畫在時間上的表現。下面是官方的定義：

貝塞爾緩動函數是一種由四個實數定義的緩和函數，指定了貝塞爾曲線的兩個控制點P1和P2，其端點P0和P3分別固定在（0, 0）和（1, 1）。P1和P2的x坐標被限制在[0, 1]范圍內。

什么是緩動函數？

線性曲線

想象兩個點P0和P1，其中P0是動畫的起點，P1是結束點?，F在想象另一個點在兩點之間線性移動，如下所示：

這就是所謂的線性曲線，也是最簡單的動畫。

二次貝塞爾曲線

如下圖所示，有三個點。P0、P1和P2。我們想讓動畫從P0移動到P2。在這種情況下，P1是一個控制點，控制動畫的曲線。

二次方貝塞爾概念：

• 在P0和P1之間以及P1和P2之間（用灰線表示）連接虛線
• 點Q0沿著P0和P1之間的直線移動。同時，點Q1沿著P1和P2之間的直線移動
• 在Q0和Q1之間連接一條虛線（用綠線表示）
• 在Q0和Q1開始移動的同時，點B開始沿著綠線移動，B點所走的路徑就是動畫路徑

請注意，Q0、Q1和B不以相同的速度移動。它們都必須在同一時間開始，并在同一時間完成它們的路徑。因此，每一個點都是根據它所移動的線長以適當的速度移動的。

三次貝塞爾曲線

三次貝塞爾曲線由4個點組成。P0, P1, P2和P3。動畫開始于P0，結束于P3。P1和P2是我們的控制點。

三次貝賽爾的工作原理如下：

• 在（P0, P1）、（P1, P2）和（P2, P3）之間連接虛線，由灰線表示
• 點Q0、Q1和Q2分別沿直線（P0，P1）、（P1，P2）和（P2，P3）移動
• 在（Q0, Q1）和（Q1, Q2）之間連接虛線，它們由綠線表示。
• 點R0和R1分別沿直線（Q0, Q1）和（Q1, Q2）移動
• 連接R0和R1之間的線（用藍線表示）
• 最后，B點沿著R0和R1之間的連接線移動，B點所走的路徑就是動畫路徑

如果你想更好地了解三次體貝塞爾的工作原理，建議你看看這個desmos鏈接。玩玩控制點，看看動畫如何隨時間變化。(注意，鏈接中的動畫是由黑線表示的）。

疊加動畫

有很多步驟的大動畫可以被分解成多個小動畫。在 css 中，通過添加animation-delay屬性來實現這一點。計算延遲很簡單，把你要計算動畫延遲的那個動畫之前的所有動畫的時間加起來。

例如：

animation: movePointLeft 4s linear forwards, movePointDown 3s linear forwards;

這里，我們有兩個動畫，movePointLeft和movePointDown。movePointLeft的動畫延遲是零，因為它是我們想先運行的動畫。movePointDown的動畫延遲是4秒，因為movePointLeft將在這段時間后完成。

因此，animation-delay屬性：

animation-delay: 0s, 4s;

注意，如果有兩個或更多的動畫同時開始，它們的動畫延遲將是一樣的。此外，當你計算即將開始的動畫的延遲時，把它們視為一個動。例如 ：

animation: x 4s linear forwards, y 4s linear forwards, jump 2s linear forwards;

假設x和y同時開始。在這種情況下，x和y的動畫延遲都將為零，而?jump?動畫的延遲將為4秒（而不是8秒?。?。

animation-delay: 0s, 0s, 4s;

創建過山車

掌握了上面的知識，是時候應用一下了。

了解動畫

過山車路徑由三部分組成：

• 滑動部分
• 循環部分
• 還會有一些動畫，在上面的兩個動畫之間創造水平空間

我們將首先創建一個簡單的球，作為我們過山車的 “車”。

hmtl 部分：

<div id="the-cart" class="cart"></div>

css 部分：

.cart {
  background-color: rgb(100, 210, 128);
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: absolute;
  left: 10vw;
  top: 30vh;
}

滑動部分

創建小球滑動的部分可以用cubic-bezier函數來完成! 這個動畫是由2個動畫組成的，一個是沿x軸的動畫，另一個是沿y軸的動畫。X軸動畫是一個沿X軸的普通線性動畫。它的關鍵幀如下:

@keyframes x {
  to {
    left: 40vw;
  }

將其添加到球路徑的?animation 屬性中，如下所示:

animation: x 4s linear forwards

y軸動畫是我們將使用cubic-bezier函數的部分。首先定義動畫的關鍵幀。我們希望起始點和結束點之間的差異很小，以至于球達到的高度幾乎相同。

@keyframes y {
  to {
    top: 29.99vh;
  }
}}

現在讓我們來思考一下cubic-bezier函數。我們希望我們的路徑先向右緩慢移動，然后當它滑動時，它應該走得更快。

• 向右緩慢移動意味著$P1$將沿x軸移動。所以，我們知道它是在（V，0）。
  • 我們需要選擇一個合適的V，使我們的動畫緩慢地向右移動，但又不能太多，以免占用整個空間。在這種情況下，我發現0.55最適合。
• 為了達到滑動效果，我們需要將P2向Y軸下移（負值），所以P2=（X，-Y）。
  • Y應該是一個大值。在這種情況下，我選擇?Y=5000。
  • 為了得到X，我們知道我們的動畫速度在滑動時應該更快，在再次上升時應該更慢。所以，X越接近于零，動畫在滑動時就越陡峭。在這種情況下，讓X = 0.8。

現在，我們得到了一個cubic-bezier函數：

cubic-bezier(0.55, 0, 0.2, -800).

為動畫屬性添加關鍵幀:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards;

這是我們動畫的第一部分，所以動畫延遲為零。我們應該添加一個animation-delay屬性，因為從下面的動畫開始，動畫的開始時間將與第一個動畫不同。

animation-delay: 0s, 0s;

點擊預覽

添加水平空間

在做循環之前，球應該沿著X軸移動一小會兒，所以兩個動畫之間有空間。

定義關鍵幀

@keyframes x2 {
  to {
    left: 50vw;
  }
}

把它添加到?animation 屬性中：

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards;

這個動畫應該在滑動動畫之后開始，而滑動動畫需要4秒，因此，動畫延遲將是4秒。

animation-delay: 0s, 0s, 4s;

點擊預覽

循環部分

要在CSS中創建一個圓（循環），我們需要把圓移到循環的中心，然后從那里開始做動畫。圓的半徑是100px，所以我們把圓的位置改為top: 20vh（30是期望的半徑（這里是10vh））。然而，這需要在滑動動畫完成后發生，所以我們將創建另一個持續時間為0秒的動畫，并添加一個合適的動畫延遲。

關鍵幀：

@keyframes pointOfCircle {
  to {
    top: 20vh;
  }
}

添加到 animation 動畫中：

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards;

添加動畫延遲,?4.5s:

animation-delay: 0s, 0s, 4s, 4.5s;

循環本身

創建一個循環動畫:

創建一個關鍵幀，將球移回原來的位置，然后旋轉球。

@keyframes loop {
  from {
    transform: rotate(0deg) translateY(10vh) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateY(10vh) rotate(360deg);
  }
}

添加到 animation 中：

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards;

添加動畫延遲，這里是4.5s:

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s;

點擊預覽

添加水平空間

快完成了，最后 只需要在動畫之后沿著x軸移動球，這樣球就不會像上圖中那樣在循環之后完全停止。

關鍵幀:

@keyframes x3 {
  to {
    left: 70vw;
  }
}

添加到 animation 中：

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards,
    x3 2s linear forwards;

加上適當的延遲，這里是7.5s:

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;

點擊預覽

總結

以上就是我們介紹了如何結合多個關鍵幀來創建一個復雜的動畫路徑。我們還介紹了貝塞爾以及如何使用它們來創建你自己的緩動函數。建議大家自己多多動手，才能更好的掌握 css 動畫。