HTML5培訓教程學習之動效製作

　　近年來，HTML5應用愈發廣泛，並有取代Flash的趨勢。很多人知道利用HTML5可以做出好的動作效果，但你知道它是怎麼做出來的嗎？今天小千就來給大家分享一下 HTML5培訓教程中動效製作的幾種方法。

　　1、逐幀動畫。逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js指令碼模擬編寫或是使用css3新屬性step()製作而成。逐幀動畫指令碼可以控制逐幀動畫的快慢和動作的暫停，後期可以透過程式碼進行動畫速率及透明度的修改。

　　2、GIF。GIF圖片擅長於製作細節的小動畫、點陣圖，優勢在於 “體型”很小，可壓縮，製作成本低，以圖片的形態適用於各種作業系統，無相容性的後顧之憂。GIF動畫最常在H5動效裡當擔loading導航條，熱門小標籤等元素。

　　3、SVG。SVG擅長於線條的動畫，弊端是：IE8,Android4.2及以下支援不好。一張SVG圖，其實是由一堆的定位錨點連線生成的，所以它可以很方便的存為文件格式。

　　4、Canvas。Canvas是HTML5 的新元素 ，類似畫板，擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。Canvas本身是沒有繪圖能力的，所有的繪製工作必須依賴 JavaScript 完成。

　　5、CSS3。CSS3擅長於平面層的動畫，缺陷在於它的部分屬性還沒有被瀏覽器有好的支援。CSS3的動畫三大屬性：Transform 變形，Transition 過渡，和Animation 動畫。

　　掌握HTML5基礎知識，瞭解動效製作的基本方法，你就可以製作出一個簡單的頁面。

　　 本文來自千鋒教育，轉載請註明出處。