由浅入深科普最常用的八种HTML 5动效制作手法

萧县县委书记,天龙八部32888卡,绯闻公主志

下面为您介绍由浅入深科普最常用的八种HTML 5动效制作手法的文章:

 　　一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。

　　近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。

　　我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上呈现的呢?

　　对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。

　　动效制作手法 1：GIF

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

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

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

　　聊完了GIF动画的一些特点，那么我们必须同时对比一下它的堂兄弟：逐帧动画 。

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

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

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

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

　　视频直接观看H5效果：http://v.qq.com/page/r/4/t/r0174e7fg4t.html

　　动效制作手法 3：CSS3

　　CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子，来自阿迪达斯的H5运营页《罗斯-绝不凋谢》：

　　视频直接观看H5效果：http://v.qq.com/page/w/6/l/w0174ud2x6l.html

　　这炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。

　　这里给大家介绍一下CSS3的动画三大属性：Transform 变形，Transition 过渡，和Animation 动画。

　　Transform 变形：拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效，罗斯的例子中，便是对充分结合了这几个变化特效的产物。

　　Transition 过渡：拥有修改执行变换的属性，时长，速率和延迟时间的能力，大家都很熟悉的贝塞尔曲线，也是归属于transition的设定之下的。

　　***拓展工具：贝塞尔定制传送门***

　　Animation 动画：若将Transform解释为动作，Transition解释为过渡，那么Animation则是连续的几个动作，即动画。Animation可以我们设定keyframes的值，让元素在一段时间内完成多个动作。

　　然而我们如何高质高效把动画设计传达给工程师呢?

　　这里来个小小的Tips：建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装!

　　以下图为例：这是一个点击反馈的小动画，在无法提供Demo的时候，我们可以使用”动画属性分解表”的方式。动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写，会比凭空的和工程师进行交流传达，来的更精准一些。

如何一个可以刷爆朋友圈的H5？

好多品牌一直都有这样的梦想：做一款传播量过百万PV的H5。

一个还不错的H5是怎么产生的?

电影鬼吹灯之寻龙诀活蒸大粽子思路解析