《html5动画工具.pdf》由会员分享，可在线阅读，更多相关《html5动画工具.pdf（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、接下来介绍几款制作 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 中，这个做法减小了初次加载的文件。这种实现方式对于小规模动画很有好
2、处。=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 开发完全一致 这个发布设置跟 Fla
3、sh 的界面有一定变化，主要是为了导出页面文件准备的 从 flash 转换成 HTML5 还是有一些需要注意的地方，比如对滤镜的支持比较弱，所以尽量不要使用滤镜效果。导出之后是一个页面文件和一个 JS 文件 使用 Chrome 打开，动画还是比较流畅的，基本能还原原来 Flash 动画的效果 JS 文件的大小是 162K，此外还要下载 3 个总大小为 104K 库，总共需要下载 260K 的文件，不过经过压缩之后体积有较大缩减，只有 82K。小结：优点导出 canvas 动画，支持 swf 转 html5，美术同学熟悉 缺点依赖的库太多 综上所述，Flash CC导出的HTML5动画能很好地保
4、留原Flash动画的效果，但他依赖于CreateJS库，比较适合做有一定规模的项目（比如游戏），小动画可能就不太适合了。=Animation =一个 html5 版本的在线编辑器 http:/ http:/ Flash 的感觉，包括了工具栏、舞台、时间轴、库列表。制作动画的操作很方便，在时间轴中引入了 flash 的层概念，可以对每个层的元件做单独操作。制作帧动画时，不需要手工加入关键帧，只需要鼠标选中目标帧位置，然后修改元件位置即可，工具会自动为你生成关键帧。如图的虚线就是小人的逐帧动画相应的运动轨迹线，这点功能让动画制作变得非常直观。这个编辑器除了基本形状之外，还提供了毛笔和钢笔，让开发者
5、可以自由制作形状，有点类似 Flash 的功能。而且，绘制的图形还可以复制粘贴。只针对矢量图，不能导入图片之类的。矢量图形配合时间轴，工具会自动生成补间动画。如下所示，把矢量图拉伸一下，会在时间轴上反映为渐变动画。这个工具最终把动画导出为 canvas 动画，并为开发中提供了存放动画的服务器。发布后，可以发现有一个数据文件和两个播放器文件。Animation.js 是主要的解析器，minify后还有 199KB。虽然界面和交互都做得很好，但在线版的能力始终跟本地软件版本有较大差距，这个在线版只能说是该公司狠狠的炫耀了一把自己的 html5 能力。小结：优点导出 canvas 动画，在线版，功能
6、丰富，操作方便，轻量（html5 实现），网页打开很快 缺点依赖的库太大（199KB），便捷性还是不及 Flash CC，没有自定义脚本功能 =HTML5 MAKER=一个在线的 HTML5 编辑器，但编辑器本身并不是 html5 实现的，而是用 flash。http:/ HTML5 的动画，主要是 Slide、Presentation 这样的，也就是图文排版。这个工具并没有时间轴的概念，而是采用类似 PPT 的形式，用户制作多个场景，然后把多个场景用一些过度效果串联起来。导出的时候，可以选择 html5，也可以选择传统的 swf，虽然这个网站说是收费，但其实预览效果是一个独立的 iframe
7、 页面，大可以直接 copy 下来。通过 chrome 分析，可以发现最终的实现是 js+css3。导出的动画，需要依赖一个展示 js 库（TweenMax），不过这个库只有 92K，相对前一个工具的 199K 已经好不少。另外，本次动画的数据内容和执行脚本都内嵌到 html 中，没有minify，达到 25k 左右。小结：优点界面好看，操作简单，类似 ppt 的风格，适合公司版头宣传图之类的制作。缺点只能导出 DIV+CSS3 动画，功能很有限，没有自定义脚本功能。=Edge Animation=Adobe 一款制作 HTML5 动画的软件，只支持 DIV+CSS3 的动画。http:/ 和
8、刚才的 HTML5 maker 都是 js+CSS3 动画，并不支持自定义图形。在工具栏上，只有寥寥可数的几个按钮。椭圆、圆角矩形等最终都是利用 div+css3 实现的，并没有涉及 svg 或者canvas。但相对 HTML5 maker 来说，Edge 功能更丰富，单时间轴一个功能就显得更专业了。通过在时间轴上右击，可以对某个元件添加新的关键帧，添加时需要指定本次需要变换的内容（例如位置、旋转、透明度、滤镜等等）。添加后，Edge 会自动在两次关键帧之间添加补间动画（如下图绿色部分），并显示每个补间动画的变换内容。Edge 生成的网页，是清一色 div 实现，如下图：在自定义脚本上，Edg
9、e 做得非常人性化，甚至比 Flash 还要好。时间轴面板，每个元件左侧都有一个花括号，点击这个按钮就能打开这个元件的对应脚本。这个功能主要是对元件添加鼠标交互用的，例如常见的 MouseOver，Click。另外，Edge 还提供了一些功能模版，点击后就能直接生成相应代码，这对于美术同学来说是非常方便的。使用者不需要关注 js 函数、事件触发等细节，只需要编写事件处理逻辑即可。Edge 把动画发布为一个数据 js 文件，一个库文件，一个运行 js 文件，此外还需要依赖 jquery库。小结：优点沿用 Flash 界面和操作方式，时间轴元件变换很方便，自定义脚本很人性化 缺点只能导出 js+C
10、SS3 动画，而且依赖的库较大（117KB）=Tumult Hype=一个 Mac 上的编辑器，跟 Edge Animation 类似，也是基于时间轴制作 div+css3 动画的工具，但相对 Edge 而言，Hype 功能会更精简一些。http:/ 也是生成 DIV+CSS3 动画的编辑器，跟 Edge Animation 类似，功能上也许没有太多亮点。但 nodefire 使用纯 HTML5 技术在浏览器上实现，界面非常精细和复杂，操作非常顺畅，值得一赞。类似 Edge Animatin 的工具还有好几个（Google Web Designer、Mixeek），但无论是功能上，还是使用习惯
11、上，这些工具都有劣势，所以在这不再过多介绍。=Radi=也是 Mac 上的 HTML5 编辑器，操作本身跟前几个工具差别不大，但特点是同时支持div+css3 和 canvas 动画，而且导出的动画没有依赖单独的 js 库，全部脚本都内嵌在 html 中。例子：http:/ 在这个例子中，除了 html（内嵌了 js）和几个必要的图片外，没有额外的库。这点确实非常特别，也就是说，工具会根据动画生成尽量精简的 js 代码。还有这个更大的例子：http:/ 14 秒的动画才 180k 的 js+html 代码，如果经过了压缩这个体积会更小。分析生成的代码，可以发现：1、有基础函数 LayerBas
12、e 和生成的各层代码；2、每个层记录该层的形状信息，还有每帧相应的变换数值：透明度、前变换矩阵、后变换矩阵 3、简单的资源加载和逐帧播放控制 小结：优点沿用 Flash 界面和操作方式，支持矢量绘图，导出 canvas 动画，代码内嵌到 Html而且精简，支持自定义脚本，还支持 WebGL 滤镜 缺点只有 MAC 版 相对而言，Radi 优势明显，而且它生成动画的方式非常值得我们参考。=Hippo=Hippo HTML5 编辑器有 windows 和 Mac 两个版本，特点是除了支持高级浏览器外，还能支持旧浏览器，例如 IE6。Hippo 利用了 HTML5、SVG、VML、CSS3、CSS2
13、 等多种技术。Hippo 的界面采用了 WIN8 扁平化风格，工具栏把所有功能都横向列出。不过，设计风格上，让人不得不觉得，有点弱智或者说幼稚，并不像是一个专业工具，更类似一个儿童玩具。Hippo 的交互方式跟 Flash 差别很大，一般点击工具栏后可以直接在舞台上绘图，但 Hippo并不如此。需要先添加元件到库中，再从库添加到舞台。但在时间轴上的操作类似上边提到的工具 Animation，在某个时间点对元件添加关键帧并进行变换后，工具会自动补齐中间的渐变动画。Hippo 比较先进的是它的导出功能，可以导出 png 序列图和 gif 图，也可以导出标准的 html。简单建立一个由图片和矢量图组
14、成的动画，导出 HTML 后发现，Hippo 很灵活的组合了DIV+CSS 和 SVG 技术，用 DOM 的层次结构实现了 Layer。另外，生成的动画没有依赖 js 库，所有必须的 js 都内嵌在 HTML 中，而 HTML 文件只有 12KB。小结：优点全平台支持（一次制作多处运行），同时支持位图和矢量动画，生成的文件体积小 缺点界面不够专业，动画编辑不便 总体而言，Hippo 全平台兼容，而且导出最小化 js，这点是非常赞的，除了操作不变之外，还是可以作为候选工具的。=除上述全部编辑器之外，还不得不提及两个比较牛逼的 js 库，用于辅助动作制：CreateJS：http:/ GSAP-JS：http:/ 被 Adobe CC 用于导出 html5 动画，而 GSAP 的制作者 GreenSock 一直都是 Flash 动画界的佼佼者。具体用法不在这里详细叙述，大家有兴趣可以点击链接看看。=