乾貨分享！HTML5 動效的常見製做手法

衆所周知，一個元素，動每每比靜更吸引眼球；

一套操做界面，合適的動態交互反饋能給用戶帶來更好的操做體驗；

一個H5運營宣傳頁，炫酷的動畫特效定能助力傳播和品牌打造。

近兩年，小到loading動畫，表單動效，大到各式各樣H5運營頁的炫酷展示，「動效設計」一詞可謂是火遍大江南北，而動效設計早已成爲一名合格設計師必需有所知曉的領域。
本文將經過一些案例，和你們一同挖掘幾種常見的H5動效製做手法。

咱們由淺入深來挖掘這動效製做的祕密，一個入門級的小問題：看上圖這幾個動畫例子，你們是否能說出這動畫是如何製做出來的呢？而又是如何在網頁之上呈現的呢？
趕快來學習吧：http://edu.51cto.com/course/courseList/id-103.html

對，答案必須是設計師們都很是熟悉的gif小動畫了，H5動效製做的第一手法，即是GIF了。

 

動效製做手法1：GIF

GIF圖片擅長於製做細節的小動畫，位圖，優點在於 「體型」很小，可壓縮，製做成本低，以圖片的形態適用於各類操做系統，無兼容性的後顧之憂。製做GIF動畫的方式有不少，例如咱們所熟悉的Photoshop時間軸，或是利用Flash，AE將動畫導出存成GIF格式等等。

GIF動畫最常在H5動效裏當擔loading導航條，熱門小標籤等元素，要把控圖片大小和精度之間的平衡，因此它通常用於製做小細節的動畫。

H5頁面承載GIF圖片的方式相對如下要介紹的其餘方法，是最省成本，最爲簡便的。只須要以背景圖片/內容圖片的形式在頁面上進行引用便可。

聊完了GIF動畫的一些特色，那麼咱們必須同時對比一下它的堂兄弟：逐幀動畫 。

 

動效製做手法2：逐幀動畫

逐幀動畫便是利用一張等間距的動畫分解逐幀圖片，由js腳本模擬編寫或是使用css3新屬性step()製做而成。step()在移動端的兼容性是很好的，但使用比較小衆。逐幀動畫和GIF動畫的差異在於，腳本能夠控制逐幀動畫的快慢和動做的暫停，而GIF動畫沒法在後期經過代碼進行動畫速率及透明度的修改。

作一個逐幀動畫必不可缺的就是須要一張等間距的「動畫分解逐幀圖片.png」，再經過JavaScript腳本或CSS3 animation的過分函數step() 來控制圖片的background-position，兩者結合就能夠快速輸出一個逐幀動畫啦。

從以往的經驗看GIF動畫或是逐幀動畫，咱們每每認爲它們只適合作一些小細節的動畫。其實兩者也能夠承載一些很獨特的動畫效果！如如下這個例子，這是陌陌的一個宣傳h5頁面，它即是由逐幀分解圖+JavaScript腳本模擬逐幀動畫 拼合而成的。

 

動效製做手法3：CSS3  相關CSS3知識：http://edu.51cto.com/course/course_id-4136.html

CSS3應該是動畫家族裏絕對不會被遺忘的一名成員。這裏咱們定義它爲擅長於平面層的動畫。CSS3的缺陷應該在於它的部分屬性尚未被瀏覽器有好的支持。

這裏給你們介紹一下CSS3的動畫三大屬性：Transform 變形，Transition 過渡，和Animation 動畫。

Transform 變形：擁有 rotate 旋轉 skew 扭曲 scale 縮放 translate 移動 matrix 矩陣變形五大特效，羅斯的例子中，即是對充分結合了這幾個變化特效的產物。

Transition 過渡：擁有修改執行變換的屬性，時長，速率和延遲時間的能力，你們都很熟悉的貝塞爾曲線，也是歸屬於transition的設定之下的。

Animation 動畫：若將Transform解釋爲動做，Transition解釋爲過渡，那麼Animation則是連續的幾個動做，即動畫。Animation能夠咱們設定keyframes的值，讓元素在一段時間內完成多個動做。

 

然而咱們如何高質高效把動畫設計傳達給工程師呢？

這裏來個小小的Tips：建議使用「案例Demo或者分鏡頭腳本+動畫屬性分解表+素材切圖」的套裝！

如下圖爲例：這是一個點擊反饋的小動畫，在沒法提供Demo的時候，咱們可使用」動畫屬性分解表」的方式。動畫屬性分解表可讓工程師根據表格內填寫的數值進行動畫的編寫，會比憑空的和工程師進行交流傳達，來的更精準一些。

動畫屬性分解表示例：

 

動效製做手法4：SVG

SVG，也是動效製做中不可忽略的一大熱門方法，咱們定義它爲擅長於線條的動畫，弊端是：IE8,Android4.2及如下支持很差。看下圖幾個 例子，涉及到這種沿着元素描邊的動畫，通常都是出自SVG之手啦，固然，它也能夠實現一些複雜的動畫，相似這個表情圖片，不過實現成本是不太划算的。

知識普及：SVG，可縮放矢量圖形（Scalable Vector Graphics）， 是被存成了 XML 格式的圖像，它有一些特別的地方：

• 可被多種工具讀取和修改（好比記事本）

• 尺寸更小，可壓縮性更強

• 矢量

• 純粹的 XML

一張SVG圖，實際上是由一堆的定位錨點連線生成的。因此它能夠很方便的存爲文檔格式。而頁面中的引用，也是簡單的將此文本引入便可。這裏必需要注意的點是：若是你想製做一個SVG動畫，請必定要使用AI工具繪製輸出矢量圖給到工程師同窗哦。

 

動效製做手法5：Canvas

HTML5 的新元素 ，相似畫板，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。自己是沒有繪圖能力的。全部的繪製工做必須依賴 JavaScript 完成。咱們定義它爲擅長於繪畫的動畫。以下圖，繪製這樣一個大量元素下落的動畫效果，就是Canvas所擅長的。

Canvas能夠算是SVG的堂兄弟，大部分的圖表動畫，都是由Canvas或是SVG製做而成的，兩者的動畫能力類似但也有如下這些區別：

• canvas是畫框，有本身固定的高寬，svg是不依賴分辨率的矢量，能夠任意放大縮小。

• canvas能以.jpg的格式保存圖像，svg是文本的格式保存圖像

• canvas繪製的圖像不佔DOM，而svg的每一個圖像都是1個DOM元素

• canvas適合圖像密集型的動畫，而svg不適合大量使用，例如製做飄雪等

• canvas徹底依賴腳本繪製做，而svg可直接使用矢量轉存生成。

 

動效製做手法6：Flash->Canvas

除去上面幾種常見的手法，Flash轉Canvas的方法也是今年特別火爆的一種形式。既然提到曾經輝煌的Flash，那產出物必須離不開炫酷這個 形容詞：經過Flash cc製做複雜又精細的動畫，導成Canvas文件，動畫中的交互操做，依賴Create.js的腳步庫完成。

動效製做手法7：video

用視頻輸出很是特別的動效。

 動效製做手法8：JavaScript

其實，只要是涉及到交互反饋的動畫，小至滾屏翻頁，大到重力感應等都須要js進行處理腳步的編寫。也就是說，全部的動畫特效都離不開Javascript同窗的支持。

最後咱們再以一個簡單的表格來彙總這H5動效常見的製做手法，但願讀完本文的小夥伴們均可以在下次碰見新動畫效果時，第一時間挖掘出它背後的製做原 理，好好運用這8大手法，人人都是優秀的動效設計師。（表格中所闡述的性能損耗和實現成本僅做參考，具體動畫效果還須要具體分析，纔可得知到底使用哪一種方 式是最適合的。）

相關學習：http://edu.51cto.com/course/courseList/id-103.html