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