跳起來：你不知道的CSS Animation新的Steps()值

mingde 發(fā)布于2019-08-30 11:04 / 2098人閱讀

摘要：通過從到位移的改變，將一組動畫幀組成一個連續(xù)的動畫。其余的動畫幀將均勻的分部在兩個狀態(tài)的中間。例如會將整個動畫平均分配為三個動畫幀，即，和。

CSS動畫中有一個animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個steps()階躍函數(shù)，這篇文章我們來討論steps()函數(shù)新增的四種取值。到目前為止，這新增的幾個取值僅在Firefox 65+中可用，也就是說在其他瀏覽器實現(xiàn)之前，演示只能在Firefox中實現(xiàn)。

steps()函數(shù)中新增的四個值是：

jump-start

jump-end

jump-both

jump-none

這些新增的值與已有的值有什么區(qū)別？它們適合在什么時候使用？下面的內(nèi)容將詳細(xì)介紹。

Easings和steps()函數(shù)

首先，我們后退一步，看一看animation-timing-function屬性中easings取值和steps()函數(shù)的傳統(tǒng)取值。

Easings可以改變一個transition或者animation或者Web Animations API中動畫的節(jié)奏，這個節(jié)奏是連續(xù)性的。

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}

@keyframes move {
  100% {
    transform: translateX(200px);
  }
}

通過一個linear easing，元素會以均勻的速度移動。如果我們改變?yōu)閑ase-in，元素的移動節(jié)奏就會變?yōu)閯傞_始慢，到動畫快結(jié)束時加速變快。

Steps則不同，我們可以將動畫劃分為特定數(shù)量的動畫幀，所以，如果改變easing為steps(2)，那么動畫將只有兩個動畫幀，開始幀和結(jié)束幀。

steps()函數(shù)的第二個（可選）參數(shù)指定在每個間隔的起點或是終點發(fā)生階躍變化。之前支持start和end兩個值，現(xiàn)在又增加了四個新值。

Start和End

在新增的四個值中，其中有兩個其實是原來start和end的代替值：

jump-start === start

jump-end === end

jump前綴幫助我們更有效地解釋單詞start和end。當(dāng)我們使用start或jump-start時，我們告訴動畫跳過起始位置。同樣的，使用end或jump-end時，我們希望跳過結(jié)束位置。

你可以將steps(n)理解為一個linear均速移動的動畫元素按照指定的時間間隔進(jìn)行快照截取，動畫的過程就是一個快照接著一個快照顯示的過程。當(dāng)我們指定一個動畫為steps(4, jump-start)時，意味著將一個平滑的動畫過程平均劃分為四部分，然后取每個部分的開始狀態(tài)進(jìn)行快照截取，并將這些快照顯示出來。同樣的，steps(5, jump-end)意味將一個平滑動畫平均劃分為五個部分，取每個部分的結(jié)束狀態(tài)進(jìn)行快照截取，最后將這些快照顯示出來。

旋轉(zhuǎn)

當(dāng)我們想到時鐘上的秒針時，就可以更清楚的認(rèn)識到start和end兩個值的作用 - 秒針需要運行60秒旋轉(zhuǎn)一圈（從0度到360度），也就是steps(60)。無論使用jump-start/start還是jump-end/end都可以實現(xiàn)一圈又一圈的連續(xù)旋轉(zhuǎn)，但是，如果jump-start/start和jump-end/end都顯示每個動畫幀的起始狀態(tài)和結(jié)束狀態(tài)，那么秒針就會在最頂部0度的位置停留兩次，這明顯是不符合常規(guī)的。

雪碧圖

steps()另一個重要的應(yīng)用是雪碧圖動畫。通過從translateX(0)到translate(-100%) 位移的改變，將一組動畫幀組成一個連續(xù)的動畫。

jump-none

與jump-start，jump-end只是命名方式的改變不同，這是一個新增的steps取值。

有時候我們并不需要跳過動畫的任何一個狀態(tài)。新的取值jump-none就支持同時保留動畫的起始狀態(tài)和結(jié)束狀態(tài)。對于一個包含至少2幀的動畫來說，起始狀態(tài)和結(jié)束狀態(tài)都將會顯示出來。其余的動畫幀將均勻的分部在兩個狀態(tài)的中間。例如steps(3, jump-none)會將整個動畫平均分配為三個動畫幀，即0%，50%和100%。

移動一個元素

一個簡單的例子就是在屏幕上移動一個元素，讓它以steps階躍的方式從A點移動到B點。以前我們只能跳過開始狀態(tài)或者結(jié)束狀態(tài)，并沒有一種簡單的方法讓動畫同時顯示兩種狀態(tài)。而現(xiàn)在我們有了jump-none：

使用steps()方法之前的取值，仍然能夠?qū)崿F(xiàn)這一點，但是需要做一些額外的數(shù)學(xué)計算。現(xiàn)在則變得簡單了，因為你知道動畫的起始狀態(tài)和結(jié)束狀態(tài)都會被顯示。

Opacity

不透明度Opacity屬性的動畫同樣可以從新的取值jump-none中受益，假如我們需要實現(xiàn)一個不透明度Opacity從0到1階躍重復(fù)變化的動畫（即閃爍效果），使用start或end值，將永遠(yuǎn)看不到完全不透明或完全透明的狀態(tài)。但是jump-none則不會出現(xiàn)這種問題，一個被設(shè)置為steps(2, jump-none)的動畫會實現(xiàn)類似on/offk的效果：

jump-both

我們可以跳過階躍動畫的起始狀態(tài)，可以跳過結(jié)束狀態(tài)，可以兩個狀態(tài)都不跳，那么就剩下jump-both了，它表示起始和結(jié)束的兩個狀態(tài)都跳過。

我還沒有想到適合這個取值的用途，如果你想到了可以在下面評論告訴我。

瀏覽器支持

Webkit和EdgeHTML內(nèi)核的瀏覽器到目前為止還不支持新增的steps函數(shù)值，所以我們僅僅是用于學(xué)習(xí)實驗，不要將它們使用在實際項目中。