實用的 CSS — 貝塞爾曲線(cubic-bezier)

pumpkin9 發布于2019-08-01 15:08 / 1759人閱讀

摘要：歡迎移步我的博客閱讀實用的貝塞爾曲線前言在了解之前，你需要對中的動畫效果有所認識，它是和中一個重要的內容。本體簡介又稱三次貝塞爾，主要是為生成速度曲線的函數，規定是。

歡迎移步我的博客閱讀：《實用的 CSS — 貝塞爾曲線(cubic-bezier)》

前言

在了解 cubic-bezier 之前，你需要對 CSS3 中的動畫效果有所認識，它是 animation-timing-function 和 transition-timing-function 中一個重要的內容。

本體簡介

cubic-bezier 又稱三次貝塞爾，主要是為 animation 生成速度曲線的函數，規定是 cubic-bezier(, , , )。

我們可以從下圖中簡要理解一下 cubic-bezier：

從上圖我們需要知道的是 cubic-bezier 的取值范圍:

P0：默認值 (0, 0)

P1：動態取值 (x1, y1)

P2：動態取值 (x2, y2)

P3：默認值 (1, 1)

我們需要關注的是 P1 和 P2 兩點的取值，而其中 X 軸的取值范圍是 0 到 1，當取值超出范圍時 cubic-bezier 將失效；Y 軸的取值沒有規定，當然也毋須過大。

最直接的理解是，將以一條直線放在范圍只有 1 的坐標軸中，并從中間拿出兩個點來拉扯（X 軸的取值區間是 [0, 1]，Y 軸任意），最后形成的曲線就是動畫的速度曲線。

使用

在測試例子中：




  
  Document

我們可以在瀏覽器中看到，當鼠標移到元素上時，元素開始向右移動，開始比較慢，之后則比較快，移開時按原曲線回到原點。

在例子中，當我們不為 transition 添加 cubic-bezier 或是其他 timing-function 時，默認的速度曲線是 ease，此時的速度曲線是：

那么讓我們在代碼中加入 cubic-bezier(.17, .86, .73, .14)：

...
.animation {
  ...
  -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
       -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
          transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

再刷新頁面觀察效果，會看到動畫在執行過程中有一段很緩慢的移動，前后的速度相似，此時的運動曲線是：

幾個常用的固定值對應的 cubic-bezier 值以及速度曲線

ease：cubic-bezier(.25, .1, .25, 1)

liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)

ease-in：cubic-bezier(.42, 0, 1, 1)

ease-out：cubic-bezier(0, 0, .58, 1)

ease-in-out：cubic-bezier(.42, 0, .58, 1)

In Out . Back（來回的緩沖效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

效果參考

文章所提到的動畫效果可以在下面站點中看到，當然你也可以大膽嘗試：

英文版在線預覽（Lea Verou）

中文版在線預覽（更多效果）

在線生成系列

作者的《Loading》庫

參考

MDN
W3School

GPU云服務器云服務器貝塞爾曲線貝塞爾曲線詳解貝塞爾曲線整理實時顯示的曲線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49788.html

實用的 CSS — 貝塞爾曲線(cubic-bezier)

摘要：歡迎移步我的博客閱讀實用的貝塞爾曲線前言在了解之前，你需要對中的動畫效果有所認識，它是和中一個重要的內容。本體簡介又稱三次貝塞爾，主要是為生成速度曲線的函數，規定是。歡迎移步我的博客閱讀：《實用的 CSS — 貝塞爾曲線(cubic-bezier)》前言在了解 cubic-bezier 之前，你需要對 CSS3 中的動畫效果有所認識，它是 animation-timing-fun...

Anchorer 2019-08-30 12:51 評論0 收藏0
css3 動畫（二）貝塞爾曲線

摘要：根據方程的最高階數，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數，是一個三次貝塞爾曲線函數。三次貝塞爾曲線中四個點，在中第一個點和最后一個點是固定坐標的和是傳入函數中的參數的。前言上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設置的屬性： ...

soasme 2019-08-30 15:54 評論0 收藏0
如何反轉CSS中的貝塞爾曲線

摘要：我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線，這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。首先來看一看我之前寫的一個CSS輪播動畫效果，為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞，而使用了cubic-bezier（貝塞爾）函...

zhangqh 2019-08-30 11:06 評論0 收藏0
如何反轉CSS中的貝塞爾曲線

摘要：我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線，這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。首先來看一看我之前寫的一個CSS輪播動畫效果，為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞，而使用了cubic-bezier（貝塞爾）函...

nicercode 2019-08-02 15:14 評論0 收藏0
如何反轉CSS中的貝塞爾曲線

摘要：我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線，這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。首先來看一看我之前寫的一個CSS輪播動畫效果，為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞，而使用了cubic-bezier（貝塞爾）函...

amc 2019-08-23 17:59 評論0 收藏0