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