H5动效的常见制作方法

动效制作手法1；gif图片

优势：节省成本；制作效率高。

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

动效制作手法3：css3;

动效制作手法4：svg;

缺点不支持低版本的浏览器ie8及以下

知识普及：SVG，可缩放矢量图形（Scalable Vector Graphics）， 是被存成了 XML 格式的图像，

特征：

1，可被多种工具读取和修改（比如记事本）

,2，尺寸更小，可压缩性更强

,3，矢量

,4，纯粹的 XML

动效制作手法5：canvas;

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

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

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

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

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

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

动效制作手法6：flash->canvas;