最近接触到了h5动效方面的东西，发觉做一个动效不难，但是要做的完美就需要花费很多的时间和很大的精力了。
动效的制作：
第一种是GIF–擅长于制作细节的小动画，很多loading就是gif制作的。
第二种是逐帧动画
逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”，再通过JavaScript脚本或CSS3 animation的过度函数step() 来控制图片的background-position，二者结合就可以快速输出一个逐帧动画啦。
从以往的经验看GIF动画或是逐帧动画，我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果！如以下这个例子，这是陌陌的一个宣传h5页面，它便是由逐帧分解图+JavaScript脚本模拟逐帧动画 拼合而成的。
第三种是css3
CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子，来自阿迪达斯的H5运营页《罗斯-绝不凋谢》：
这里给大家介绍一下CSS3的动画三大属性：Transform 变形，Transition 过渡，和Animation 动画。
Transform 变形：拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效，罗斯的例子中，便是对充分结合了这几个变化特效的产物。
Transition 过渡：拥有修改执行变换的属性，时长，速率和延迟时间的能力，大家都很熟悉的贝塞尔曲线，也是归属于transition的设定之下的。
Animation 动画：若将Transform解释为动作，Transition解释为过渡，那么Animation则是连续的几个动作，即动画。Animation可以我们设定keyframes的值，让元素在一段时间内完成多个动作。
动画属性分解表示例：
动效制作手法4：SVG
SVG，也是动效制作中不可忽略的一大热门方法，我们定义它为擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。看下图几个例子，涉及到这种沿着元素描边的动画，一般都是出自SVG之手啦，当然，它也可以实现一些复杂的动画，类似这个表情图片，不过实现成本是不太划算的。
知识普及：SVG，可缩放矢量图形（Scalable Vector Graphics）， 是被存成了 XML 格式的图像，它有一些特别的地方：
可被多种工具读取和修改（比如记事本）
尺寸更小，可压缩性更强
矢量
纯粹的 XML
一张SVG图，其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师同学哦。
动效制作手法5：Canvas
HTML5 的新元素
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
用视频输出非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子，相信大家瞬间就可以明白了吧^^。
动效制作手法8：JavaScript
其实，只要是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。也就是说，所有的动画特效都离不开Javascript同学的支持。市面上有很多特别的Javascript脚本库，例如three.js，细细运用，就可以做出非同凡响的动画效果。
最后我们再以一个简单的表格来汇总这H5动效常见的制作手法；
end.