HTML5常見動效制作手法

H5，眾所周知，可謂是火遍大江南北，到現(xiàn)在還是很流行的H5頁面，為何H5那么受歡迎？簡單的說，一個元素動往往比靜更吸引眼球，一套操作界面，合適的動態(tài)交互反饋能給用戶帶來更好的操作體驗，而一個H5運營宣傳頁，借助這些優(yōu)勢，采用炫酷的動畫特效進行傳播并起到品牌打造的作用。

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

1、GIF

GIF動畫常在H5動效里當(dāng)擔(dān)loading導(dǎo)航條，熱門小標(biāo)簽等元素，要把控圖片大小和精度之間的平衡，所以它一般用于制作小細(xì)節(jié)的動畫。

GIF圖片擅長于制作細(xì)節(jié)的小動畫，位圖，優(yōu)勢在于 “體型”很小，可壓縮，制作成本低，以圖片的形態(tài)適用于各種操作系統(tǒng)，無兼容性的后顧之憂。制作GIF動畫的方式有很多，例如我們所熟悉的Photoshop時間軸，或是利用Flash，AE將動畫導(dǎo)出存成GIF格式等等。

2、逐幀動畫

逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js腳本模擬編寫或是使用css3新屬性step()制作而成。step()在移動端的兼容性是很好的，但使用比較小眾。逐幀動畫和GIF動畫的差別在于，腳本可以控制逐幀動畫的快慢和動作的暫停，而GIF動畫無法在后期通過代碼進行動畫速率及透明度的修改。

3、CSS3

CSS3應(yīng)該是動畫家族里絕對不會被遺忘的一名成員。這里我們定義它為擅長于平面層的動畫。CSS3的缺陷應(yīng)該在于它的部分屬性還沒有被瀏覽器有好的支持。

4、SVG

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