讓動(dòng)效又快又好落地!5種動(dòng)效輸出格式優(yōu)缺點(diǎn)分析
Halo,這里是設(shè)計(jì)夾,今天為大家分享的是「動(dòng)效格式」。文章來(lái)源于設(shè)計(jì)師「三長(zhǎng)老」對(duì)于 UI 動(dòng)效輸出格式的設(shè)計(jì)研究。
作為用戶體驗(yàn)領(lǐng)域不可缺少的一部分,動(dòng)效隨處可見(jiàn)。日常工作中,我們可能只用 1-2 種動(dòng)效格式,對(duì)其他格式的了解有所欠缺。
這次介紹 5 種動(dòng)效輸出格式和教程,包括 PS 輸出和 AE 輸出,建議收藏保存下來(lái)隨時(shí)查看,幫助大家更快更好地完成落地!
PNG 序列幀就是把一張一張的 PNG 圖片按照順序播放,跟 GIF 相比不會(huì)產(chǎn)生邊緣鋸齒的效果,也比 GIF 支持的色彩范圍大。
優(yōu)點(diǎn):制作方便簡(jiǎn)單,還原度高,顏色偏差損失基本沒(méi)有(PNG 圖片壓縮可能會(huì)有顏色偏差),動(dòng)效效果還原度高(因?yàn)榫褪且粡堃粡垐D片播放的,像 AE 做的一些雨水,火焰都可以顯示出來(lái),開(kāi)發(fā)人員可調(diào)節(jié)播放速度)。
缺點(diǎn):需要加載全部圖片,文件占用內(nèi)存大,內(nèi)存一大就容易造成打開(kāi)頁(yè)面的時(shí)候卡頓,大的文件用戶體驗(yàn)感很差。
1. PNG 序列幀-PS 輸出方式
2. PNG 序列幀-AE 輸出方式
3. SVGA 方式
Svga 背景:jianshu.com/p/dfa16d9d67cd
官方網(wǎng)站: https://svga.io/index.Html
官方插件: https://svga.io/designer.html
官方文章: https://svga.io/article.html
優(yōu)點(diǎn):SVGA 是一種同時(shí)兼容 iOS / AndROId / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫格式。SVGA 的轉(zhuǎn)換器和播放器都開(kāi)源。
使用設(shè)計(jì)師工具,可以輕松的將 Aep 或 Fla 格式的動(dòng)畫文件導(dǎo)出成 SVGA 格式資源文件。動(dòng)畫設(shè)計(jì)師通過(guò)工具輸出 svga 動(dòng)畫文件,提供給開(kāi)發(fā)工程師在集成 svga player 之后直接使用。
動(dòng)畫文件體積小,播放資源占用優(yōu),動(dòng)畫還原效果好,使用方法簡(jiǎn)便,大大提高了工作效率。
缺點(diǎn):有損壓縮,不支持圖層漸變和插件特效,有的平臺(tái)并不支持 Svga。
4. SVGA 動(dòng)效輸出流程
5. SVGA 動(dòng)效輸出方式
二、Lottie 方式
Lottie 是 Airbnb 開(kāi)發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開(kāi)源工具。Lottie 目前提供了 iOS,Android 和 ReactNative 版本。
Lottie 通過(guò) AE 設(shè)計(jì)好的動(dòng)畫效果,通過(guò) Bodymovin 插件直接導(dǎo)出 json 文件,并允許開(kāi)發(fā)人員直接調(diào)用它們。Lottie 庫(kù)使開(kāi)發(fā)人員能夠?qū)崿F(xiàn)動(dòng)畫效果,提升了工作效率,減少了碼代碼的時(shí)間。
優(yōu)點(diǎn):前端可以方便地調(diào)用動(dòng)畫和控制動(dòng)畫,以減少前端碼代碼的時(shí)間。json 文件的小,性能表現(xiàn)也很好。
缺點(diǎn):不支持漸變、粒子、陰影透視等效果,表達(dá)式也只支持一部分,圖層命名需要英文。
1. Lottie 動(dòng)效輸出流程
2. Lottie 動(dòng)效輸出方式
三、GIF 方式
一種無(wú)損壓縮的 8 位圖像文件。大多用于網(wǎng)絡(luò)傳輸上,速度要比傳輸其他格式的圖像文件快,但不能用于存儲(chǔ)真彩的圖像文件。
優(yōu)點(diǎn):兼容性好,可以多平臺(tái)支持。
缺點(diǎn):GIF 格式僅支持 256 種不同的顏色,文件占用空間大,會(huì)有色彩失真效果。
1. GIF-PS 輸出方式
2. GIF-AE 輸出方式
四、MP4 方式
常用的視頻格式,通常用在網(wǎng)站的展示背景還有宣傳的 MG 動(dòng)畫什么的。
優(yōu)點(diǎn):兼容性非常好。
缺點(diǎn):適合背景展示或者其他展示方面,其他方面很少使用。
1. MP4-AE 輸出方式
五、交互動(dòng)效輸出文檔
動(dòng)效參數(shù)文檔是一種把動(dòng)效參數(shù)量化的文檔,它是動(dòng)效設(shè)計(jì)師和前端開(kāi)發(fā)人員溝通的重要工具。
以前動(dòng)效標(biāo)注文檔還要一個(gè)一個(gè)圖層標(biāo)注(位置,旋轉(zhuǎn),透明圖,動(dòng)畫曲線)?,F(xiàn)在直接用腳本直接就可以一鍵出來(lái)了。
最后
以上是 5 種常見(jiàn)的動(dòng)效輸出格式和輸出教程,強(qiáng)烈建議收藏保存下來(lái),已備隨時(shí)查看,也希望這些內(nèi)容能讓大家對(duì)動(dòng)效格式有更多了解和使用~
作者:Clip設(shè)計(jì)夾
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/19076.html