| 企服解答

H5指的是移動端的web頁面，能夠在智能手機上呈現達到flash動畫效果的具有酷炫效果的網頁。H5動畫則指的是能夠在移動端進行播放的web頁面動畫。H5動畫實現的方法有：GIF動畫、FLASH動畫 / SilverLight FLASH、SilverLight、SilverLight、SMIL、APNG、Javascript + SVG。

h5動畫是什么意思

1、GIF動畫

通常咱們社交聊天的一些動態表情，大多都是gif動畫。GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF 文件的數據，是一種基于LZW算法的連續色調的無損壓縮格式。其壓縮率一般在 50%左右，它不屬于任何應用程序。GIF 格式可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數據逐幅讀出并顯示到屏幕上，就可構成一種最簡單的動畫。 GIF分為靜態GIF和動畫GIF兩種，擴展名為.gif，是一種壓縮位圖格式，支持透明背景圖像，適用于多種操作系統，“體型”很小，網上很多小動畫都是GIF格式，其實GIF是將多幅圖像保存為一個圖像文件，從而形成動畫，最常見的就是通過一幀幀的動畫串聯起來的搞笑gif圖，所以歸根到底GIF仍然是圖片文件格式。 GIF 制作方式可以通過PS制作，或者通過圖片、視頻、FLASH轉換。

2、FLASH動畫 / SilverLight FLASH 

Flash非常強大，它們包含豐富的視頻、聲音、圖形和動畫。利用Flash可以制作各種各樣非常華麗的動畫，和視頻，但是由于各種原因，2012 年 8 月 15 日，Flash退出Android平臺，正式告別移動端。2015 年 12 月 1 日，Adobe將動畫制作軟Flashprofessional CC2015升級并改名為Animate CC 2015.5，從此與Flash技術劃清界限。 很早之前在各種企業門戶的首頁大圖輪播基本都是使用flash，早幾年 12306 的購票網站首頁的頂部的大圖也是用的flash，如今都換成了靜態的圖片。這種技術逐漸淡出了視野，只有在線視頻直播如 優酷，愛奇藝等視頻網站。

3、SilverLight

Microsoft Silverlight是一個跨瀏覽器的、跨平臺的插件，是一種新的Web呈現技術，能在各種平臺上運行。借助該技術，您將擁有內容豐富、視覺效果絢麗的交互式體驗，而且，無論是在瀏覽器內、還是在桌面操作系統（如Windows和Apple Macintosh）中，您都可以獲得這種一致的體驗。

4、SMIL
 
SMIL 特性： 程序以開始，以結束，整個程序由body和head兩個部分組成，SMIL要求其標記和標記的屬性必須小寫！有些標記必須有一斜杠作為結束標記，屬性值必須用雙引號括起來，SMIL文件的拓展名為*.smil或者*.smi。 

5、APNG 

APNG, 全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴展，他和 gif 的區別在于：圖片質量,gif最多支持 256 種顏色，不支持Alpha透明通道。可以稱之為色彩豐富支持Alpha透明通道體積大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG組織投票以 10:8 否決APNG進入官方標準。也就是PNG不認可他。

6、Javascript + SVG

SVG的動畫元素是和SMIL開發組合作開發的。SMIL開發組和SVG開發組合作開發了SMIL動畫規范，在規范中制定了一個基本的XML動畫特征集合。SVG吸收了SMIL動畫規范當中的動畫優點，并提供了一些SVG繼承實現。

| 拓展閱讀

H5有以下幾大特性：1、繪圖功能（Canvas，SVG）；2、三維效果（css3 ，3D）；3、離線存儲。

1、繪圖功能（Canvas，SVG）

為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區別是，Flash做出來的動畫無法在移動端的瀏覽器中瀏覽，因為Adobe早已在2012年就停止了對移動端flash的開發。毫無疑問，未來的移動網頁游戲和動畫會是H5的天下。
從技術實現的角度，H5配合JS（一種程序語言）可以做出任何二維動畫，并且因為是網頁元素，所有元素均可以監測到用戶點擊的數據，也就是說你可以知道用戶在H5動畫網頁中的所有交互行為。但是，具體到實際應用，我們就要考慮周期、成本，和用戶體驗的問題，復雜的動畫相應的制作周期和成本會提高，同時也有可能影響加載速度等用戶體驗相關的問題。

2、三維效果（css3 ，3D）

H5的華麗效果離不開一種叫CSS的技術，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當于word界面上方的格式工具欄，如果沒有CSS我們看到的H5網頁就只能以“素顏”見人了。如果你熟悉互聯網技術的命名規則你應該能知道CSS3就是CSS的升級版本。

3、離線存儲

H5的另一個重要特性就是離線存儲，它能將用戶的資源文件保存在本地，這樣在頁面加載的時候網頁能使用本地資源，從而實現離線狀態下訪問網頁應用。舉個例子，通過離線存儲，你可以在沒有網絡的情況下閱讀公眾號的文章（當然這只是技術上可行，微信目前沒有此功能）。