一、GIF動畫
一種無損壓縮的8位圖像文件。大多用于網(wǎng)絡(luò)傳輸上,速度要比傳輸其他格式的圖像文件快,但不能用于存儲真彩的圖像文件。
優(yōu)點:
兼容性好,播放簡單,可以多平臺支持。
缺點:
1、GIF格式僅支持 8 位,也就是256種不同的顏色會有色彩失真,所以效果差
2、動畫文件大,播放資源內(nèi)存、CPU占用高。
二、序列幀動畫
PNG序列幀就是把一張一張的PNG圖片按照順序播放,跟GIF相比不會產(chǎn)生邊緣鋸齒的效果,也比GIF支持的色彩范圍大。
優(yōu)點:
1、制作方便簡單,還原度高,顏色偏差損失基本沒有(PNG圖片壓縮可能會有顏色偏差)。
2、可以通過代碼控制動畫的播放、停止、循環(huán)、播放速度等。
缺點:
需要加載全部圖片,文件占用內(nèi)存大,內(nèi)存一大就容易造成打開頁面的時候卡頓,大的文件用戶體驗感很差。
三、SVGA動畫
Svga背后的故事:https://jianshu.com/p/dfa16d9d67cd
官方網(wǎng)站:https://svga.dev/svga-preview.html
官方插件:https://svga.dev/designer.html
官方文章:https://svga.dev/article.html
優(yōu)點:
1、跨平臺、開源:同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式。SVGA的轉(zhuǎn)換器和播放器都開源。
2、設(shè)計簡單:使用設(shè)計師工具,可以輕松的將 Aep 或 Fla 格式的動畫文件導出成 SVGA 格式資源文件。動畫設(shè)計師通過工具輸出 svga 動畫文件,提供給開發(fā)工程師在集成 svga player 之后直接使用。
3、動畫文件體積小:Protobuf 序列化結(jié)構(gòu)數(shù)據(jù)格式,序列化的數(shù)據(jù)體更小,傳遞效率比xml,json 更高
4、播放資源占用優(yōu),動畫還原效果好,使用方法簡便,大大提高了工作效率。
缺點:
1、有損壓縮,不支持圖層漸變和插件特效,有的平臺并不支持Svga。
2、每個禮物播放時都去重新解壓,需要改一套緩存策略
3、svga 用zlib打包(字節(jié)流數(shù)據(jù)壓縮程序庫),不方便解壓和追蹤包內(nèi)容。
四、Lottie動畫
Lottie是Airbnb開發(fā)的一款能夠為原生應用添加動畫效果的開源工具。Lottie目前提供了iOS,Android和ReactNative版本。
Lottie通過AE設(shè)計好的動畫效果,通過Bodymovin插件直接導出json文件,并允許開發(fā)人員直接調(diào)用它們。Lottie庫使開發(fā)人員能夠?qū)崿F(xiàn)動畫效果,提升了工作效率,減少了碼代碼的時間。
優(yōu)點:
前端可以方便地調(diào)用動畫和控制動畫,以減少前端碼代碼的時間。json文件的小,性能表現(xiàn)也很好。
缺點:
不支持漸變、粒子、陰影透視等效果,表達式也只支持一部分,圖層命名需要英文。
五、MP4動畫
優(yōu)點:
1、廣泛兼容性:MP4格式被幾乎所有設(shè)備和平臺支持,包括計算機、智能手機、平板電腦和大多數(shù)瀏覽器。它在播放時通常不需要額外的插件或解碼器。
2、高壓縮率:MP4文件通常使用H.264或H.265編碼,能夠在保持較好視頻質(zhì)量的同時,提供較高的壓縮率,使文件大小相對較小,適合在網(wǎng)頁中嵌入或通過網(wǎng)絡(luò)傳輸。
3、多功能性:MP4不僅可以包含視頻,還可以包含音頻、字幕等多種媒體內(nèi)容,適合制作包含多媒體內(nèi)容的復雜動效。
4、流媒體支持:MP4格式支持流媒體傳輸,可以實現(xiàn)邊下載邊播放(逐幀播放),在網(wǎng)頁或應用中使用時,用戶體驗較好。
缺點:
1、編輯困難:由于MP4的壓縮特性,對其進行編輯和修改比較困難。每次編輯都可能導致視頻質(zhì)量的進一步損失。相比無損格式(如AVI),MP4的可編輯性較差。
2、不支持透明背景:MP4視頻不支持透明背景,因此在需要透明效果的動效中(例如網(wǎng)頁上的動畫圖標或按鈕),MP4并不適用。這種情況下通常會選擇其他動效類型(PS:目前已有開源的支持可插入動態(tài)元素的MP4動效播放器解決方案,如yy語音的YYEVA,字節(jié)跳動的AlphaPlayer,騰訊的vap
)。
3、文件體積仍較大:雖然MP4的壓縮率較高,但對于復雜動效或高分辨率視頻,文件體積仍然可能較大,可能不適合網(wǎng)絡(luò)環(huán)境要求嚴格的應用。
4、瀏覽器兼容性問題:盡管大多數(shù)現(xiàn)代瀏覽器都支持MP4格式,但某些舊版或特定設(shè)備上的瀏覽器可能對MP4的某些功能支持不完善。