關注▲Clip設計夾後台回復「進群」加入設計成長群
設計夾的第130篇文章分享
作為用戶體驗領域不可缺少的一部分，動效隨處可見。日常工作中，我們可能只用1-2種動效格式，對其他格式的了解有所欠缺。
這次介紹5種動效輸出格式和教程，包括PS輸出和AE輸出，建議收藏保存下來隨時查看，幫助大家更快更好地完成落地！
PNG序列幀方式
PNG序列幀就是把一張一張的PNG圖片按照順序播放，跟GIF相比不會產生邊緣鋸齒的效果，也比GIF支持的色彩範圍大。
優點：製作方便簡單，還原度高，顏色偏差損失基本沒有(PNG圖片壓縮可能會有顏色偏差)，動效效果還原度高(因為就是一張一張圖片播放的，像AE做的一些雨水，火焰都可以顯示出來，開發人員可調節播放速度)。
缺點：需要加載全部圖片，文件占用內存大，內存一大就容易造成打開頁面的時候卡頓，大的文件用戶體驗感很差。
PNG序列幀-PS輸出方式
PNG序列幀-AE輸出方式
SVGA方式
官方網站：https://svga.io/index.html
官方插件：https://svga.io/designer.html
官方文章：https://svga.io/article.html
優點：SVGA 是一種同時兼容 iOS / Android / Flutter / Web 多個平台的動畫格式。SVGA的轉換器和播放器都開源。
使用設計師工具，可以輕鬆的將 Aep 或 Fla 格式的動畫文件導出成 SVGA 格式資源文件。動畫設計師通過工具輸出 svga 動畫文件，提供給開發工程師在集成 svga player 之後直接使用。
動畫文件體積小，播放資源占用優，動畫還原效果好，使用方法簡便，大大提高了工作效率。
SVGA動效輸出流程
SVGA動效輸出方式
Lottie方式
Lottie是Airbnb開發的一款能夠為原生應用添加動畫效果的開源工具。Lottie目前提供了iOS,Android和ReactNative版本。
Lottie通過AE設計好的動畫效果，通過Bodymovin插件直接導出json文件，並允許開發人員直接調用它們。Lottie庫使開發人員能夠實現動畫效果，提升了工作效率，減少了碼代碼的時間。
優點：前端可以方便地調用動畫和控制動畫，以減少前端碼代碼的時間。json文件的小，性能表現也很好。
缺點：不支持漸變、粒子、陰影透視等效果，表達式也只支持一部分，圖層命名需要英文。
Lottie動效輸出流程
Lottie動效輸出方式
GIF方式
一種無損壓縮的8位圖像文件。大多用於網絡傳輸上，速度要比傳輸其他格式的圖像文件快，但不能用於存儲真彩的圖像文件。
優點：兼容性好，可以多平台支持。
缺點：GIF格式僅支持256種不同的顏色，文件占用空間大，會有色彩失真效果。
GIF-PS輸出方式
GIF-AE輸出方式
MP4方式
常用的視頻格式，通常用在網站的展示背景還有宣傳的MG動畫什麼的。
優點：兼容性非常好。
缺點：適合背景展示或者其他展示方面，其他方面很少使用。
MP4-AE輸出方式
交互動效輸出文檔
動效參數文檔是一種把動效參數量化的文檔，它是動效設計師和前端開發人員溝通的重要工具。
以前動效標註文檔還要一個一個圖層標註(位置，旋轉，透明圖，動畫曲線)。現在直接用腳本直接就可以一鍵出來了。
以上是5種常見的動效輸出格式和輸出教程，強烈建議收藏保存下來，已備隨時查看，也希望這些內容能讓大家對動效格式有更多了解和使用～
另外推薦大家去「三長老」主頁查看更多內容：zcool.com.cn/article/ZMTQ3NDk5Mg==.html
慢慢來比較快，如覺得有幫助，
請點個讚&在看，謝謝！
添加微信,邀你進設計成長群⭐️
🔥文章合集
致2020：設計文章合集
留言列表