利用CSS3的animation step屬性實現wifi動畫（結尾有彩蛋）

以前攢的滿滿的SVG+CSS3作動畫的技能一直未能放個大招，理由很簡單，由於自己從事行業的性質，軟件裏不能出現勞什子動畫這等花裏胡哨的東西，哦，不不，叫隱喻行爲引導的趣味化。用canvas實現了一個科技感滿滿的動態繪製背景的登陸頁面，由於渲染佔了20M內存，20M啊筒子們，那就是將近1個G啊，而後，就沒有而後了，誰讓客戶的機器還有1G內存的呢。至於惟一被使用的loading圖標，no，no，no，前端只用默認的，懶得改。最近在作的一個軟件有個刷卡的界面，就須要有一枚圖標來表示開啓「刷卡監聽」狀態，機會來了，終於有了實踐的機會，什麼？你說靜態圖片就能夠？不不，動態表達的含義更明確，就這麼愉快的決定了。

動畫拆解

由於只是一個wifi圖標，因此自己也簡單的很，動畫效果不過就是1→1+1→1+1+1→1+1→1這種循環，GIF來作簡單到沒朋友，三幀循環播放，隨隨便便搞個軟件都能實現，即便UI小白，大概看了這種圖標也會很輕蔑的不屑一顧的走開吧。
咳咳，那咱們用SVG來實現吼不吼？

##1.動靜分離
這裏又要祭出咱們的「動靜分離大法」了，靜態元素就是最下面的圈圈咯。而後動態元素就是上面那兩條槓槓咯。
先借助AI導三部分的路徑出來。

<path id="top" d=""/> <!--頂部槓槓-->
<path id="middle"  d=""/><!--中間槓槓-->
<path d=""/><!--底部圈圈-->複製代碼

##2.定義基礎的動畫
這種一閃一閃的動畫，第一時間想到的就是經過定義關鍵幀的透明度的改變來實現，不過這裏透明度opacity是兩個極值，0對應消失，1對應出現，那先把基礎的動畫寫出來。先對時間軸進行拆分，以肯定關鍵幀的時間點。

時間軸拆解

如上圖，關鍵幀時間肯定以後，能夠着手定義CSS樣式了。

<style>
@keyframes top{
0%{opacity:0}
30%{opacity:1}
70%{opacity:0}
}
@keyframes middle{
0%{opacity:0}
15%{opacity:1}
85%{opacity:0}
}
path{fill:#32b16c}
#top{animation:top 1s infinite}
#middle{animation:middle 1s infinite}
</style>複製代碼

此時獲得的動態SVG是下面這種

漸變的wifi動畫

徹底不是咱們想要的效果~~
由於animation會自動造成過渡效果的，相似作動畫時的補間，那麼問題來了，咱們要的但是無過渡的幀動畫效果，不是這枚變淡變深的貨，go on 繼續，你離成功只差一個屬性值了。

##3.steps參數的定義
先碎碎念一遍animation全部的屬性值，animation-name|動畫名稱，animation-duration|一個週期的時間，animation-timing-function|動畫速度曲線，animation-delay|動畫延遲開始的時間，animation-iteration-count|動畫播放次數，animation-direction|動畫是否下一週期逆向播放，animation-play-state|動畫運行狀態，animation-fill-mode|動畫時間外對象的狀態。
咱們在實際定義動畫時，固然不會這麼一一的去寫屬性名稱，而是直接寫屬性值。碼了這麼多字，是想說學習要知其然更要知其因此然，即便最後會放出能夠複用的代碼，但能看明白，而後本身去改去作豈不妙哉。
steps參數對應的是animation-timing-function|動畫速度曲線，咱們最經常使用的就是默認的線性，或者稍微天然的ease，這裏恰恰反行道而行之，steps()指定了兩個參數，一個爲整數值，表示跳幀動畫間隔數量，第二個爲start和end，默認爲end，表示這種跳幀動畫是在間隔的起點仍是終點變化。
固然了，對於咱們這個動畫而言，跳幀間隔是1，因此我設置steps(1)，對應動畫設置變成下面這種：

#top{animation:top 1s steps(1) infinite}
#middle{animation:middle 1s steps(1) infinite}複製代碼

那動畫效果呢，看一下：

跳幀動畫效果wifi

就是這種效果！
這裏簡單說一下，爲何不能設置成steps（1,start），若是讓跳幀動畫在間隔的起點變化，以中間形狀middle爲例，在0%→15%的間隔中，咱們設想中是在15%的時間點發生透明度opacity變成1的跳幀動畫，也就是時間間隔的終點，若是改爲起點，就意味着在0%的時間點透明度就變成1了，同理，15%→85%的時間段，在這個時間段的起點15%時就發生了透明度opacity變成0的跳幀動畫。
動畫時間軸就變成了下面介個樣子

動畫時間軸拆解

動畫效果放一下，能夠對比一下：

修改steps參數後的跳幀動畫

很明顯，中間形狀出現的時間很短，獲得了正好相反的效果（該出現時消失，該消失時出現）。
咱們順便對上面的代碼優化一下：當我把時間軸一分爲二，會發現是左右對稱的

左右對稱的時間軸

那能夠經過定義逆向播放屬性值alternate，而後精簡關鍵幀，記得同時動畫週期的時間也要相對縮短1/2，獲得代碼及註釋以下:

<svg>
<style>
@keyframes top{
0%{opacity:0}
30%{opacity:1}
}
@keyframes middle{
0%{opacity:0}
15%{opacity:1}
}
path{fill:#32b16c} <!--若是要設定三種不一樣顏色，在#top和#middle裏面單獨定義一個fill值-->
#top{animation:top 0.5s steps(1) alternate infinite}
#middle{animation:middle 0.5s steps(1) alternate infinite}
</style>
<path id="top" d=""/>
<path id="middle"  d=""/>
<path  d=""/>
</svg>複製代碼

着迷於SVG的緣由就在於，能夠隨隨便便替換個顏色，好比下面這種：

三種不一樣顏色的wifi圖標

##4.附贈steps延伸動畫
說好的結尾彩蛋來了！
固然了，把steps屬性用在咱們這個SVG動畫案例裏着實是大材小用了，「噠噠噠」，能想起什麼，沒錯！時鐘！用steps屬性實現的跳幀動畫來作個鬧鐘的指針動畫效果，這還差很少嘛。
先隨隨便便來一個鬧鐘以下：

時鐘基礎圖形

來，跟我再念一遍，「動靜分離大法」，拆成下面兩個部分，記得AI裏面分在不一樣圖層，搞好命名，別把本身弄暈了。

靜態圖形

指針層

導出的SVG我把代碼簡化一下以下：

<g id="base">
……此處爲若干鬧鐘底層形狀的組成代碼……
</g>
<path d=""/><!--時針對應的路徑-->
 <path d=""/><!--分針對應的路徑-->複製代碼

好了，如今這個鬧鐘裏面有兩個指針，就定義爲時針hour和分針minute吧，下面就要給這兩個指針定義旋轉動畫了。咱們都知道，分針轉一圈360度，時針才轉30度（1/12）。也就是說，在定義動畫週期時，hour對應的時間應該是minute的12倍。好比，我讓分針旋轉一圈的時間爲3s，那對應時針則是36s，既然是要實現跳幀動畫，記得加上steps屬性。動畫的CSS屬性以下

<style>
@keyframes hour{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@keyframes minute{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
#hour{animation:hour 36s steps(12) infinite; transform-origin: }/*這裏必定要定義旋轉動畫的中心點*/
#minute{animation:minute 3s steps(12) infinite;transform-origin:}
</style>複製代碼

看一下動畫效果如何：

時鐘動畫

嗯，噠噠噠的效果出來了，可是感受怪怪的有沒有？問題出在哪裏呢？想一想咱們平常生活中，這種跳幀效果的只有秒針對不對？時針和分針都是均勻轉速。而後咱們畢竟是示範動畫嘛，又不是真要作一個鬧鐘出來，爲了獲得好一點的效果，如今我讓指針變換一下身份，長的做爲秒針，而後模擬一下咱們真實的環境，1s走一步，而後短的做爲分針，那就須要改一下動畫裏面的屬性了。

#minute{animation:minute 60s steps(60) infinite;}複製代碼

秒針設置如上，動畫週期爲60s,steps(60)表示60個跳幀動畫。
分針既然是順滑的旋轉，那就去掉steps屬性，那分針轉一圈是60分鐘，因此動畫週期就是3600s咯。

#hour{animation:hour 3600s infinite; }複製代碼

我隨意截取了一段動畫看看效果:

秒動畫

固然啦，勤勞的小夥伴能夠把秒針，時針，分針都加上，而後我這種急性子讓時間跑得快快的，就獲得了下面這個動畫：

加速

有沒有種白駒過隙感慨逝水流年的憂桑？
個人動畫設置以下：

#hour{animation:hour 7200s infinite;} /*時針動畫設置*/
#minute{animation:minute 600s steps(60) infinite;}/*分針動畫設置*/
#second{animation:second 10s steps(60) infinite;} /*秒針動畫設置*/複製代碼

總之，關於時間週期的關係好好理一下，好比時針轉一圈是12個小時，因此是分針的12倍，分針是秒針的60倍。另外這裏若是秒針一圈的動畫時間給的過短，就看不出跳幀效果啦~好了，關於steps的延伸動畫到此爲止~有好的應用再更新。