众所周知，HTML5具有网页多媒体特性和CSS3特性，非常适合制作动画效果。不过你知道HTML5动效常见的制作手法有哪些吗?今天千锋郑州老师就来给大家简单阐述8种方式，方便大家理解运用。

　　1、JavaScript。涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。

　　2、逐帧动画。利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。

　　3、GIF。擅长于制作细节的小动画、位图，如Photoshop时间轴。优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。

　　4、SVG。擅长于线条的动画，一张SVG图，其实是由一堆的定位锚点连线生成的。SVG可以很方便的存为文档格式，页面中的引用，也是简单的将此文本引入即可。弊端是：IE8,Android4.2及以下支持不好。

　　5、CSS3。擅长于平面层的动画，CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。CSS3的动画三大属性：Transform 变形、Transition 过渡和Animation 动画。

　　6、Canvas。擅长图表动画，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身没有绘图能力，所有的绘制工作必须依赖JavaScript 完成。

　　7、video。用视频输出非常特别的动效。

　　当然，HTML5制作动效的方式还有Flash转Canvas，这也是今年特别火爆的一种形式。作为曾经的动画制作最佳工具，你可以通过Flash cc制作复杂又精细的动画，导成Canvas文件，动画中的交互操作，依赖Create.js的脚步库完成。

　　想要成为一个高端的HTML5工程师，仅仅掌握动效制作是不够的，你还需要掌握常用的框架及库，还需要具备较多的实战开发经验。参加千锋郑州HTML5培训，你不仅可以学到系统扎实的理论知识，还可接触HTML5开发、微信开发、微信支付、小程序开发、Web网站开发、Web管理系统开发等项目，打造的是拥有大前端视角与全栈思维高级工程师。

上一篇

Java基础培训教程之引用知识解析

下一篇

想成为专业的UI设计师 你需要掌握这些软件