干货分享！HTML5 动效的常见制做手法

众所周知，一个元素，动每每比静更吸引眼球；

一套操做界面，合适的动态交互反馈能给用户带来更好的操做体验；

一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。

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

咱们由浅入深来挖掘这动效制做的秘密，一个入门级的小问题：看上图这几个动画例子，你们是否能说出这动画是如何制做出来的呢？而又是如何在网页之上呈现的呢？
赶快来学习吧：http://edu.51cto.com/course/courseList/id-103.html

对，答案必须是设计师们都很是熟悉的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脚本模拟逐帧动画 拼合而成的。

 

动效制做手法3：CSS3  相关CSS3知识：http://edu.51cto.com/course/course_id-4136.html

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里咱们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性尚未被浏览器有好的支持。

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

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

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

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

 

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

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

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

动画属性分解表示例：

 

动效制做手法4：SVG

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

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

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

• 尺寸更小，可压缩性更强

• 矢量

• 纯粹的 XML

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

 

动效制做手法5：Canvas

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

Canvas能够算是SVG的堂兄弟，大部分的图表动画，都是由Canvas或是SVG制做而成的，两者的动画能力类似但也有如下这些区别：

• canvas是画框，有本身固定的高宽，svg是不依赖分辨率的矢量，能够任意放大缩小。

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

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

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

• canvas彻底依赖脚本绘制做，而svg可直接使用矢量转存生成。

 

动效制做手法6：Flash->Canvas

除去上面几种常见的手法，Flash转Canvas的方法也是今年特别火爆的一种形式。既然提到曾经辉煌的Flash，那产出物必须离不开炫酷这个 形容词：经过Flash cc制做复杂又精细的动画，导成Canvas文件，动画中的交互操做，依赖Create.js的脚步库完成。

动效制做手法7：video

用视频输出很是特别的动效。

 动效制做手法8：JavaScript

其实，只要是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都须要js进行处理脚步的编写。也就是说，全部的动画特效都离不开Javascript同窗的支持。

最后咱们再以一个简单的表格来汇总这H5动效常见的制做手法，但愿读完本文的小伙伴们均可以在下次碰见新动画效果时，第一时间挖掘出它背后的制做原 理，好好运用这8大手法，人人都是优秀的动效设计师。（表格中所阐述的性能损耗和实现成本仅做参考，具体动画效果还须要具体分析，才可得知到底使用哪一种方 式是最适合的。）

相关学习：http://edu.51cto.com/course/courseList/id-103.html