animation屬性中steps功能符怎么用

這篇文章給大家分享的是有關(guān)animation屬性中steps功能符怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、不只是連續(xù)的變化才叫動畫

我很早的時候有個錯誤認知，認為只有連續(xù)的變化才叫動畫；含笑半步癲那樣的效果不是動畫。

后來才明白，只要有軌跡可循，即使肉眼看上去是斷斷續(xù)續(xù)的，實際上也是動畫。

舉個例子，現(xiàn)有素材圖如下：

請問下面兩個圖形變化，哪個屬于動畫效果？

答案是：兩個都是。

我們?nèi)绻麚Q一種素材，大家就能知道非連續(xù)圖形變化也是動畫了。

效果分別為連續(xù)旋轉(zhuǎn)和斷續(xù)旋轉(zhuǎn)。

后面一張圖就是非連續(xù)變化下的效果，反而是我們實際項目中正確的菊花loading效果。

而實現(xiàn)的關(guān)鍵就是本文要深入介紹的steps()功能符。

二、一句話介紹steps()功能符

steps()功能符可以讓動畫不連續(xù)。

三、steps()在CSS3 animation中地位

steps()功能符和CSS3 animation中的cubic-bezier()功能符的地位和作用是一樣的，都可以作為animation-timing-function的屬性值。

只不過steps()更像是樓梯坡道，cubic-bezier()更像是無障礙坡道。如下圖示意：

然后steps()簡化出了step-start和step-end這兩個關(guān)鍵字；cubic-bezier()則有linear，ease，ease-in，ease-out以及ease-in-out。

cubic-bezier指三次貝塞爾曲線，具體可參見我之前文章“深度掌握SVG路徑path的貝塞爾曲線指令”。

steps()指逐步運動，下面進一步深入介紹。

四、搞清楚steps()中的start和end

steps()有一定的學習難度，總是搞不清楚，最主要就是start和end傻傻分不清楚。我這里自我挑戰(zhàn)下，看看能不能說清楚。

常見steps()用法舉例：

steps(5, end);
steps(2, start);

用steps()語法表示就是：

steps(number, position)

其中：

• number

• 數(shù)值。這個很好理解，表示把我們的動畫分成了多少段。

   

  假設(shè)有如下CSS3動畫keyframes，定義了一段從0~100px的位移：

  @keyframes move {
      0% { left: 0; }
      100% { left: 100px; }
  }

  假設(shè)我們的number值是5，則相當于把這段移動距離分成了5段，如下示意圖：

  

• position

• 關(guān)鍵字。表示動畫是從時間段的開頭連續(xù)還是末尾連續(xù)。支持start和end兩個關(guān)鍵字，含義分別如下：

• start：表示直接開始。

• end：表示戛然而止。是默認值。

為什么position非常難理解？

我認為兩個原因：

1. steps()屬于timing function，也就是時間函數(shù)，時間這個東西是虛的，看不見，摸不著，聯(lián)想乏力，所以認知成本高。這也是為什么那么多人都不珍惜時間的原因——無法感知。

2. CSS規(guī)范中對于start和end的定義是基于數(shù)學函數(shù)來的，函數(shù)這東西，多少人的噩夢，因為過于抽象，與現(xiàn)實難以關(guān)聯(lián)，所以，如果我們盯著定義去理解start和end，那就是死胡同，不歸路，就算現(xiàn)在弄懂了，過段時間再遇到，得了，全忘光光了，函數(shù)圖哪個是哪個，鬼才記得。下面這張圖就出自規(guī)范文檔：

   

   按照規(guī)范圖再細化解釋就是：

• start：表示直接開始。也就是時間才開始，就已經(jīng)執(zhí)行了一個距離段。于是，動畫執(zhí)行的5個分段點是下面這5個，起始點被忽略，因為時間一開始直接就到了第二個點：

  

• end：表示戛然而止。也就是時間一結(jié)束，當前距離位移就停止。于是，動畫執(zhí)行的5個分段點是下面這5個，結(jié)束點被忽略，因為等要執(zhí)行結(jié)束點的時候已經(jīng)沒時間了：

  

基于現(xiàn)實感知重新理解position！

萬物具有相對性。例如，蒼蠅眼中的人類動作都是慢動作，但是人類眼中的蒼蠅卻非常敏捷。

同樣的，start和end這里的開始和結(jié)束是相對于時間而言的，但是，如果站在人類可感知的具體事物而言，start和end卻是相反的含義。

所以，我們可以這么理解：

• start：表示結(jié)束。分段結(jié)束的時候，時間才開始走。于是，動畫執(zhí)行的5個分段點是后5個點：

  

• end：表示開始。分段開始的時候，時間跟著一起走。于是，動畫執(zhí)行的5個分段點是前5個點：

  

記住position參數(shù)的含義

牢記這么一句話：一切都是反的！start不是開始，而是結(jié)束；end不是結(jié)束，而是開始。

五、step-start和step-end

step-start和step-end是steps()功能符簡化關(guān)鍵字，注意，是step-*，step，后面沒有s。

其中，step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)。

step-start和step-end用中文短句解讀就是：一步到位和延遲到位，在實際項目中有什么作用呢？

對于只有0%,100%或from, to兩個關(guān)鍵時間幀的動畫，step-start和step-end是沒有任何需要使用的理由的。

如果是非等分，無法過渡的階梯動畫，則有使用價值，例如下面這個基于box-shadow實現(xiàn)的打點動畫效果：

訂單提交中

實現(xiàn)核心代碼如下（此打點方法最多排純CSS打點動畫第3位，更多見此文介紹和指引）：

<button>訂單提交中<span class="dotting"></span></button>

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    margin-right: 8px;
    box-shadow: 2px 0, 6px 0, 10px 0;
    animation: dot 4s infinite step-start both;
}
@keyframes dot {
    25% { box-shadow: none; }          /* 0個點 */50% { box-shadow: 2px 0; }         /* 1個點 */75% { box-shadow: 2px 0, 6px 0; }  /* 2個點 */ }

六、steps()與填充模式animation-fill-mode

animation-fill-mode有時候也會影響steps()的斷點表現(xiàn)，例如下面這個語句：

animation: move 5s forwards steps(5, end);

動畫只執(zhí)行一次，因為沒有設(shè)置infinite無限循環(huán)，而forwards雖然表示“前”，但同樣和現(xiàn)實表現(xiàn)是反的，也就是動畫結(jié)束時候元素保持動畫關(guān)鍵幀最后的狀態(tài)。于是，下面6個分段點都會執(zhí)行，整個動畫停止在第6個分段點上。

這顯然不是我們想要的，怎么處理呢？

可以消減分段個數(shù)和動畫運動的跨度，調(diào)整如下：

@keyframes move {
    0% { left: 0; }
    100% { left: 80px; }
}

也就是原來終點100px改成80px，同時CSS調(diào)用改成：

animation: move 5s forwards steps(4, end);

也就是原來steps(5, end)改成steps(4, end)，最后100%這一幀交給forwards即可！

感謝各位的閱讀！關(guān)于“animation屬性中steps功能符怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！