移動端實現動效如何設計實現？關于移動端實現動效，日常設計中是什么方法完成動畫實現？實現動畫的方式：設計輸出的方式大概可以分為位圖和矢量兩種，與常規的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF;矢量方式：Lottie、SVG動畫。

　　除了以設計提供的方式之外，還可以設計完成好demo，開發通過代碼進行實現例如：javascript直接實現、SVG(可伸縮矢量圖形)、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開將了。

　　實現動畫，首先還是得了解有哪些工具可以制作及合成相關的動效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。

　　實現動畫常用的工具：

　　Principle：可以輸出GIF、視頻等格式;

　　AE：可以輸出PNG序列，結合插件可以輸出GIF等等;

　　bodymovin：輸出json文件(也就是所謂的Lottie動畫);

　　iSparta：使用PNG序列合成APNG、GIF圖片格式除此之外;

　　Keyshape：主要是可以制作比較強大的路徑變換動畫，然后輸出svg動畫格式。

　　格式說明：

　　PNG序列：以單幀圖像呈現，輸出后會生成一個序列組的文件夾;

　　APNG：實際上是把PNG序列合成一張可動畫化的PNG，類似GIF，但相比GIF質量要高，圖片后綴依舊是“.png”。

　　GIF：可動的位圖，但質量較差，壓縮到臨界值時會出現鋸齒邊和白邊，個人比較不喜歡用。

　　Json(Lottie動畫)：實際上是一個用代碼描述的文檔，通過代碼描述路徑、節點的方式來完成動畫效果，與開發實際通過代碼實現動畫類似，通過bodymovin輸出后減少開發實現的時間，提高了開發實現的效率。

　　SVG動畫：與Lottie的方式比較類似，可以減少開發的動畫工作量，可以通過keyshape設計并導出，后綴為“.SVG”。

　　如何輸出文件？

　　接下來講解各個軟件輸出對應格式的方法，實際上操作不會太難，動效本身更重要的還是在于創意本身，因此當你把握了這些方式之后可以考慮進行創意設計。由于GIF文件多種工具都可以輸出不再作詳細說明。

　　1、PNG序列

　　在AE中制作好動畫，通過AE預渲染，然后選擇PNG序列，直接渲染出序列幀到本地文件夾。導出序列幀后需要進行壓縮，常用的是tinypng，壓縮后較小的文件再進行交付。

　　2、APNG

　　導出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時可以選擇幀率、循環次數(0為無限循環)、導出質量等。如下視頻

　　3、Lottie

　　AE中需要安裝bodymovin的插件，制作好動畫后，在窗口打開插件-bodymovin、選擇導出的位置，直接渲染一下，即可在本地生成json文件，插件帶有預覽能力，但較差。可以在https://lottiefiles.com/preview中進行預覽查看

　　4、SVG動畫

　　下載keyshape軟件，屬于付費軟件，可以下載14天試用版，可以通過圖形制作動效，可以設置自動補間，導出svg文件，導出時可以設置運動是循環或是一次。

　　5、格式大小比

　　通過試驗幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質量較差)>Lottie / SVG，json文件和SVG動畫文件比較接近，因此可以根據實際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質量也較差，因此建議慎重考慮。

　　移動端實現動效如何設計實現？學習用工具導出需要的格式的文件只是第一步，重要的是實現有創意的動效，不要過于強調工具應該培養自己思考設計的習慣。除了設計提供的方式之外，還可以設計完成好demo開發通過代碼進行實現。更多關于UI培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。