手撕紅黑樹 ·看完上一章的小伙伴們一定會有許多疑問，我明明定義了7幀：紅橙黃綠青藍(lán)紫。
為什么最后一幀紫色就是出不來呢？或者說必須做一些特殊處理才會出來呢？
steps()和step-end分別代表什么含義呢？為什么一個帶括號一個不帶括號呢？
接下來我們將一一為大家揭曉答案。
1 steps()
step的英文原意是邁步，在這里可以理解為步驟。
既然是步驟，那就要指定分幾步進(jìn)行。所以括號里面就要寫入一個數(shù)字，這個數(shù)字代表要分多少步來進(jìn)行這段動畫。
拿我們定義過的change-color動畫來舉例：
/* 定義動畫：動畫名(change-color) */
@keyframes change-color {
/* 第1步 */ from /* 0% */ { color: red } /* 紅 */
/* 第2步 */ 16% { color: orange } /* 橙 */
/* 第3步 */ 32% { color: yellow } /* 黃 */
/* 第4步 */ 48% { color: green } /* 綠 */
/* 第5步 */ 64% { color: cyan } /* 青 */
/* 第6步 */ 80% { color: blue } /* 藍(lán) */
/* 第7步 */ to /* 100% */ { color: purple } /* 紫 */
}
可以看到整個動畫一共分為了七個步驟，那么是不是我們要在 step() 的括號里寫上一個7呢？
- steps(7)
你要是這么想的話，那你可就大錯特錯了。括號里面的數(shù)字不是指從0%到100%之間要被分成幾步，
而是從第一步到第二步要被分為幾步。同理，第二步到第三步，第三步到第四步，……，第N步到最后一步。
而我們想要的效果是：從紅變橙、從橙變黃、……、再從藍(lán)變紫。
所以我們只需要第一步到第二步、第N步到第N+1步之間只經(jīng)歷一個步驟就夠了，所以應(yīng)該寫成：
- steps(1)
steps()括號里一共可以寫兩個參數(shù)，第一個參數(shù)就是一個數(shù)字，代表把這次過渡分成幾步。
第二個參數(shù)不寫的話默認(rèn)就是end，也就是說：
steps(1) = steps(1, end)
聰明的小伙伴們肯定想了，既然有end，那肯定就會有start嘛！
對沒錯，第二個參數(shù)除了end以外還可以寫start。知道了它的第二個參數(shù)，就比較好理解step-start和start-end了。
2. step-start 和 step-end
其實(shí)step-start和step-end并不是什么新的概念，而是steps(1, start)和steps(1, end)實(shí)在是太常用了。
在編程界有個不成文的規(guī)定：某樣事物如果使用次數(shù)很高的話通常都會出現(xiàn)一個縮寫來替代他。
我知道有的小伙伴肯定會有疑問：這真的是縮寫么？我怎么沒感覺出來縮了幾個字母呢？
其實(shí)如果仔細(xì)數(shù)一數(shù)的話還是縮了那么一點(diǎn)點(diǎn)的。
而之所以多出來兩個縮寫其實(shí)真實(shí)的目的并不是為了讓你少打那么一兩個字母，這樣的縮寫并沒有什么太大意義。
他真正的意義在于單復(fù)數(shù)：
step-start和step-end里的step沒有s!!!
而steps()是有s的!!!
學(xué)過英語的同學(xué)應(yīng)該還記得單復(fù)數(shù)這個概念吧？(說不記得的同學(xué)，你的英語老師棺材板快壓不住了)。
不記得沒關(guān)系，咱們一起來復(fù)習(xí)一下：一樣?xùn)|西如果只有一個的話(比如你有一部手機(jī))那么這個單詞的后面就不用加s；
反之如果一樣?xùn)|西有很多的話(你有好幾部手機(jī))那么這個單詞的后面就要加上s來表示。
而steps()并不知道你會在括號里面寫幾，所以人家是帶s的，復(fù)數(shù)！
那么問題來了，最最常用的還就是steps(1)，單數(shù)！
可是單數(shù)怎么能帶s呢？于是乎就有了step-start和step-end它倆了。
3. start 和 end
有的同學(xué)可能早就按耐不住自己躁動的內(nèi)心：道理我都懂，語法我也都知道，這個start和end的意思我小學(xué)也背過，但是我就是想知道start和end究竟是控制著哪方面的開始和結(jié)束！幀動畫的最后一幀顯示不出來到底和他倆有沒有點(diǎn)啥關(guān)系呢？
答案是：當(dāng)然有關(guān)系！
咱們正常人肯定都是這么想的：一個動畫我分為了七步，假如我讓動畫運(yùn)行七秒，那么每一秒鐘就要走一步，七秒過后我應(yīng)該會看見七幀。
這么想很正常對吧！聽起來挺是那么回事的啊！
但實(shí)際上是大家的認(rèn)知和電腦的認(rèn)知不一致，所以導(dǎo)致了這場誤會。
那么接下來我就帶領(lǐng)大家一起揭曉一下人類和電腦互相之間都是怎么定義幀動畫的：
/* 定義動畫：動畫名(change-color) */
@keyframes change-color {
/* 第1步 */ from { color: red } /* 紅 */
/* 第2步 */ 16% { color: orange } /* 橙 */
/* 第3步 */ 32% { color: yellow } /* 黃 */
/* 第4步 */ 48% { color: green } /* 綠 */
/* 第5步 */ 64% { color: cyan } /* 青 */
/* 第6步 */ 80% { color: blue } /* 藍(lán) */
/* 第7步 */ to { color: purple } /* 紫 */
}
假如我們用steps(1)來運(yùn)行這個動畫，那么：
人類的想法：
? 第一步：紅色
? 第二步：橙色
? 第三步：黃色
? 第四步：綠色
? 第五步：青色
? 第六步：藍(lán)色
? 第七步：紫色
而電腦的想法：
? 第一步：紅色到橙色
? 第二步：橙色到黃色
? 第三步：黃色到綠色
? 第四步：綠色到青色
? 第五步：青色到藍(lán)色
? 第六步：藍(lán)色到紫色
steps()就是控制著這第一步到第二步、第N步到第N+1步。
steps(1)就代表了第一步到第二步：紅色到橙色之間用一步就走完。
同理，steps(10)就代表了第一步到第二步：紅色到橙色之間之間要慢慢過渡10次。
用一張圖片來方便大家理解：
圖片就可以很明顯看出steps()控制的到底是哪個地方。
仔細(xì)數(shù)一數(shù)，steps()是不是要比紅橙黃綠青藍(lán)紫(我們定義過的幀)少一個?。?/p>
所以我們最后一幀才會顯示不出來，那么start和end又代表的是什么含義呢？
從圖中可以看出每一個steps()里面都包含了兩個步驟，start和end就是控制這個的。
假如說從紅到橙需要一秒鐘，那么start就表示第一秒鐘的開始階段就從紅變到橙色了，由于第一秒的一開始(也就相當(dāng)于零秒)就紅變橙了，也就是說紅色還沒來得及展示就變成橙色了，所以用戶壓根就看不見這個紅色，結(jié)果就是start會丟失第一幀。
end也是同理，紅色持續(xù)一秒，在第一秒的最后階段才會變成橙色，這樣的話我們就看得見紅色了。然后來到第二幀，第二幀是從橙變黃。
橙色持續(xù)一秒然后在這一秒的最后階段變黃、黃變綠、綠變青、青變藍(lán)、然后就來到了最后一幀：藍(lán)變紫。
藍(lán)色在本次動畫的最后一秒一開始就持續(xù)一秒，然后紫色在最后一秒的最后階段才會出現(xiàn)，但是到了最后一秒得最后階段就意味著本次動畫即將結(jié)束了，紫色也是剛出現(xiàn)就即將消失，所以用戶也看不見紫色，結(jié)局就是end會丟失最后一幀。
這里附上一張w3c的step工作原理圖：
拿 steps(1, end) 那張圖來舉例：假如第一步是從紅到黃，那么圖中的實(shí)心小圓點(diǎn)代表了紅色，然后圓點(diǎn)后面的線段代表紅色持續(xù)的時間，空心小圓點(diǎn)代表該變成黃色但還沒變成黃色，直到下一個實(shí)心小圓點(diǎn)才會變成黃色，依此類推。
從這張圖的走勢就可以很好的看出start和end的各自丟幀情況，start的第一幀是空心的，end的最后一幀雖然是實(shí)心的，但后面已經(jīng)沒有了線段，也就是代表最后一幀沒有任何的運(yùn)行時間，所以它們分別會丟失第一幀和最后一幀。
3. 小結(jié)
我知道這很難理解，畢竟人類腦子里面想的都是這種方式：
而計(jì)算機(jī)確是這么運(yùn)行的：
所以在本篇的一開始我才會讓大家先記住結(jié)論，防止大家看不懂就不想繼續(xù)往下看了。
在前面也說了解決方案，大家有時間的可以來試一試，有利于更進(jìn)一步的去理解這段令人費(fèi)解的內(nèi)容。
2025 imooc.com All Rights Reserved |