搜索

论坛版块 MAKA教程 H5制作技巧

H5编辑器如何做出好看的动画效果?

跳转楼层 0 675
MIN酱
x0

发表于 2016-9-12 13:51:54 | 显示全部楼层 |阅读模式
我们都知道,动态的元素往往比静态更加吸引眼球,而这正是大家设计制作h5的时候最想要达到的效果。但真正能低成本制作出好的h5动态效果的方法能有几个?你一定很好奇那些酷炫的各大品牌的动态效果如何实现的,在告诉你之前我一定要强调的是,别人都是花了大钱的!那没预算是不是就做不了好动效,也不是!接下来我们就一起来挖掘常见的H5编辑器就能做出的动画效果。
2321231452-0.gif

动效制作手法1GIF

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

2321232056-1.png

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。制作好后的GIF,可以直接以图片的形式上传到h5编辑器里,h5编辑器像MAKA些都是支持GIF图片格式的。

动效制作手法2:video

用视频输出是非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子,相信大家瞬间就可以明白了。

image.png

动效制作手法3JavaScript动画
只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。也就是说,所有的动画特效都离不开JavaScript的支持。市面上有很多特别的Javascript脚本库,例如three.js,认真研究应用就可以做出非同凡响的动画效果哦。

1430361620129675.gif

动效制作手法4:H5编辑自带的动效

其实这几乎是以上方法中最简单的了,动效不需要自己制作,只要在编辑器上找到适合的进行使用即可。这里我以MAKA为例,编辑器自带的动效有擦一擦、来电显示、指纹解码等等,对于有特殊需求的人来说,h5开始页用这些已经足够。

image2.png

另外,元素的进出场动画也支持自定义设置了。

image5.png

吃透以上四种方法可以在你设计h5的时候帮助你实现许多酷炫的效果,当然,还有许多其他的方法,例如css\flash等等,如果大家有兴趣的话,可以自己去搜集教程学习哦!如果大家还有其他用H5编辑器实现酷炫动效的简单方法,也欢迎推荐!

编辑整理|MIN酱
素材来源|网络