基于EdgeAnimate开发CSS3Animations.docVIP

基于Edge Animate开发CSS3 Animations 摘要：AdobeEdgeAnimate是一个提供可视化设计UI的应用开发软件。本文主要介绍透过AdobeEdgeAnimate这款可视化工具操作CSS3的动画。 本文主要介绍通过Adobe Edge Animate这款可视化工具操作CSS 3的动画，Edge Animation制作动画是可视化的，操作CSS 3动画的方式是和JavaScript的JQuery相结合完成动画控制的过程。Edge Animate工具包含了一套称为Runtime的运行时环境，包含了可以触发鼠标，触摸和时间轴多种方式的交互API，这些交互操作命令可以被应用到独立的可视化的对象上，或者用于时间轴上一系列的可触发对象上。 注：下载Adobe Edge Animate 1.5需要注册成为Adobe Creative Cloud成员，点击这里注册下载。 Adobe Edge Animate是一个提供可视化设计UI的应用开发软件，界面有很多地方跟Adobe其他的工具如After Effects或Flash Pro类似，如果你以前操作过这些软件，那么Edge的用户界面你将会感觉非常熟悉。Edge Animate这款软件最早的一个原型是基于Adobe AIR制作的，2010年5月时，Adobe在全球的MAX大会上展示了它，通过它，可以制作输出由HTML、CSS和JavaScript组合控制的浏览器动画内容，而不需要可以播放SWF的Flash Player。经过近1年多的反复修改，Edge Animate近期发布了它的1.5版本，功能和稳定性上已经跟最早的那个Prototype完全不同。 Edge Animate主要使用HTML5、CSS3和Java Script。HTML5是其用于创建的doctype，2D的transform、translate、rotate、scale、skew等特效都是渲染为CSS 3，如果是最新版本的浏览器，可以操作纯粹的CSS 3，如果是主流大众浏览器，Edge Animate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。Edge Animate里嵌入的Java Script库主要是JQuery。 在开始玩Edge Animate前，你可能有个顾虑，就是Edge Animate如果要做交互动画，生成的内容是否会打破已有的HTML文件代码结构？答案是不会。通过Edge Animate生成的HTML代码少之又少，几乎都可以用下面的代码表达方式来概述： divid=“Stage” /div 而相关的动画内容则会全部以代码块的形式嵌入上面的div中，修改和删除都不会影响原有的HTML项目代码，对HTML中元素的操作都通过JSON对象和引入的Java Script来完成。 上面提到了，Edge Animate中主要嵌入了JQuery库，业界跟JQuery有功能上类似的大大小小的开源库有几百个，选择嵌入JQuery就是因为JQuery库的成熟程度，被采纳的程度，成功案例数量都处在世界一流水准。可能有人说，它在性能上，不入某些库；在兼容性上，不入某些库；在文件大小上，又不入某些库，但是Edge Animate作为一款通用型的工具，嵌入JQuery是处于各种设计考量平均后得出的选择，另外，JQuery对于不会写代码的设计师也非常友善，这也是很重要的一点。其实Adobe Dreamweaver CS6内也有很多功能依赖于JQuery库。 Edge Animate使用JSON来存储元素的定义和属性。举个例子，下列的JSON代码段就是在Stage上定义一个椭圆对象： content: { dom: [ { id: Ellipse , type: ellipse , rect:[ 206px , 76px , 179px , 181px , auto , auto ], borderRadius:[“50%”,”50%”,”50%”,”50%”], fill:[“rgba(77,214,240,0.76)”,[270,[[ rgba(136,92,204,1.00) ,0],[ rgba(255,255,255,1.00) ,100]]]], stroke:[0,”rgba(0,0,0,1)”,”none”] }], symbolInstances: [ ] } Adobe Edge Animate中的Runtime我觉的有必要解释一下，这个Runtime并不是以前我在博客中经常提到的Flash Player或AIR运行时，这个Edge Runtime就是特指通过Edge Animate工具定义的一组文件集合，由它来支持动画的运行，那么这个文件