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