HTML5常見(jiàn)動(dòng)效制作手法

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

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

1、GIF

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

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

2、逐幀動(dòng)畫(huà)

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

3、CSS3

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

4、SVG

SVG，也是動(dòng)效制作中不可忽略的一大熱門(mén)方法，我們定義它為擅長(cháng)于線(xiàn)條的動(dòng)畫(huà)，弊端是：IE8,Android4.2及以下支持不好。