html5动画工具剖析.docxVIP

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