创业板上市筹备企业

什么样的H5页面,最容易撩倒用户?秘籍在这!

动画文字特效什么样的H5页面,最容易撩倒用户?秘籍在这!

 

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

 

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

 

文字特效

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

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

 

为文字增加动画效果

主要方法:

一、添加动画文字插件

二、为已有文字增加动画

三、直接套用模板

 

动画文字特效制作效果:

 

 

一、添加动画文字插件

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

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

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

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

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

 

二、为已有文字增加动画

 添加文字。

为文字增加动画。

选择文字动画类型。

 

三、直接套用模板

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

 

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

 

文字特效

 

H5动效制作手法1GIF

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

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

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

 

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

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

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

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

 

H5动效制作手法3SVG

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

知识普及:SVG,可缩放矢量图形(ScalableVectorGraphics),是被存成了XML格式的图像,它有一些特别的地方:

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

尺寸更小,可压缩性更强

矢量

纯粹的XML

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

 

H5动效制作手法4Canvas

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

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

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

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

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

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

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

 

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

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