基于Edge Animate可视化工具开发CSS3动画


今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和Jav...
       今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和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和JavaScript。HTML5是其用于创建的doctype,2D的transform,translate,rotate,scale,skew等特效都是渲染为CSS3,如果是最新版本的浏览器,可以操作纯粹的CSS3,如果是主流大众浏览器,Edge Animate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。Edge Animate里嵌入的JavaScript库主要是JQuery。
       在开始玩Edge Animate前,你可能有个顾虑,就是Edge Animate如果要做交互动画,生成的内容是否会打破已有的HTML文件代码结构?答案是不会。通过Edge Animate生成的HTML代码少之又少,几乎都可以用下面的代码表达方式来概述:
<div id=”Stage” class=”EDGE-xxxxxxxxxx”></div>

       而相关的动画内容则会全部以代码块的形式嵌入上面的div中,修改和删除都不会影响原有的HTML项目代码,对HTML中元素的操作都通过JSON对象和引入的JavaScript来完成。
       上面提到了,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: []
}

       而这个椭圆对象,在Edge Animate的Stage上体现出来的是下图的样子。


       Adobe Edge Animate中的Runtime我觉的有必要解释一下,这个Runtime并不是以前我在博客中经常提到的Flash Player或AIR运行时,这个Edge Runtime就是特指通过Edge Animate工具定义的一组文件集合,由它来支持动画的运行,那么这个文件集合就是Edge Animate的运行时环境。例如,下面的代码就是Edge Animate生成的,其中include的script就是运行时文件集合中的一个。
<script type="text/javascript" charset="utf-8" src="JSONTest_edgePreload.js"></script>

       Edge Animate工具打开后,也会看到一个Timeline,如下图。

标签: 开发CSS