理解CSS3 Animation中的steps()

2018-06-19 18:43 更新
對CSS3 Animation,相信大家都不陌生了,其有八大屬性:
  • animation-name:動畫名稱
  • animation-duration:規(guī)定完成一個周期所花費的時間(秒或毫秒)
  • animation-delay:定義動畫開始前等待的時間,以秒或毫秒計。默認(rèn)值為0
  • animation-iteration-count:規(guī)定動畫被播放的次數(shù)(默認(rèn)1)
  • animation-play-state:規(guī)定動畫是否正在運行或停止(默認(rèn)是“running”,另外一個值“paused”)
  • animation-fill-mode:規(guī)定動畫結(jié)束時的狀態(tài)
  • animation-timing-function:規(guī)定動畫的速度曲線(默認(rèn)是ease)
  • animation-direction:規(guī)定動畫是否在下一個周期逆向地播放(默認(rèn)是“normal”)

對上面的屬性在這里就不一一講解了,相信一百度就有一大堆,你也可看這篇文章《CSS3 Animation動畫

今天主要來理解一下屬性animation-timing-function中的steps()函數(shù)。

animation的工作原理是通過將元素的CSS樣式從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)(我們稱為線性變化)。默認(rèn)情況下,它以ease方式(速度逐漸放慢)過渡,它會在每個關(guān)鍵幀之間插入補(bǔ)間動畫,所以動畫效果是連貫性的,但有些時候,我們不需要這種過渡效果,而是想實現(xiàn)跳躍式的效果,這時,steps()函數(shù)就出現(xiàn)了。

steps()是一個階躍函數(shù),用于把整個操作領(lǐng)域切分為相同大小的間隔,每個間隔都是相等的。

語法:

steps(number[, end | start])

參數(shù)說明:
  • number參數(shù)指定了時間函數(shù)中的間隔數(shù)量(必須是正整數(shù))
  • 第二個參數(shù)是可選的,可設(shè)值:startend,表示在每個間隔的起點或是終點發(fā)生階躍變化,如果忽略,默認(rèn)是end。

注意:第二個參數(shù)還有兩個內(nèi)置值,step-start等同于steps(1,start),動畫分成1步,動畫執(zhí)行時以左側(cè)端點為開始;step-end等同于steps(1,end):動畫分成1步,動畫執(zhí)行時以結(jié)尾端點為開始。

不理解上面的意思不要緊,來看看W3C官網(wǎng)上對steps()函數(shù)的剖析圖:

橫軸表示時間,縱軸表示動畫完成度(也就是0%~100%)。

第一個圖,steps(1, start)將動畫分為1段,跳躍點為start,也就是說動畫在每個周期的起點發(fā)生階躍(即圖中的空心圓 → 實心圓)。由于只有一段,后續(xù)就不再發(fā)生動畫了。

第二個圖,steps(1, end)同樣是將動畫分為1段,但跳躍點是end,也就是動畫在每個周期的終點發(fā)生階躍,也是圖中的空心圓 → 實心圓,但注意時間,是在終點才發(fā)生動畫。

第三個圖,steps(3, start)將動畫分為三段,跳躍點為start,動畫在每個周期的起點發(fā)生階躍(即圖中的空心圓 → 實心圓)。在這里,由于動畫的第一次階躍是在第一階段的起點處(0s),所以我們看到的動畫的初始狀態(tài)其實已經(jīng)是 1/3 的狀態(tài),因此我們看到的動畫的過程為 1/3 → 2/3 → 1 。

第四個圖,steps(3, end)也是將動畫分為三段,但跳躍點為end,動畫在每個周期的終點發(fā)生階躍(即圖中的空心圓 → 實心圓)。雖然動畫的狀態(tài)最終會到達(dá)100%,但是動畫已經(jīng)結(jié)束,所以100%的狀態(tài)是看不到的,因此我們最終看到的動畫的過程是0 → 1/3 → 2/3。

來看看step-startstep-end的動畫,相信你就會明白了:

先定義一個動畫:

 @keyframes move {   

  from {   

    background: purple;   /*紫色*/

  }   

  50%{   

    background: blue;   /*藍(lán)色*/

  }   

  100% {   

    background: red;   /*紅色*/

  }   

}

然后設(shè)置兩個正方形,再設(shè)置動畫參數(shù):

/*自定義變量,跟動畫無關(guān)*/

:root{   

  --time: 3s;   

}

/*第一個方塊*/

.step {   

  animation: move var(--time) step-start infinite;

}       

/*第二個方塊*/

.step2 {   

  animation: move var(--time) step-end infinite;   

}


相關(guān)文章:《必須了解的CSS變量(var)

效果:

從上面可以看到,設(shè)置了step-start的正方形的顏色變化是藍(lán)色與紅色相互切換(跳過了紫色,因為階躍點是start,也就是0s時已經(jīng)是50%的狀態(tài)了,因此直接顯示藍(lán)色);而設(shè)置了step-end的正方形的顏色變化是紫色與藍(lán)色相互切換(階躍點是end,最后沒有到紅色)。

注意timing-function屬性是作用于每兩個關(guān)鍵幀之間,而不是整個動畫,也就是說,steps()函數(shù)也是作用于兩個關(guān)鍵幀之間的,而不是整個keyframes動畫。

不懂?來看看steps(1, start)steps(3, start)兩個設(shè)置:

 @keyframes move {   

  from {   

    background: purple;   /*紫色*/

  }   

  50%{   

    background: blue;   /*藍(lán)色*/

  }   

  100% {   

    background: red;   /*紅色*/

  }   

}

/*第一個方塊*/  

.step {      

  animation: move var(--time) steps(1, start) infinite;  

}         

/*第二個方塊*/  

.step2 {      

  animation: move var(--time) steps(3, end) infinite;     

}

在上面的代碼中,有兩次動畫跳躍0%-50%和50%-100%。每次動畫“跳躍”的時候,對steps(1)來說,0%到50%有且只會變化一次,50%到100%也是只變化一次;而對steps(3)來說,從0%到50%會變化3次,從50%到100%也會變化3次。

在平常的開發(fā)中,用到steps()并不多,但還是能搞出不少有趣的東西。

(1)打字機(jī)



(2)狂奔的野牛



由于目前資料不多,如果你有更好的資料,歡迎在下方評論區(qū)告知!

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號