成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

pumpkin9 / 1768人閱讀

摘要：歡迎移步我的博客閱讀實(shí)用的貝塞爾曲線前言在了解之前，你需要對(duì)中的動(dòng)畫效果有所認(rèn)識(shí)，它是和中一個(gè)重要的內(nèi)容。本體簡(jiǎn)介又稱三次貝塞爾，主要是為生成速度曲線的函數(shù)，規(guī)定是。

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

在了解 cubic-bezier 之前，你需要對(duì) CSS3 中的動(dòng)畫效果有所認(rèn)識(shí)，它是 animation-timing-function 和 transition-timing-function 中一個(gè)重要的內(nèi)容。

本體 簡(jiǎn)介

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

我們可以從下圖中簡(jiǎn)要理解一下 cubic-bezier：

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

P0：默認(rèn)值 (0, 0)

P1：動(dòng)態(tài)取值 (x1, y1)

P2：動(dòng)態(tài)取值 (x2, y2)

P3：默認(rèn)值 (1, 1)

我們需要關(guān)注的是 P1 和 P2 兩點(diǎn)的取值，而其中 X 軸的取值范圍是 0 到 1，當(dāng)取值超出范圍時(shí) cubic-bezier 將失效；Y 軸的取值沒(méi)有規(guī)定，當(dāng)然也毋須過(guò)大。

最直接的理解是，將以一條直線放在范圍只有 1 的坐標(biāo)軸中，并從中間拿出兩個(gè)點(diǎn)來(lái)拉扯（X 軸的取值區(qū)間是 [0, 1]，Y 軸任意），最后形成的曲線就是動(dòng)畫的速度曲線。

使用

在測(cè)試?yán)又校?/p> 




  
  Document

我們可以在瀏覽器中看到，當(dāng)鼠標(biāo)移到元素上時(shí)，元素開(kāi)始向右移動(dòng)，開(kāi)始比較慢，之后則比較快，移開(kāi)時(shí)按原曲線回到原點(diǎn)。

在例子中，當(dāng)我們不為 transition 添加 cubic-bezier 或是其他 timing-function 時(shí)，默認(rèn)的速度曲線是 ease，此時(shí)的速度曲線是：

那么讓我們?cè)诖a中加入 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);
}
...

再刷新頁(yè)面觀察效果，會(huì)看到動(dòng)畫在執(zhí)行過(guò)程中有一段很緩慢的移動(dòng)，前后的速度相似，此時(shí)的運(yùn)動(dòng)曲線是：

幾個(gè)常用的固定值對(duì)應(yīng)的 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（來(lái)回的緩沖效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

效果參考

文章所提到的動(dòng)畫效果可以在下面站點(diǎn)中看到，當(dāng)然你也可以大膽嘗試：

英文版在線預(yù)覽（Lea Verou）

中文版在線預(yù)覽（更多效果）

在線生成系列

作者的《Loading》庫(kù)

參考

MDN
W3School

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49788.html

相關(guān)文章

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

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

    Anchorer 評(píng)論0 收藏0

  • css3 動(dòng)畫（二）貝塞爾曲線

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

    soasme 評(píng)論0 收藏0

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

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

    zhangqh 評(píng)論0 收藏0

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

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

    nicercode 評(píng)論0 收藏0

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

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

    amc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

pumpkin9

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<