html5动画工具

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