2020-8-25 資深UI設計者
一直有很多朋友會問一些關于移動端實現動效的方法,平時也會給大家做一些解答,但是可能沒有那么系統性,這次抽點時間總結歸納下這方面的內容,跟大家分享下我日常設計中是如何完成動畫實現的。
設計輸出的方式大概可以分為位圖和矢量兩種,與常規的圖片輸出并無太大的差異。位圖方式:PNG序列幀、APNG、GIF;矢量方式:Lottie、SVG動畫。
當然除了以設計提供的方式之外,還可以設計完成好demo,開發通過代碼進行實現例如:javascript直接實現、SVG(可伸縮矢量圖形)、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。
實現動畫,首先還是得了解有哪些工具可以制作及合成相關的動效,我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。
接下來講解下各個軟件輸出對應格式的方法,實際上操作并不會太難,動效本身更重要的還是在于創意本身,因此當你把握了這些方式之后可以考慮進行創意設計。
由于GIF文件多種工具都可以輸出,這里就不再作詳細說明
1. PNG序列
具體如下視頻
2. APNG
如上導出到PNG序列幀,拖拽到iSparta軟件中,合成即可。合成時可以選擇幀率、循環次數(0為無限循環)、導出質量等。如下視頻
3. Lottie
更多Lottie相關可以前往https://lottiefiles.com/學習,里面有豐富等Lottie動畫效果和一些插件下載,去研究下吧
4. SVG動畫
建議大家自己下載軟件后嘗試
5. 格式大小比
通過試驗幾種格式的大小大概是排序依次為:PNG序列>APNG>GIF(質量較差)>Lottie / SVG,json文件和SVG動畫文件比較接近,因此可以根據實際考慮決定即可,GIF雖然可以壓縮到比較小,但是本身圖片質量也較差,因此建議慎重考慮。
動效在UI設計中的應用場景很多,這里梳理了一下,之前我在項目中嘗試過的動效,給大家分享下一些案例,希望可以對大家有所啟發。
學習用什么工具導出什么格式的文件只是第一步,更重要的還是如何制造出一個有創意的動效,因此不要過于強調工具,更多應該培養自己思考設計的習慣。
文章來源:優設 作者:ID設計站
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務