Edge Animate是Adobe出品的制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro。Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上，将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

Edge Animate主要使用HTML5,CSS3和JavaScript。HTML5是其用于创建的doctype，2D的transform，translate，rotate，scale，skew等特效都是渲染为CSS3，如果是最新版本的浏览器，可以操作纯粹的CSS3，如果是主流大众浏览器，Edge Animate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。

Adobe edge animate CC功能

1.精确的动画。
2.直觉化的使用者界面。
3.绘图和文字工具。
4.移动路径。
5.可重复使用的符号。
6.兼容性比较不错，android机也表现良好。
单一使用做html5 css3动画，带来了巨大的福音。

Adobe edge animate CC缺点

1.不太适合，做复杂的动画与游戏，适用场景狭窄。
2.操作比较适合设计师，不适合程序员，操作效率不高，调节不是特别可控。
3.采用html5 css3相关的动画，频繁产生重排导致效率低下。
4.动画元素层级绝对定位，后期维护增加元素，层级覆盖影响较大。
5.比较适合pc端动画制作，移动端需要进行二次转换，scale进行缩放已达到多屏适配的问题。

Adobe edge animate下载地址

mac 环境下下载    window 环境下下载

在开始玩Edge Animate前，你可能有个顾虑，就是Edge Animate如果要做交互动画，生成的内容是否会打破已有的HTML文件代码结构？答案是不会。通过Edge Animate生成的HTML代码少之又少，几乎都可以用下面的代码表达方式来概述：

1
 
<div id=”Stage” class=”EDGE-xxxxxxxxxx”></div>

Edge Animate使用JSON来存储元素的定义和属性。相关的动画内容则会全部以代码块的形式嵌入上面的div中，修改和删除都不会影响原有的HTML项目代码，对HTML中元素的操作都通过JSON对象和引入的JavaScript来完成。但是有一点，edge动画对html元素的动画操作，会导致浏览器频繁重排，降低效率。

创建edge animation 工程
启动Edge Animate，创建一个新项目ctrl＋N/command+N。
edge
设定Stage（舞台）宽度