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

成都創(chuàng)新互聯(lián)主營壽陽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),壽陽h5成都小程序開發(fā)搭建,壽陽網(wǎng)站營銷推廣歡迎壽陽等地區(qū)企業(yè)咨詢

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

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

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

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

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

答案是：兩個(gè)都是。

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

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

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

而實(shí)現(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這兩個(gè)關(guān)鍵字；cubic-bezier()則有linear，ease，ease-in，ease-out以及ease-in-out。

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

steps()指逐步運(yùn)動，下面進(jìn)一步深入介紹。

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

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

常見steps()用法舉例：

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

用steps()語法表示就是：

steps(number, position)

其中：

• number

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

   

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

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

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

  

• position

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

• start：表示直接開始。

• end：表示戛然而止。是默認(rèn)值。

為什么position非常難理解？

我認(rèn)為兩個(gè)原因：

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

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

   

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

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

  

• end：表示戛然而止。也就是時(shí)間一結(jié)束，當(dāng)前距離位移就停止。于是，動畫執(zhí)行的5個(gè)分段點(diǎn)是下面這5個(gè)，結(jié)束點(diǎn)被忽略，因?yàn)榈纫獔?zhí)行結(jié)束點(diǎn)的時(shí)候已經(jīng)沒時(shí)間了：

  

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

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

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

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

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

  

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

  

記住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用中文短句解讀就是：一步到位和延遲到位，在實(shí)際項(xiàng)目中有什么作用呢？

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

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

訂單提交中

實(shí)現(xiàn)核心代碼如下（此打點(diǎn)方法最多排純CSS打點(diǎn)動畫第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個(gè)點(diǎn) */50% { box-shadow: 2px 0; }         /* 1個(gè)點(diǎn) */75% { box-shadow: 2px 0, 6px 0; }  /* 2個(gè)點(diǎn) */ }

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

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

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

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

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

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

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

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

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

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

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

本文名稱：animation屬性中steps功能符怎么用
瀏覽地址：http://chinadenli.net/article4/jgjsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營銷推廣、企業(yè)建站、網(wǎng)站排名、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)