最近有點心血來潮,想做一個關於docker的一箇中間層,以便更好的實現熱部署以及docker容器的週期監控,當然本章不是這個內容,只是因爲這個而做的一個小的加載動畫。
工具:
svgator(現爲商業化的svg動畫工具)
easyicon(圖標的下載站點)
結果:
還是先看結果爲好,看完就可以關貼了(滑稽)
製作過程:
最後導出就好,這裏是最簡單的一個svg動畫製作,用到了動畫屬性中的透明度變化,從而製造了一個個集裝箱的堆積動畫。
整理之前icon站點下載的docker圖標,主要是爲了能在 svgator中有明確的id區分,以及整體局部的這樣一個分類好做局部動畫,所以用了<g></g>這樣一個組標記來區分。目錄如下:
設置動畫時長,由於是想實現每一個集裝箱的不斷的裝載,所以這裏計算了集裝箱的數量來做了一個時長爲5秒。
設置關鍵幀(動畫的狀態轉折點)每一秒都設置,特別要注意的是幀與幀之間的狀態,這個可以看下我每一幀的每一個集裝箱的狀態,不過還是需自己動手才能體會到。