簡單的 docker SVG 動畫(無聊之作)

最近有點心血來潮,想做一個關於docker的一箇中間層,以便更好的實現熱部署以及docker容器的週期監控,當然本章不是這個內容,只是因爲這個而做的一個小的加載動畫。                                                                   

工具:

  1. svgator(現爲商業化的svg動畫工具)

  2. easyicon(圖標的下載站點) 

結果:

      還是先看結果爲好,看完就可以關貼了(滑稽)

20180804235202156.gif

製作過程:

20180805113916152.png

20180805132934653.png

 最後導出就好,這裏是最簡單的一個svg動畫製作,用到了動畫屬性中的透明度變化,從而製造了一個個集裝箱的堆積動畫。

  1. 整理之前icon站點下載的docker圖標,主要是爲了能在 svgator中有明確的id區分,以及整體局部的這樣一個分類好做局部動畫,所以用了<g></g>這樣一個組標記來區分。目錄如下:

  2. 設置動畫時長,由於是想實現每一個集裝箱的不斷的裝載,所以這裏計算了集裝箱的數量來做了一個時長爲5秒。

  3. 設置關鍵幀(動畫的狀態轉折點)每一秒都設置,特別要注意的是幀與幀之間的狀態,這個可以看下我每一幀的每一個集裝箱的狀態,不過還是需自己動手才能體會到。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章