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

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

在這節課中，我們會學習如下幾點：

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

什么是貝塞爾曲線

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

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

什么是緩動函數？

線性曲線

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

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

二次貝塞爾曲線

如下圖所示，有三個點。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;

地址：https://codepen.io/smashingmag/pen/VwxXBQb

添加水平空間

在做循環之前，球應該沿著??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;

地址：https://codepen.io/smashingmag/pen/dyemExY

循環部分

要在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;

地址：https://codepen.io/smashingmag/pen/mdLxZdR

添加水平空間

快完成了，最后 只需要在動畫之后沿著??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;

地址：https://codepen.io/smashingmag/pen/wvjmLKp

總結

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

來源：https://www.smashingmagazine.com/2022/10/advanced-animations-css/