HTML5动画制作工具大全

接下来介绍几款制作HTML5动画的工具，它们可以分为几类：
1、导出canvas动画：
Flash CC(13.1)、Animation、Radi
2、导出DIV+CSS3动画：
HTML5 Maker、Edge Animation、Tumult Hype、Nodefire
3、导出SVG动画：
Hippo

基本上所有工具导出的动画都会依赖一个独立的js库，这个库用于解析数据，展示动画。而其中两个工具（Radi和Hippo）就比较突出，它们并不依赖独立js库，而是把必须的最精简的js直接内嵌到HTML中，这个做法减小了初次加载的文件。这种实现方式对于小规模动画很有好处。

============================================================================
Flash CC 13.1
============================================================================

Flash CC 13.1可以使用使用CreateJS库直接导出Canvas动画，CreateJS是一个HTML5的游戏开发引擎。Flash一直是动画制作的代表，而新版13.1让swf和html5无缝衔接，功能非常强大，所以这里将对Flash CC作重点介绍。

这里我们使用道具表情里的机枪动画测试一下他的表现。

可以看到CC  13.1新增HTML5 Canvas类型文档
工作界面跟传统Flash开发界面是一致的，很容易上手，这里我们导入的是道具表情的机枪动画
工作流程也跟Flash开发完全一致
这个发布设置跟Flash的界面有一定变化，主要是为了导出页面文件准备的
从flash转换成HTML5还是有一些需要注意的地方，比如对滤镜的支持比较弱，所以尽量不要使用滤镜效果。
导出之后是一个页面文件和一个JS文件
使用Chrome打开，动画还是比较流畅的，基本能还原原来Flash动画的效果
JS文件的大小是162K，此外还要下载3个总大小为104K库，总共需要下载260K
的文件，不过经过压缩之后体积有较大缩减，只有82K。

小结：
优点——导出canvas动画，支持swf转html5，美术同学熟悉
缺点——依赖的库太多
综上所述，Flash CC导出的HTML5动画能很好地保留原Flash动画的效果，但他依赖于CreateJS库，比较适合做有一定规模的项目（比如游戏），小动画可能就不太适合了。

============================================================================
Animation
============================================================================

一个html5版本的在线编辑器
http://animatron.com/
类似的还有 http://www.mixeek.com/ ，但后者就做得粗糙很多。

内容太多就不复制粘贴了，直接上word下载地址：

html5动画工具.doc