HTML5常見動效制作手法

H5，衆所周知，可謂是火遍大江南北，到現在還(hái)是很流行的H5頁面(miàn)，爲何H5那麼(me)受歡迎？簡單的說，一個元素動往往比靜更吸引眼球，一套操作界面(miàn)，合适的動态交互反饋能(néng)給用戶帶來更好(hǎo)的操作體驗，而一個H5運營宣傳頁，借助這(zhè)些優勢，采用炫酷的動畫特效進(jìn)行傳播并起(qǐ)到品牌打造的作用。

當然了，各式各樣(yàng)H5運營頁的炫酷展現離不開(kāi)“動效設計”，現在桂林手機網站建設和大家一同挖掘幾種(zhǒng)常見的H5動效制作手法。

1、GIF

GIF動畫常在H5動效裡(lǐ)當擔loading導航條，熱門小标簽等元素，要把控圖片大小和精度之間的平衡，所以它一般用于制作小細節的動畫。

GIF圖片擅長(cháng)于制作細節的小動畫，位圖，優勢在于 “體型”很小，可壓縮，制作成(chéng)本低，以圖片的形态适用于各種(zhǒng)操作系統，無兼容性的後(hòu)顧之憂。制作GIF動畫的方式有很多，例如我們所熟悉的Photoshop時間軸，或是利用Flash，AE將(jiāng)動畫導出存成(chéng)GIF格式等等。

2、逐幀動畫

逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js腳本模拟編寫或是使用css3新屬性step()制作而成(chéng)。step()在移動端的兼容性是很好(hǎo)的，但使用比較小衆。逐幀動畫和GIF動畫的差别在于，腳本可以控制逐幀動畫的快慢和動作的暫停，而GIF動畫無法在後(hòu)期通過(guò)代碼進(jìn)行動畫速率及透明度的修改。

3、CSS3

CSS3應該是動畫家族裡(lǐ)絕對(duì)不會被(bèi)遺忘的一名成(chéng)員。這(zhè)裡(lǐ)我們定義它爲擅長(cháng)于平面(miàn)層的動畫。CSS3的缺陷應該在于它的部分屬性還(hái)沒(méi)有被(bèi)浏覽器有好(hǎo)的支持。

4、SVG

SVG，也是動效制作中不可忽略的一大熱門方法，我們定義它爲擅長(cháng)于線條的動畫，弊端是：IE8,Android4.2及以下支持不好(hǎo)。