html5动画工具讲解.doc

接下来介绍几款制作HTML5动画的工具，它们可以分为几类： 导出canvas动画： Flash CC(13.1)、Animation、Radi 导出DIV+CSS3动画： HTML5 Maker、Edge Animation、Tumult Hype、Nodefire 导出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版本的在线编辑器 / 编辑器的界面非常经典，有Flash的感觉，包括了工具栏、舞台、时间轴、库列表。制作动画的操作很方便，在时间轴中引入了flash的层概念，可以对每个层的元件做单独操作。制作帧动画时，不需要手工加入关键帧，只需要鼠标选中目标帧位置，然后修改元件位置即可，工具会自动为你生成关键帧。如图的虚线就是小人的逐帧动画相应的运动轨迹线，这点功能让动画制作变得非常直观。 这个编辑器除了基本形状之外，还提供了毛笔和钢笔，让开发者可以自由制作形状，有点类似Flash的功能。而且，绘制的图形还可以复制粘贴。 只针对矢量图，不能导入图片之类的。矢量图形配合时间轴，工具会自动生成补间动画。如下所示，把矢量图拉伸一下，会在时间轴上反映为渐变动画。 这个工具最终把动画导出为canvas动画，并为开发中提供了存放动画的服务器。 发布后，可以发现有一个数据文件和两个播放器文件。Animation.js是主要的解析器，minify后还有199KB。 虽然界面和交互都做得很好，但在线版的能力始终跟本地软件版本有较大差距，这个在线版只能说是该公司狠狠的炫耀了一把自己的html5能力。 小结： 优点——导出canvas动画，在线版，功能丰富，操作方便，轻量（html5实现），网页打开很快 缺点——依赖的库太大（199KB），便捷性还是不及Flash CC，没有自定义脚本功能 ============================================================================ HTML5 MAKER =================================