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

1816次列车,王瑞儿轮奸门,竹木狼马

　　动画属性分解表示例：

　　动效制作手法 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的脚步库完成。

　　以下引用咋们IEG小伙伴的例子，来让大家一探此方法的魔力所在。

　　视频直接看H5效果：http://v.qq.com/page/o/m/7/o0174u3cim7.html

　　动效制作手法 7：video

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

　　动效制作手法 8：JavaScript

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

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

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

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

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

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