最新无码国产aⅴ_日韩Av免费一级毛片_久久精品无码一区二区app_911国产免费无码专区

網(wǎng)站建設(shè)中H5動效的常見制作手法發(fā)布者：本站     時(shí)間：2022-03-21 16:03:04

眾所周知，一個(gè)元素，動往往比靜更吸引眼球；

一套操作界面，合適的動態(tài)交互反饋能給用戶帶來更好的操作體驗(yàn)；

一個(gè)H5運(yùn)營宣傳頁，炫酷的動畫特效定能助力傳播和品牌打造。

近兩年，小到loading動畫，表單動效，大到各式各樣H5運(yùn)營頁的炫酷展現(xiàn)，“動效設(shè)計(jì)”一詞可謂是火遍大江南北，而動效設(shè)計(jì)早已成為一名合格設(shè)計(jì)師必需有所知曉的領(lǐng)域。本文將通過一些案例，和大家一同挖掘幾種常見的H5動效制作手法。

H5動效的常見制作手法

我們由淺入深來挖掘這動效制作的秘密，一個(gè)入門級的小問題：看上圖這幾個(gè)動畫例子，大家是否能說出這動畫是如何制作出來的呢？而又是如何在網(wǎng)頁之上呈現(xiàn)的呢？

對，答案必須是設(shè)計(jì)師們都非常熟悉的gif小動畫了，H5動效制作的第一手法，便是GIF了。

 

動效制作手法1：GIF
GIF圖片擅長于制作細(xì)節(jié)的小動畫，位圖，優(yōu)勢在于 “體型”很小，可壓縮，制作成本低，以圖片的形態(tài)適用于各種操作系統(tǒng)，無兼容性的后顧之憂。制作GIF動畫的方式有很多，例如我們所熟悉的Photoshop時(shí)間軸，或是利用Flash，AE將動畫導(dǎo)出存成GIF格式等等。

H5動效的常見制作手法

GIF動畫最常在H5動效里當(dāng)擔(dān)loading導(dǎo)航條，熱門小標(biāo)簽等元素，要把控圖片大小和精度之間的平衡，所以它一般用于制作小細(xì)節(jié)的動畫。

H5頁面承載GIF圖片的方式相對以下要介紹的其他方法，是最省成本，最為簡便的。只需要以背景圖片/內(nèi)容圖片的形式在頁面上進(jìn)行引用即可。

聊完了GIF動畫的一些特點(diǎn)，那么我們必須同時(shí)對比一下它的堂兄弟：逐幀動畫 。

 

動效制作手法2：逐幀動畫
逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js腳本模擬編寫或是使用css3新屬性step()制作而成。step()在移動端的兼容性是很好的，但使用比較小眾。逐幀動畫和GIF動畫的差別在于，腳本可以控制逐幀動畫的快慢和動作的暫停，而GIF動畫無法在后期通過代碼進(jìn)行動畫速率及透明度的修改。

H5動效的常見制作手法

做一個(gè)逐幀動畫必不可缺的就是需要一張等間距的“動畫分解逐幀圖片.png”，再通過JavaScript腳本或CSS3 animation的過度函數(shù)step() 來控制圖片的background-position，二者結(jié)合就可以快速輸出一個(gè)逐幀動畫啦。

H5動效的常見制作手法

從以往的經(jīng)驗(yàn)看GIF動畫或是逐幀動畫，我們往往認(rèn)為它們只適合做一些小細(xì)節(jié)的動畫。其實(shí)二者也可以承載一些很獨(dú)特的動畫效果！如以下這個(gè)例子，這是陌陌的一個(gè)宣傳h5頁面，它便是由逐幀分解圖+JavaScript腳本模擬逐幀動畫 拼合而成的。

H5動效的常見制作手法



H5動效的常見制作手法

 

動效制作手法3：CSS3
CSS3應(yīng)該是動畫家族里絕對不會被遺忘的一名成員。這里我們定義它為擅長于平面層的動畫。CSS3的缺陷應(yīng)該在于它的部分屬性還沒有被瀏覽器有好的支持。先來看個(gè)例子，來自阿迪達(dá)斯的H5運(yùn)營頁《羅斯-絕不凋謝》：

H5動效的常見制作手法

這炫酷到?jīng)]朋友的動畫效果其實(shí)主要就是依靠CSS3編寫完成的。

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

Transform 變形：擁有 rotate 旋轉(zhuǎn) skew 扭曲 scale 縮放 translate 移動 matrix 矩陣變形五大特效，羅斯的例子中，便是對充分結(jié)合了這幾個(gè)變化特效的產(chǎn)物。

Transition 過渡：擁有修改執(zhí)行變換的屬性，時(shí)長，速率和延遲時(shí)間的能力，大家都很熟悉的貝塞爾曲線，也是歸屬于transition的設(shè)定之下的。

H5動效的常見制作手法

***拓展工具：貝塞爾定制傳送門***

Animation 動畫：若將Transform解釋為動作，Transition解釋為過渡，那么Animation則是連續(xù)的幾個(gè)動作，即動畫。Animation可以我們設(shè)定keyframes的值，讓元素在一段時(shí)間內(nèi)完成多個(gè)動作。

H5動效的常見制作手法

 

然而我們?nèi)绾胃哔|(zhì)高效把動畫設(shè)計(jì)傳達(dá)給工程師呢？
這里來個(gè)小小的Tips：建議使用“案例Demo或者分鏡頭腳本+動畫屬性分解表+素材切圖”的套裝！

以下圖為例：這是一個(gè)點(diǎn)擊反饋的小動畫，在無法提供Demo的時(shí)候，我們可以使用”動畫屬性分解表”的方式。動畫屬性分解表可以讓工程師根據(jù)表格內(nèi)填寫的數(shù)值進(jìn)行動畫的編寫，會比憑空的和工程師進(jìn)行交流傳達(dá)，來的更精準(zhǔn)一些。

H5動效的常見制作手法

動畫屬性分解表示例：

H5動效的常見制作手法

 

動效制作手法4：SVG
SVG，也是動效制作中不可忽略的一大熱門方法，我們定義它為擅長于線條的動畫，弊端是：IE8,Android4.2及以下支持不好。看下圖幾個(gè)例子，涉及到這種沿著元素描邊的動畫，一般都是出自SVG之手啦，當(dāng)然，它也可以實(shí)現(xiàn)一些復(fù)雜的動畫，類似這個(gè)表情圖片，不過實(shí)現(xiàn)成本是不太劃算的。

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

可被多種工具讀取和修改（比如記事本）
尺寸更小，可壓縮性更強(qiáng)
矢量
純粹的 XML
一張SVG圖，其實(shí)是由一堆的定位錨點(diǎn)連線生成的。所以它可以很方便的存為文檔格式。而頁面中的引用，也是簡單的將此文本引入即可。這里必須要注意的點(diǎn)是：如果你想制作一個(gè)SVG動畫，請一定要使用AI工具繪制輸出矢量圖給到工程師同學(xué)哦。

H5動效的常見制作手法

H5動效的常見制作手法

 

動效制作手法5：Canvas
HTML5 的新元素 <canvas>，類似畫板，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。本身是沒有繪圖能力的。所有的繪制工作必須依賴 JavaScript 完成。我們定義它為擅長于繪畫的動畫。如下圖，繪制這樣一個(gè)大量元素下落的動畫效果，就是Canvas所擅長的。

H5動效的常見制作手法

Canvas可以算是SVG的堂兄弟，大部分的圖表動畫，都是由Canvas或是SVG制作而成的，二者的動畫能力相似但也有以下這些區(qū)別：

canvas是畫框，有自己固定的高寬，svg是不依賴分辨率的矢量，可以任意放大縮小。
canvas能以.jpg的格式保存圖像，svg是文本的格式保存圖像
canvas繪制的圖像不占DOM，而svg的每個(gè)圖像都是1個(gè)DOM元素
canvas適合圖像密集型的動畫，而svg不適合大量使用，例如制作飄雪等
canvas完全依賴腳本繪制作，而svg可直接使用矢量轉(zhuǎn)存生成。
H5動效的常見制作手法

 

動效制作手法6：Flash->Canvas
除去上面幾種常見的手法，F(xiàn)lash轉(zhuǎn)Canvas的方法也是今年特別火爆的一種形式。既然提到曾經(jīng)輝煌的Flash，那產(chǎn)出物必須離不開炫酷這個(gè)形容詞：通過Flash cc制作復(fù)雜又精細(xì)的動畫，導(dǎo)成Canvas文件，動畫中的交互操作，依賴Create.js的腳步庫完成。

以下引用咋們IEG小伙伴的例子，來讓大家一探此方法的魔力所在。

H5動效的常見制作手法


 

動效制作手法7：video
用視頻輸出非常特別的動效。關(guān)于video的魅力我們用吳亦凡H5頁面的例子，相信大家瞬間就可以明白了吧^^。

H5動效的常見制作手法

 

動效制作手法8：JavaScript
其實(shí)，只要是涉及到交互反饋的動畫，小至滾屏翻頁，大到重力感應(yīng)等都需要js進(jìn)行處理腳步的編寫。也就是說，所有的動畫特效都離不開Javascript同學(xué)的支持。市面上有很多特別的Javascript腳本庫，例如three.js，細(xì)細(xì)運(yùn)用，就可以做出非同凡響的動畫效果。

H5動效的常見制作手法

最后我們再以一個(gè)簡單的表格來匯總這H5動效常見的制作手法，希望讀完本文的小伙伴們都可以在下次遇見新動畫效果時(shí)，第一時(shí)間挖掘出它背后的制作原理，好好運(yùn)用這8大手法，人人都是優(yōu)秀的動效設(shè)計(jì)師。（表格中所闡述的性能損耗和實(shí)現(xiàn)成本僅作參考，具體動畫效果還需要具體分析，才可得知到底使用哪種方式是最適合的。）