国产三级久久久久精品三级,xxxx日本色伊人,一区二区三区日本精品,日韩精品免费电影在线

登錄享有權(quán)益
積分獎勵計劃
下載視頻源片
工具免費體驗
視頻制作工具
視頻工具
音頻制作工具
音頻工具
圖片設(shè)計工具
圖片工具
視頻制作
其他
牛片APP
APP專屬功能
邀請認證

你尚未認證為創(chuàng)作人或影視公司,認證即可享有:

干貨|H5動畫制作技巧

2018-09-21 15:38 發(fā)布

幕后 | 行業(yè)資訊

近年來,H5頁面火爆整個移動互聯(lián)網(wǎng),這些頁面的炫酷展現(xiàn),都離不開動畫制作,而動效設(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效果等等。

缺點:因為每一幀都不是不同的圖片,制作會增加負擔(dān)并且最終輸出的文件也很大,在移動互聯(lián)網(wǎng)上不利于傳播。

鑒于以上優(yōu)缺點,大家在動畫制作過程中可以少量地添加逐幀動畫來表現(xiàn)一些細節(jié)。


逐幀動畫的實現(xiàn)很簡單,但逐幀動畫的內(nèi)容制作,可能會讓一些同學(xué)頭痛,下面給大家羅列3種獲得逐幀動畫內(nèi)容的方法。

手繪

如果手繪能力較好的設(shè)計師可以將每一幀的畫面自己畫出來,當(dāng)然這樣工作量也會比較大


從視頻里獲取


如果看中里某個視頻里某段動畫效果,想用到項目當(dāng)中來,可以通過AE將視頻轉(zhuǎn)換成序列幀圖片,具體操作方法如下:

將視頻文件導(dǎo)入到AE中,找到合成菜單--添加到渲染隊列--在面板里將格式改為“JPG“序列或者“PNG“序列--渲染出來即是一張張內(nèi)容不同的的靜態(tài)圖片。

如果圖片太大的話,可以通過圖片壓縮工具來對圖片大小做進一步優(yōu)化。

1.jpg

2.jpg


從GIF動畫里獲取


如果看中的是GIF動畫里面的素材,同樣也可以將圖片獲取,需要先下載一個看圖軟件“2345看圖王“或者“7GIF“,可以將GIF圖里的每一幀圖片保存出來。


GIF動畫


GIF動畫的制作方法有很多種,可以通過PS來制作,也可以在AE中制作好視頻再導(dǎo)入到PS中轉(zhuǎn)成GIF動畫形式。

GIF圖片擅長于制作細節(jié)的小動畫,位圖,優(yōu)勢在于“體型”小,制作成本低,GIF動畫常在H5動效里用做loading效果、熱門小標(biāo)簽等,所以,小的動畫可以用GIF來展現(xiàn)。


視頻


H5頁面中,很多效果其實是視頻,比如曾經(jīng)有一個標(biāo)題叫做“該新聞已被BMW快速刪除“寶馬案例,刷爆了整個微信朋友圈,如果不帶交互效果,用視頻全屏的方式來播放動畫也是有非常不錯的選擇。


在H5制作工具中插入代碼實現(xiàn)動效


很多H5制作工具,也支持插入代碼來輔助實現(xiàn)一些功能,以木疙瘩為例,點擊腳本工具可以插入代碼。

3.webp.jpg

比如做事件綁定,可以加入這樣一段代碼:

mugeda.addEventListener('renderReady',function(){});

如果對前端有深入了解的設(shè)計師,也可以將制作的H5頁面從制作工具中導(dǎo)出為html文件格式,在源文件里面添加一些前端代碼,html5加上css3.0配合javascript可以實現(xiàn)很多不錯的效果,比如:3D效果,svg和canvas繪圖動畫等。

以上五種方法,系統(tǒng)全面地涵蓋了目前市面上常見的H5動畫制作的方法,理解了以上方法,也就理解了動畫制作的原理。

在動畫制作的過程中,針對不同的動畫效果,你可以選擇最合適的動畫制作方法來實現(xiàn)。


內(nèi)容由作者原創(chuàng),轉(zhuǎn)載請注明來源,附以原文鏈接

http://www.zuisun.cn/news/2352.html

表情

添加圖片

發(fā)表評論

全部評論

www.6ia.c 牛片網(wǎng)是集樣片參考、在線報價、視頻展播、需求對接、異地資源協(xié)同為一體的商業(yè)視頻服務(wù)平臺;旨在鏈接創(chuàng)作人、廣告主和消費者共建繁榮的影視生態(tài)。
推薦文章 更多+
拍片計算器-拍片估價

關(guān)注我們

牛片網(wǎng)微信公眾號
牛片網(wǎng)官方QQ群
分享給其他人

分享到微信朋友圈

商城县| 彭州市| 冷水江市| 花垣县| 平罗县| 包头市| 潼南县| 吉木萨尔县| 凤山市| 乐昌市| 修武县| 南溪县| 塔河县| 宁德市| 乳源| 榆社县| 沁源县| 保德县| 文安县| 封开县| 永顺县| 财经| 江源县| 怀化市| 瓦房店市| 邢台市| 岚皋县| 甘肃省| 长兴县| 西畴县| 沈丘县| 乌海市| 涿鹿县| 新绛县| 长岭县| 临朐县| 万年县| 衡水市| 富锦市| 遵义市| 锡林浩特市|