91九九99,日韩三级天堂东京热,小明AV在线观看

背景

在很多場(chǎng)景下需要播放幾秒的動(dòng)畫(huà)效果，提升網(wǎng)站的視覺(jué)效果，提高吸引力。但對(duì)于這種小視頻的播放，你會(huì)選擇什么格式呢？是常規(guī)的gif，還是使用精靈圖制作幀動(dòng)畫(huà)？或者直接使用視頻文件進(jìn)行播放？

下面就讓我們看下哪種格式最適合你的需求。

格式枚舉

1. GIF

GIF作為老牌的動(dòng)畫(huà)格式，具有無(wú)損壓縮、兼容性極佳等優(yōu)點(diǎn)。
但由于GIF是1987年發(fā)布的格式，它也具有不少的局限。

GIF缺少透明圖層
無(wú)法控制播放
文件大小較大

2. APNG

APNG是Animated Portable Network Graphics的縮寫(xiě)，這是為動(dòng)圖而生的格式。
在GIF、無(wú)損WebP與APNG中，APNG的文件大小最小。在瀏覽器中也獲得了最廣泛的支持。還能夠展示透明圖層。

但APNG無(wú)法進(jìn)行有損壓縮。且同樣無(wú)法控制播放。

3. WebP

WebP是由google推出的一種現(xiàn)代圖像格式。除了能展示透明圖層外，最顯著的優(yōu)點(diǎn)是，支持有損壓縮，壓縮后體積非常小。

WebP的瀏覽器支持度不如APNG，但也覆蓋了主要的現(xiàn)代瀏覽器。它的解碼速度相較APNG慢上一些。

4. 精靈圖

精靈圖是指將多張圖片集中到一張大圖中，方便加載。在HTTP2之前是相對(duì)流行的技術(shù)。它的應(yīng)用更加靈活，在需要高度控制時(shí)，可以考慮。

5. SVG

SVG是Scalable Vector Graphics的縮寫(xiě)，基于XML語(yǔ)言，渲染矢量圖形，縮放時(shí)不會(huì)導(dǎo)致圖像降低質(zhì)量。

Lottie是一個(gè)以JSON的動(dòng)畫(huà)文件格式，可以通過(guò)AE導(dǎo)出動(dòng)畫(huà)，在web中以SVG的形式展示。

6. CSS動(dòng)畫(huà)

通過(guò)CSS可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)，還可以開(kāi)啟GPU加速頁(yè)面渲染，增強(qiáng)動(dòng)畫(huà)效果。

7. MP4

直接使用MP4視頻也是一種方式。相較GIF，MP4體積更小。MP4作為通用的視頻格式，在瀏覽器的兼容性非常好。但是不支持透明圖層。

8. WebM

WebM是由Google推出的視頻格式，支持透明圖層。相較MP4，它的大小更小，但質(zhì)量稍差。雖然主流的瀏覽器都已提供了支持，但兼容性還是不如MP4。

9. Canvas

通過(guò)HTML的canvas標(biāo)簽與JavaScript繪制圖形。通過(guò)WebGL技術(shù)，可以實(shí)現(xiàn)渲染可交互的3D圖形。

總結(jié)

在選擇方案時(shí)我們需要結(jié)合自己的需求。如果對(duì)可交互性要求很高，推薦使用SVG、CSS或Canvas技術(shù)，更加可控；如果期望兼容性較強(qiáng)，可以考慮精靈圖、GIF或MP4；如果性能才是你的首要目標(biāo)，那推薦使用視頻或現(xiàn)代的圖像格式APNG、WebP；在許多場(chǎng)景下，透明圖層也是需要考慮的一部分，這種情況下只能舍棄GIF與MP4的格式。

最后列舉下我測(cè)試時(shí)使用的幀圖片與轉(zhuǎn)換后的圖片視頻尺寸對(duì)比：