妙网科技 妙网科技 首页 妙网科技 网站开发 妙网科技 HTML5动画制作工具大全

HTML5动画制作工具大全

所属栏目: 网站开发 | 更新时间:2015-6-9 | 阅读:6626 次

接下来介绍几款制作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