什么样的H5页面，最容易撩倒用户？秘籍在这！

【动画文字特效】什么样的H5页面，最容易撩倒用户？秘籍在这！

风光无限的一张美图，虽然能够引人驻足流连，但却无法最大限度的吸引人们眼球。就像各大卖场商超，各个门店时不时总会张贴一些宣传海报，但路过的行人不说几乎都是一扫而过吧，也很少有人会因为一张静态的海报去产生实际的消费行为。如果将静变为动，那就可不一样了。

众所周知，一个元素，动往往会比静要吸引眼球。一个元素动起来，可以演化无穷的可能，充满着趣味性，更能挑动人们的视觉神经。制作H5页面也当是如此，如果只是简简单单的一个页面，页面里核心文案就静静地躺在那里，怎么能比得上动起来有着各种炫酷特效的文字呢？H5页面若是能够使用动画文字特效，那宣传效果肯定更胜一筹，也更能撩倒你的用户！那如何制作超级酷炫有趣味的H5页面文字特效呢？小编这里有一份秘籍要送给你！

一、简单三分钟，制作各种炫酷H5页面文字特效

人人秀H5页面制作工具——动画文字特效

为文字增加动画效果

主要方法：

一、添加动画文字插件

二、为已有文字增加动画

三、直接套用模板

动画文字特效制作效果：

一、添加动画文字插件

打开人人秀编辑器，选择互动-特效-动画文字，插入动画文字。

对动画效果和文字样式进行设置。

输入框：进行动画文字的输入与替换。

动画：点击动画可以进行动画文字的动画设置，如：进入、退出。分别按照需要进行设置即可。

排版：点击排版，可对文字进行对齐、间距、大小、颜色等设置。

二、为已有文字增加动画

 添加文字。

为文字增加动画。

选择文字动画类型。

三、直接套用模板

动画文字是很基础的一种动画形式，为h5页面增加动画文字效果，可以有效地提升页面的美观性。人人秀的模板中广泛使用动画文字效果。您可以从模板中套用合适的效果增加进自己的h5之中。

如果觉得这些有点小简单，这里还有更多的H5页面动效的制作方法哟！

H5动效制作手法1：GIF

GIF图片擅长于制作细节的小动画，位图，优势在于“体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。

GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

H5动效制作手法2：逐帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”，再通过JavaScript脚本或CSS3animation的过度函数step()来控制图片的background-position，二者结合就可以快速输出一个逐帧动画啦。

从以往的经验看GIF动画或是逐帧动画，我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果！如以下这个例子，这是陌陌的一个宣传h5页面，它便是由逐帧分解图+JavaScript脚本模拟逐帧动画拼合而成的。

H5动效制作手法3：SVG

SVG，也是动效制作中不可忽略的一大热门方法，我们定义它为擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。看下图几个例子，涉及到这种沿着元素描边的动画，一般都是出自SVG之手啦，当然，它也可以实现一些复杂的动画，类似这个表情图片，不过实现成本是不太划算的。

知识普及：SVG，可缩放矢量图形（ScalableVectorGraphics），是被存成了XML格式的图像，它有一些特别的地方：

可被多种工具读取和修改（比如记事本）

尺寸更小，可压缩性更强

矢量

纯粹的XML

一张SVG图，其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师同学哦。

H5动效制作手法4：Canvas

HTML5的新元素<canvas>，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖JavaScript完成。我们定义它为擅长于绘画的动画。如下图，绘制这样一个大量元素下落的动画效果，就是Canvas所擅长的。

Canvas可以算是SVG的堂兄弟，大部分的图表动画，都是由Canvas或是SVG制作而成的，二者的动画能力相似但也有以下这些区别：

canvas是画框，有自己固定的高宽，svg是不依赖分辨率的矢量，可以任意放大缩小。

canvas能以.jpg的格式保存图像，svg是文本的格式保存图像

canvas绘制的图像不占DOM，而svg的每个图像都是1个DOM元素

canvas适合图像密集型的动画，而svg不适合大量使用，例如制作飘雪等

canvas完全依赖脚本绘制作，而svg可直接使用矢量转存生成。

以上就是小编今天为大家带来的《H5页面关于动画文字特效的制作秘籍》，复杂的，简单的，一应俱全。想要尝鲜，快来人人秀H5页面制作工具来制作动画文字特效看看吧！

人人秀原创文章，如若转载请注明出处：https://rrx.cn/content-wenzitxH5