近年來，h5頁面火爆整個移動互聯(lián)網(wǎng)，這些頁面的炫酷展現(xiàn)，都離不開動效設(shè)計和制作，而動效設(shè)計和制作早已成為一名合格設(shè)計師必需掌握的技能。
目前，設(shè)計師制作h5頁面更多的是借助h5制作工具，本文將以h5制作工具為例和大家一起挖掘幾種常見的h5動效制作方法。
h5制作工具自帶的動畫功能
目前市面上用的比較多的h5制作工具有木疙瘩、ih5等，本文將以木疙瘩為例給大家介紹。
關(guān)鍵幀動畫：可以實現(xiàn)常見的動畫效果，比如位移、大小、旋轉(zhuǎn)、透明度改變等。
變形動畫：可以實現(xiàn)形狀的改變和顏色過渡的動畫效果。
進度動畫：可以實現(xiàn)進度走勢效果，圖表走勢圖和打字機效果用進度動畫來做比較理想。
逐幀動畫
逐幀動畫就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。
優(yōu)點：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似于電影的播放模式，很適合于表演細膩的動畫。
例如：人物或動物急劇轉(zhuǎn)身、頭發(fā)及衣服的飄動、走路、說話以及精致的3d效果等等。
缺點：因為每一幀都不是不同的圖片，制作會增加負擔并且最終輸出的文件也很大，在移動互聯(lián)網(wǎng)上不利于傳播。
鑒于以上優(yōu)缺點，大家在制作動畫過程中可以少量地添加逐幀動畫來表現(xiàn)一些細節(jié)。
逐幀動畫的實現(xiàn)很簡單，但逐幀動畫的內(nèi)容制作，可能會讓一些同學(xué)頭痛，下面給大家羅列3種獲得逐幀動畫內(nèi)容的方法。
手繪如果手繪能力較好的設(shè)計師可以將每一幀的畫面自己畫出來，當然這樣工作量也會比較大
從視頻里獲取如果看中里某個視頻里某段動畫效果，想用到項目當中來，可以通過ae將視頻轉(zhuǎn)換成序列幀圖片，具體操作方法如下：
將視頻文件導(dǎo)入到ae中，找到 合成菜單--添加到渲染隊列--在面板里將格式改為“jpg“序列或者“png“序列--渲染出來即是一張張內(nèi)容不同的的靜態(tài)圖片。
如果圖片太大的話，可以通過圖片壓縮工具來對圖片大小做進一步優(yōu)化。
從gif動畫里獲取如果看中的是gif動畫里面的素材，同樣也可以將圖片獲取，需要先下載一個看圖軟件“2345看圖王“或者“7gif“，可以將gif圖里的每一幀圖片保存出來。
gif動畫
gif動畫的制作方法有很多種，可以通過ps來制作，也可以在ae中制作好視頻再導(dǎo)入到ps中轉(zhuǎn)成gif動畫形式。
gif圖片擅長于制作細節(jié)的小動畫，位圖，優(yōu)勢在于 “體型”小，制作成本低，gif動畫常在h5動效里用做loading效果、熱門小標簽等，所以，小的動畫可以用gif來展現(xiàn)。
視頻
h5頁面中，很多效果其實是視頻，比如曾經(jīng)有一個標題叫做“該新聞已被bmw快速刪除“寶馬案例，刷爆了整個微信朋友圈，如果不帶交互效果，用視頻全屏的方式來播放動畫也是有非常不錯的選擇。
在h5制作工具中插入代碼實現(xiàn)動效
很多h5制作工具，也支持插入代碼來輔助實現(xiàn)一些功能，以木疙瘩為例，點擊腳本工具可以插入代碼。
比如做事件綁定，可以加入這樣一段代碼：
mugeda.addeventlistener('renderready',function(){});
如果對前端有深入了解的設(shè)計師，也可以將制作的h5頁面從制作工具中導(dǎo)出為html文件格式，在源文件里面添加一些前端代碼，html5加上css3.0配合java可以實現(xiàn)很多不錯的效果，比如：3d效果,svg和canvas繪圖動畫等。
以上五種方法，系統(tǒng)全面地涵蓋了目前市面上常見的h5頁面的制作方法，理解了以上方法，也就理解了動畫背后制作的原理。
在制作的過程中，針對不同的動畫效果，你可以選擇最合適的動畫制作方法來實現(xiàn)。


幾點建議讓你的網(wǎng)站脫離"矮窮矬"
5G時代——中國走在前列的原因的是什么？
新型營銷模式造就微網(wǎng)站建設(shè)
無可避免的風險管理
定制網(wǎng)站:如何打造網(wǎng)站在用戶心中形象
上海網(wǎng)站建設(shè)公司：把握網(wǎng)絡(luò)推廣效果衡量標準 專家談兩大指標
網(wǎng)站建立鏈接有哪些禁忌？
視頻網(wǎng)站SEO優(yōu)化怎么做？