css3 動畫（二）貝塞爾曲線

前言

上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設置的屬性：

1. 有過渡效果的屬性
2. 過渡時長
3. 過渡函數？
4. 過渡時延

其中，一、2 以及 4 都挺好理解的，可是 3 是個什麼東西？其實 3 是 css3 中的 timing-function，其中 3 有兩種類型的值：

• cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線
• steps(number_of_steps, direction)

本篇就總結一下 cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線

貝塞爾曲線簡介

貝塞爾曲線（Bezier curve）是計算機圖形學中重要的參數曲線，它經過一個方程來描述一條曲線。根據方程的最高階數，能夠分爲線性貝塞爾曲線、二次貝塞爾曲線、三次貝塞爾曲線以及更高次的貝塞爾曲線。
貝塞爾曲線掃盲

在 css3 中使用的 cubic-bezier() 函數，是一個 三次貝塞爾曲線函數。

三次貝塞爾曲線中四個點，在 cubic-bezier() 中：

• 第一個點 p0(0, 0)和最後一個點 p3(1, 1)是固定座標的
• p1(x1, y1) 和 p2(x2, y2) 是傳入 cubic-bezier() 函數中的參數的。其中 x∈[0, 1]，y 能夠不在 [0, 1] 區間內，但最大值最好不要大於 1.5，最小值不要小於 -0.5
• 0 和 1 分別表示 0% 和 100%

cubic-bezier(x1, y1, x2, y2) 接受的參數即是 p1(x1, h1) 和 p2(x2, y2) 的座標。

那咱們怎麼獲取咱們想要的貝塞爾曲線呢？進這個 網站

css3 貝塞爾曲線表明的含義

在上面那個 網站 中，咱們能夠經過拖拽 p1 和 p2 點，來改變兩點的座標，從而產生一條曲線。

那麼這條曲線表明什麼含義呢？

• 橫座標：時間。時間是勻速增長的
• 縱座標：進度。隨着時間的增長，進度也會增長
• 斜率：速度

因爲 時間是勻速增長的，進度增長的快慢是受斜率（速度）影響的。因此這是一條表示進度變化快慢的速度曲線

這個 進度 在 css 中，實際指的就是樣式變化先後的值。如：

• width 從 100px 變爲 200px，縱座標的起點就爲 100px，終點爲 200px
• opacity 從 0 變爲 1，縱座標的起點就爲 0，終點爲 1
• ...

transition + cubic-bezier() 實現平拋動畫

最終效果以下：
https://codepen.io/reai3041/p...

分析

咱們知道，平拋運動能夠分解爲兩個方向的運動：

• 水平方向：勻速運動
• 垂直方向：加速度不變的勻加速運動

這樣，咱們就能夠分解爲水平和垂直方向上的 過渡效果：

<div class="ball"></div>

.ball {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  left: 80px;
  top: 30px;
}
/* 終點 */
.ball.end {
  left: 180px;
  top: 230px;
  transition: left 0.2s linear, top 0.2s cubic-bezier(.48,0,.94,.28);
}

經過改變 left 和 top 值：

• left 應用 linear 速度曲線（勻速）
• top 應用 cubic-bezier(.48,0,.94,.28) 速度曲線（加速度不變的加速運動）

來得到平拋運動的動畫效果

其中，cubic-bezier() 函數的參數，能夠在 網站 裏自定義點的位置，而後獲得本身想要的速度變化曲線。

在平拋運動垂直方向的速度曲線大概是這樣子的：

這樣，咱們就知道了 cubic-bezier() 函數的參數（圖片中的這條曲線，其實就能夠看作是實際的平拋的曲線）

代碼及效果：
https://codepen.io/reai3041/p...

總結

css3 中的貝塞爾曲線其實很簡單：一條以 時間爲橫座標，以 進度爲縱座標 的 和速度相關 的曲線，它表示了 過渡/動畫 中間狀態的 變化快慢。

下一篇：css3 動畫（三）animation 簡介