CSS3 animation – steps 函數(shù)詳解

這幾天在看一些 css3 動畫的源碼實(shí)現(xiàn)時(shí),發(fā)現(xiàn) css 代碼的 animation 當(dāng)中有一個比較陌生的單詞 steps ,在源碼中是這么寫的:
animation: thunder 2s steps(1, end) infinite;
查閱相關(guān)資料后發(fā)現(xiàn) steps 函數(shù)是 animation-timing-function
屬性的一個值,那這個函數(shù)相較于其他值比如 ease , linear 的區(qū)別在哪里呢。
steps
在查閱相關(guān)資料后才發(fā)現(xiàn)自己之前對 animation-timing-function
了解不夠充分,實(shí)際上 animation-timing-function
的 function 指的是 steps() 和 cubic-bezier( ) 即貝塞爾曲線函數(shù)這兩個函數(shù),像 linear , ease 這些值其實(shí)是 cubic-bezier()
函數(shù)的特殊值, steps() 函數(shù)同樣也有兩個特殊值: step-start
和 step-end
。在了解這些前提后,下面來具體分析 steps 函數(shù)的作用。
實(shí)際上 steps 函數(shù)和 cubic-bezier
函數(shù)分別對應(yīng)動畫的兩種形式:跳躍式和連貫式。回顧平常我們是怎么使用 cubic-bezier
函數(shù)的:
div { animation: move 1s linear infinite alternate; } @keyframes move { 0% { margin-left: 0; } 30% { margin-left: 50px; } 100% { margin-left: 100px; } }
我們只需要在 @keyframes 中定義關(guān)鍵幀, cubic-bezier
函數(shù)會幫助我們在關(guān)鍵幀之間補(bǔ)幀使其成為流暢的動畫,但有時(shí)候我們不希望動畫連貫的播放,而是跳躍式的播放,那我們就需要借助 steps 函數(shù)了。
steps函數(shù)接收兩個參數(shù): number 和 position 。 number 是正整數(shù), position 有兩個值: start 和 end 。前面我們提到 steps 的兩個特殊值: step-start 和 step-end ,實(shí)際上它們分別代表 steps(1, start) 和 steps(1, end) 。那這兩個參數(shù)分別代表什么含義呢?
number: number 表示動畫被分成了多少段,比如上述例子表示 div 從 0px 移動到 100px 的這一整段過程一共被分成 4 段。
position: position 參數(shù)可選,默認(rèn)為 end 。 start 與 end 的含義是什么呢,我的理解是: number 會將整個動畫過程分成多段或者說多個周期, start 表示動畫的狀態(tài)會在每個周期的起始點(diǎn)瞬間完成變化,而 end 則表示動畫的狀態(tài)會在每個周期的結(jié)束點(diǎn)瞬間完成變化。這里附上 W3C 官方文檔上的一張圖片:
上圖的坐標(biāo)系中,x軸代表時(shí)間,y軸代表動畫的進(jìn)度,在這張圖中我們需要注意的是實(shí)心圓點(diǎn),實(shí)心圓點(diǎn)表示的是動畫所處的狀態(tài)。我們來看第一張圖,它表示的是 steps(1, start) 。根據(jù)前面的解釋,整段動畫將會作為一段也就是只有一個周期,而指定了 start 參數(shù)使得動畫會在周期的起始點(diǎn)狀態(tài)發(fā)生改變,所以我們可以看到第一個實(shí)心圓點(diǎn)的坐標(biāo)為 (0,1) 。對于第二張圖片,由于指定了 end ,所以動畫的狀態(tài)會在周期的結(jié)束點(diǎn)突變,因此對應(yīng)兩個實(shí)心圓點(diǎn)的坐標(biāo)為 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同樣的道理,這里就不具體分析了。
接下來為了更加直觀的感受 steps 函數(shù)的作用,舉幾個例子來加深理解:
這里先舉一個連貫動畫來作為參考,部分代碼如下:
div { width: 100px; height: 100px; background-color: red; animation: move 2s linear; } @keyframes move { 0% { margin-left: 0; } 100% { margin-left: 200px; } }
效果如下:
可以看到紅方塊是經(jīng)過 2s 勻速運(yùn)動到終點(diǎn),然后回到起始位置
接下來是 steps(1, start) 的例子:
div { width: 100px; height: 100px; background-color: red; animation: move 2s step-start; }
效果如下:
可以看到在我點(diǎn)擊刷新的一瞬間方塊就到達(dá)了終點(diǎn),然后經(jīng)過 2s 后回到起始位置
再來看看 steps(1, end) 的例子:
div { width: 100px; height: 100px; background-color: red; animation: move 2s step-end; }
效果如下:
可以看到當(dāng)點(diǎn)擊刷新時(shí)方塊并沒有運(yùn)動,這是因?yàn)榉綁K會在 2s 后瞬間移動到 200px 的位置,然后動畫結(jié)束,回到起始位置,由于這個過程特別快,肉眼是看不到的,所以看上去就好像方塊沒有運(yùn)動。如果想要停留在終點(diǎn)只需要給 div 加上 animation-fill-mode: forwards
即可。
我們再來看看分成多段的情況,首先 start 分成多段:
div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, start); }
效果如下:
上述例子我們將 4s 動畫分成 4 個周期,方塊會在每個周期起始點(diǎn)也就是 0s ,1s ,2s ,3s 處發(fā)生位移,從上述效果圖我們也可以看出,在我點(diǎn)擊刷新瞬間就完成了一次狀態(tài)變化,然后在 3s 后達(dá)到終點(diǎn),在終點(diǎn)待了 1s 到動畫結(jié)束,回到起始位置。
再來看 end 分成多段的情況:
div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, end); }
效果如下:
指定 end 會使動畫狀態(tài)在每個周期的結(jié)束點(diǎn)發(fā)生變化,對應(yīng)例子就是在 1s ,2s ,3s ,4s 處發(fā)生變化。從上述效果圖我們也可以看出方塊在我點(diǎn)擊刷新的 1s 后開始運(yùn)動,在 4s 方塊移動到終點(diǎn)的瞬間由于動畫結(jié)束的原因又移動到起始位置,所以會產(chǎn)生方塊好像沒有移動到終點(diǎn)的錯覺。
總結(jié)
以上所述是小編給大家介紹的CSS3 animation – steps 函數(shù)詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
CSS3動畫之利用requestAnimationFrame觸發(fā)重新播放功能
這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發(fā))CSS3動畫,代碼簡單易懂,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-11- 這篇文章主要介紹了css中用animation的steps屬性制作幀動畫,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-25
- 本篇介紹的animation屬性和傳統(tǒng)的動畫制作一樣,能控制幀的每一步,制作出更強(qiáng)大的動畫效果。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看2018-12-25
- 這篇文章主要介紹了css3的動畫特效之動畫序列(animation) 的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-22
- 這篇文章主要為大家詳細(xì)介紹了CSS3中Animation動畫屬性用法,教大家如何使用animation動畫,感興趣的小伙伴們可以參考一下2016-07-04
CSS3中animation實(shí)現(xiàn)流光按鈕效果
這篇文章主要介紹了CSS3中animation實(shí)現(xiàn)流光按鈕效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-21