2022-05-30 分類: 網(wǎng)站建設(shè)
創(chuàng)新互聯(lián)為你推出眾所周知,HTML5 動(dòng)效的常見(jiàn)制作方法。一個(gè)元素,動(dòng)往往比靜更吸引眼球;一套操作界面,合適的動(dòng)態(tài)交互反饋能給用戶帶來(lái)更好的操作體驗(yàn);一個(gè)H5運(yùn)營(yíng)宣傳頁(yè),炫酷的動(dòng)畫特效定能助力傳播和品牌打造。近兩年,小到loading動(dòng)畫,表單動(dòng)效,大到各式各樣H5運(yùn)營(yíng)頁(yè)的炫酷展現(xiàn),“動(dòng)效設(shè)計(jì)”一詞可謂是火遍大江南北,而動(dòng)效設(shè)計(jì)早已成為一名合格設(shè)計(jì)師必需有所知曉的領(lǐng)域。本文將通過(guò)一些案例,和大家一同挖掘幾種常見(jiàn)的H5動(dòng)效制作手法。
我們由淺入深來(lái)挖掘這動(dòng)效制作的秘密,一個(gè)入門級(jí)的小問(wèn)題:看上圖這幾個(gè)動(dòng)畫例子,大家是否能說(shuō)出這動(dòng)畫是如何制作出來(lái)的呢?而又是如何在網(wǎng)頁(yè)之上呈現(xiàn)的呢?
對(duì),答案必須是設(shè)計(jì)師們都非常熟悉的gif小動(dòng)畫了,H5動(dòng)效制作的第一手法,便是GIF了。
動(dòng)效制作手法1:GIF
GIF圖片擅長(zhǎng)于制作細(xì)節(jié)的小動(dòng)畫,位圖,優(yōu)勢(shì)在于 “體型”很小,可壓縮,制作成本低,以圖片的形態(tài)適用于各種操作系統(tǒng),無(wú)兼容性的后顧之憂。制作GIF動(dòng)畫的方式有很多,例如我們所熟悉的Photoshop時(shí)間軸,或是利用Flash,AE將動(dòng)畫導(dǎo)出存成GIF格式等等。
GIF動(dòng)畫最常在H5動(dòng)效里當(dāng)擔(dān)loading導(dǎo)航條,熱門小標(biāo)簽等元素,要把控圖片大小和精度之間的平衡,所以它一般用于制作小細(xì)節(jié)的動(dòng)畫。
H5頁(yè)面承載GIF圖片的方式相對(duì)以下要介紹的其他方法,是最省成本,最為簡(jiǎn)便的。只需要以背景圖片/內(nèi)容圖片的形式在頁(yè)面上進(jìn)行引用即可。
聊完了GIF動(dòng)畫的一些特點(diǎn),那么我們必須同時(shí)對(duì)比一下它的堂兄弟:逐幀動(dòng)畫 。
動(dòng)效制作手法2:逐幀動(dòng)畫
逐幀動(dòng)畫即是利用一張等間距的動(dòng)畫分解逐幀圖片,由js腳本模擬編寫或是使用css3新屬性step()制作而成。step()在移動(dòng)端的兼容性是很好的,但使用比較小眾。逐幀動(dòng)畫和GIF動(dòng)畫的差別在于,腳本可以控制逐幀動(dòng)畫的快慢和動(dòng)作的暫停,而GIF動(dòng)畫無(wú)法在后期通過(guò)代碼進(jìn)行動(dòng)畫速率及透明度的修改。
做一個(gè)逐幀動(dòng)畫必不可缺的就是需要一張等間距的“動(dòng)畫分解逐幀圖片.png”,再通過(guò)JavaScript腳本或CSS3 animation的過(guò)度函數(shù)step() 來(lái)控制圖片的background-position,二者結(jié)合就可以快速輸出一個(gè)逐幀動(dòng)畫啦。
從以往的經(jīng)驗(yàn)看GIF動(dòng)畫或是逐幀動(dòng)畫,我們往往認(rèn)為它們只適合做一些小細(xì)節(jié)的動(dòng)畫。其實(shí)二者也可以承載一些很獨(dú)特的動(dòng)畫效果!如以下這個(gè)例子,這是陌陌的一個(gè)宣傳h5頁(yè)面,它便是由逐幀分解圖+JavaScript腳本模擬逐幀動(dòng)畫 拼合而成的。
動(dòng)效制作手法3:CSS3
CSS3應(yīng)該是動(dòng)畫家族里絕對(duì)不會(huì)被遺忘的一名成員。這里我們定義它為擅長(zhǎng)于平面層的動(dòng)畫。CSS3的缺陷應(yīng)該在于它的部分屬性還沒(méi)有被瀏覽器有好的支持。先來(lái)看個(gè)例子,來(lái)自阿迪達(dá)斯的H5運(yùn)營(yíng)頁(yè)《羅斯-絕不凋謝》:
這炫酷到?jīng)]朋友的動(dòng)畫效果其實(shí)主要就是依靠CSS3編寫完成的。這里給大家介紹一下CSS3的動(dòng)畫三大屬性:Transform 變形,Transition 過(guò)渡,和Animation 動(dòng)畫。
Transform 變形:擁有 rotate 旋轉(zhuǎn) skew 扭曲 scale 縮放 translate 移動(dòng) matrix 矩陣變形五大特效,羅斯的例子中,便是對(duì)充分結(jié)合了這幾個(gè)變化特效的產(chǎn)物。
Transition 過(guò)渡:擁有修改執(zhí)行變換的屬性,時(shí)長(zhǎng),速率和延遲時(shí)間的能力,大家都很熟悉的貝塞爾曲線,也是歸屬于transition的設(shè)定之下的。
***拓展工具:貝塞爾定制傳送門***
Animation 動(dòng)畫:若將Transform解釋為動(dòng)作,Transition解釋為過(guò)渡,那么Animation則是連續(xù)的幾個(gè)動(dòng)作,即動(dòng)畫。Animation可以我們?cè)O(shè)定keyframes的值,讓元素在一段時(shí)間內(nèi)完成多個(gè)動(dòng)作。
然而我們?nèi)绾胃哔|(zhì)高效把動(dòng)畫設(shè)計(jì)傳達(dá)給工程師呢?
這里來(lái)個(gè)小小的Tips:建議使用“案例Demo或者分鏡頭腳本+動(dòng)畫屬性分解表+素材切圖”的套裝!以下圖為例:這是一個(gè)點(diǎn)擊反饋的小動(dòng)畫,在無(wú)法提供Demo的時(shí)候,我們可以使用”動(dòng)畫屬性分解表”的方式。動(dòng)畫屬性分解表可以讓工程師根據(jù)表格內(nèi)填寫的數(shù)值進(jìn)行動(dòng)畫的編寫,會(huì)比憑空的和工程師進(jìn)行交流傳達(dá),來(lái)的更精準(zhǔn)一些。
動(dòng)畫屬性分解表示例:
動(dòng)效制作手法4:SVG
SVG,也是動(dòng)效制作中不可忽略的一大熱門方法,我們定義它為擅長(zhǎng)于線條的動(dòng)畫,弊端是:IE8,Android4.2及以下支持不好。看下圖幾個(gè)例子,涉及到這種沿著元素描邊的動(dòng)畫,一般都是出自SVG之手啦,當(dāng)然,它也可以實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫,類似這個(gè)表情圖片,不過(guò)實(shí)現(xiàn)成本是不太劃算的。
知識(shí)普及:SVG,可縮放矢量圖形(Scalable Vector Graphics), 是被存成了 XML 格式的圖像,它有一些特別的地方:
可被多種工具讀取和修改(比如記事本)
尺寸更小,可壓縮性更強(qiáng)
矢量
一張SVG圖,其實(shí)是由一堆的定位錨點(diǎn)連線生成的。所以它可以很方便的存為文檔格式。而頁(yè)面中的引用,也是簡(jiǎn)單的將此文本引入即可。這里必須要注意的點(diǎn)是:如果你想制作一個(gè)SVG動(dòng)畫,請(qǐng)一定要使用AI工具繪制輸出矢量圖給到工程師同學(xué)哦。
動(dòng)效制作手法5:Canvas
HTML5 的新元素 ,類似畫板,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。本身是沒(méi)有繪圖能力的。所有的繪制工作必須依賴 JavaScript 完成。我們定義它為擅長(zhǎng)于繪畫的動(dòng)畫。如下圖,繪制這樣一個(gè)大量元素下落的動(dòng)畫效果,就是Canvas所擅長(zhǎng)的。
Canvas可以算是SVG的堂兄弟,大部分的圖表動(dòng)畫,都是由Canvas或是SVG制作而成的,二者的動(dòng)畫能力相似但也有以下這些區(qū)別:
canvas是畫框,有自己固定的高寬,svg是不依賴分辨率的矢量,可以任意放大縮小。
canvas能以.jpg的格式保存圖像,svg是文本的格式保存圖像
canvas繪制的圖像不占DOM,而svg的每個(gè)圖像都是1個(gè)DOM元素
canvas適合圖像密集型的動(dòng)畫,而svg不適合大量使用,例如制作飄雪等
canvas完全依賴腳本繪制作,而svg可直接使用矢量轉(zhuǎn)存生成。
動(dòng)效制作手法6:Flash->Canvas
除去上面幾種常見(jiàn)的手法,F(xiàn)lash轉(zhuǎn)Canvas的方法也是今年特別火爆的一種形式。既然提到曾經(jīng)輝煌的Flash,那產(chǎn)出物必須離不開炫酷這個(gè)形容詞:通過(guò)Flash cc制作復(fù)雜又精細(xì)的動(dòng)畫,導(dǎo)成Canvas文件,動(dòng)畫中的交互操作,依賴Create.js的腳步庫(kù)完成。
以下引用咋們IEG小伙伴的例子,來(lái)讓大家一探此方法的魔力所在。
動(dòng)效制作手法7:video
用視頻輸出非常特別的動(dòng)效。關(guān)于video的魅力我們用吳亦凡H5頁(yè)面的例子,相信大家瞬間就可以明白了吧^^。
動(dòng)效制作手法8:JavaScript
其實(shí),只要是涉及到交互反饋的動(dòng)畫,小至滾屏翻頁(yè),大到重力感應(yīng)等都需要js進(jìn)行處理腳步的編寫。也就是說(shuō),所有的動(dòng)畫特效都離不開Javascript同學(xué)的支持。市面上有很多特別的Javascript腳本庫(kù),例如three.js,細(xì)細(xì)運(yùn)用,就可以做出非同凡響的動(dòng)畫效果。最后我們?cè)僖砸粋€(gè)簡(jiǎn)單的表格來(lái)匯總這H5動(dòng)效常見(jiàn)的制作手法,希望讀完本文的小伙伴們都可以在下次遇見(jiàn)新動(dòng)畫效果時(shí),第一時(shí)間挖掘出它背后的制作原理,好好運(yùn)用這8大手法,人人都是優(yōu)秀的動(dòng)效設(shè)計(jì)師。(表格中所闡述的性能損耗和實(shí)現(xiàn)成本僅作參考,具體動(dòng)畫效果還需要具體分析,才可得知到底使用哪種方式是最適合的。)
本文標(biāo)題:HTML5動(dòng)效的常見(jiàn)制作方法
鏈接分享:http://m.rwnh.cn/news10/161310.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、微信小程序、關(guān)鍵詞優(yōu)化、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容