h5動(dòng)畫是什么意思

| 企服解答

H5指的是移動(dòng)端的web頁面，能夠在智能手機(jī)上呈現(xiàn)達(dá)到flash動(dòng)畫效果的具有酷炫效果的網(wǎng)頁。H5動(dòng)畫則指的是能夠在移動(dòng)端進(jìn)行播放的web頁面動(dòng)畫。H5動(dòng)畫實(shí)現(xiàn)的方法有：GIF動(dòng)畫、FLASH動(dòng)畫 / SilverLight FLASH、SilverLight、SilverLight、SMIL、APNG、Javascript + SVG。

h5動(dòng)畫是什么意思

1、GIF動(dòng)畫

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

2、FLASH動(dòng)畫 / SilverLight FLASH 

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

3、SilverLight

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

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

5、APNG 

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

6、Javascript + SVG

SVG的動(dòng)畫元素是和SMIL開發(fā)組合作開發(fā)的。SMIL開發(fā)組和SVG開發(fā)組合作開發(fā)了SMIL動(dòng)畫規(guī)范，在規(guī)范中制定了一個(gè)基本的XML動(dòng)畫特征集合。SVG吸收了SMIL動(dòng)畫規(guī)范當(dāng)中的動(dòng)畫優(yōu)點(diǎn)，并提供了一些SVG繼承實(shí)現(xiàn)。

| 拓展閱讀

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

1、繪圖功能（Canvas，SVG）

為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來的動(dòng)畫無法在移動(dòng)端的瀏覽器中瀏覽，因?yàn)锳dobe早已在2012年就停止了對(duì)移動(dòng)端flash的開發(fā)。毫無疑問，未來的移動(dòng)網(wǎng)頁游戲和動(dòng)畫會(huì)是H5的天下。
從技術(shù)實(shí)現(xiàn)的角度，H5配合JS（一種程序語言）可以做出任何二維動(dòng)畫，并且因?yàn)槭蔷W(wǎng)頁元素，所有元素均可以監(jiān)測(cè)到用戶點(diǎn)擊的數(shù)據(jù)，也就是說你可以知道用戶在H5動(dòng)畫網(wǎng)頁中的所有交互行為。但是，具體到實(shí)際應(yīng)用，我們就要考慮周期、成本，和用戶體驗(yàn)的問題，復(fù)雜的動(dòng)畫相應(yīng)的制作周期和成本會(huì)提高，同時(shí)也有可能影響加載速度等用戶體驗(yàn)相關(guān)的問題。

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

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

3、離線存儲(chǔ)

H5的另一個(gè)重要特性就是離線存儲(chǔ)，它能將用戶的資源文件保存在本地，這樣在頁面加載的時(shí)候網(wǎng)頁能使用本地資源，從而實(shí)現(xiàn)離線狀態(tài)下訪問網(wǎng)頁應(yīng)用。舉個(gè)例子，通過離線存儲(chǔ)，你可以在沒有網(wǎng)絡(luò)的情況下閱讀公眾號(hào)的文章（當(dāng)然這只是技術(shù)上可行，微信目前沒有此功能）。