什么樣的H5頁面，最容易撩倒用戶？秘籍在這！

【動(dòng)畫文字特效】什么樣的H5頁面，最容易撩倒用戶？秘籍在這！

風(fēng)光無限的一張美圖，雖然能夠引人駐足流連，但卻無法最大限度的吸引人們眼球。就像各大賣場商超，各個(gè)門店時(shí)不時(shí)總會(huì)張貼一些宣傳海報(bào)，但路過的行人不說幾乎都是一掃而過吧，也很少有人會(huì)因?yàn)橐粡堨o態(tài)的海報(bào)去產(chǎn)生實(shí)際的消費(fèi)行為。如果將靜變?yōu)閯?dòng)，那就可不一樣了。

眾所周知，一個(gè)元素，動(dòng)往往會(huì)比靜要吸引眼球。一個(gè)元素動(dòng)起來，可以演化無窮的可能，充滿著趣味性，更能挑動(dòng)人們的視覺神經(jīng)。制作H5頁面也當(dāng)是如此，如果只是簡簡單單的一個(gè)頁面，頁面里核心文案就靜靜地躺在那里，怎么能比得上動(dòng)起來有著各種炫酷特效的文字呢？H5頁面若是能夠使用動(dòng)畫文字特效，那宣傳效果肯定更勝一籌，也更能撩倒你的用戶！那如何制作超級(jí)酷炫有趣味的H5頁面文字特效呢？小編這里有一份秘籍要送給你！

一、簡單三分鐘，制作各種炫酷H5頁面文字特效

人人秀H5頁面制作工具——?jiǎng)赢?a href="http://bydok.cn/content-dhwz" target="_self">文字特效

為文字增加動(dòng)畫效果

主要方法：

一、添加動(dòng)畫文字插件

二、為已有文字增加動(dòng)畫

三、直接套用模板

動(dòng)畫文字特效制作效果：

一、添加動(dòng)畫文字插件

打開人人秀編輯器，選擇互動(dòng)-特效-動(dòng)畫文字，插入動(dòng)畫文字。

對(duì)動(dòng)畫效果和文字樣式進(jìn)行設(shè)置。

輸入框：進(jìn)行動(dòng)畫文字的輸入與替換。

動(dòng)畫：點(diǎn)擊動(dòng)畫可以進(jìn)行動(dòng)畫文字的動(dòng)畫設(shè)置，如：進(jìn)入、退出。分別按照需要進(jìn)行設(shè)置即可。

排版：點(diǎn)擊排版，可對(duì)文字進(jìn)行對(duì)齊、間距、大小、顏色等設(shè)置。

二、為已有文字增加動(dòng)畫

 添加文字。

為文字增加動(dòng)畫。

選擇文字動(dòng)畫類型。

三、直接套用模板

動(dòng)畫文字是很基礎(chǔ)的一種動(dòng)畫形式，為h5頁面增加動(dòng)畫文字效果，可以有效地提升頁面的美觀性。人人秀的模板中廣泛使用動(dòng)畫文字效果。您可以從模板中套用合適的效果增加進(jìn)自己的h5之中。

如果覺得這些有點(diǎn)小簡單，這里還有更多的H5頁面動(dòng)效的制作方法喲！

H5動(dòng)效制作手法1：GIF

GIF圖片擅長于制作細(xì)節(jié)的小動(dòng)畫，位圖，優(yōu)勢在于“體型”很小，可壓縮，制作成本低，以圖片的形態(tài)適用于各種操作系統(tǒng)，無兼容性的后顧之憂。制作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頁面承載GIF圖片的方式相對(duì)以下要介紹的其他方法，是最省成本，最為簡便的。只需要以背景圖片/內(nèi)容圖片的形式在頁面上進(jìn)行引用即可。

H5動(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)畫無法在后期通過代碼進(jìn)行動(dòng)畫速率及透明度的修改。

做一個(gè)逐幀動(dòng)畫必不可缺的就是需要一張等間距的“動(dòng)畫分解逐幀圖片.png”，再通過JavaScript腳本或CSS3animation的過度函數(shù)step()來控制圖片的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頁面，它便是由逐幀分解圖+JavaScript腳本模擬逐幀動(dòng)畫拼合而成的。

H5動(dòng)效制作手法3：SVG

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

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

可被多種工具讀取和修改（比如記事本）

尺寸更小，可壓縮性更強(qiáng)

矢量

純粹的XML

一張SVG圖，其實(shí)是由一堆的定位錨點(diǎn)連線生成的。所以它可以很方便的存為文檔格式。而頁面中的引用，也是簡單的將此文本引入即可。這里必須要注意的點(diǎn)是：如果你想制作一個(gè)SVG動(dòng)畫，請(qǐng)一定要使用AI工具繪制輸出矢量圖給到工程師同學(xué)哦。

H5動(dòng)效制作手法4：Canvas

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

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)存生成。

以上就是小編今天為大家?guī)淼摹?/span>H5頁面關(guān)于動(dòng)畫文字特效的制作秘籍》，復(fù)雜的，簡單的，一應(yīng)俱全。想要嘗鮮，快來人人秀H5頁面制作工具來制作動(dòng)畫文字特效看看吧！

人人秀原創(chuàng)文章，如若轉(zhuǎn)載請(qǐng)注明出處：http://bydok.cn/content-wenzitxH5