基于edge animate开发css3 animations

《基于edge animate开发css3 animations》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、基于EdgeAnimate开发CSS3Animations摘要：AdobeEdgeAnimate是一个提供可视化设计UI的应用开发软件。本文主要介绍透过AdobeEdgeAnimate这款可视化工具操作CSS3的动画。 本文主要介绍通过AdobeEdgeAnimate这款可视化工具操作CSS3的动画，EdgeAnimation制作动画是可视化的，操作CSS3动画的方式是和JavaScript的JQuery相结合完成动画控制的过程。EdgeAnimate工具包含了一套称为Runtime的运行时环境，包含了

2、可以触发鼠标，触摸和时间轴多种方式的交互API，这些交互操作命令可以被应用到独立的可视化的对象上，或者用于时间轴上一系列的可触发对象上。注：下载AdobeEdgeAnimate1.5需要注册成为AdobeCreativeCloud成员，点击这里注册下载。AdobeEdgeAnimate是一个提供可视化设计UI的应用开发软件，界面有很多地方跟Adobe其他的工具如AfterEffects或FlashPro类似，如果你以前操作过这些软件，那么Edge的用户界面你将会感觉非常熟悉。EdgeAnimate这款软

3、件最早的一个原型是基于AdobeAIR制作的，2010年5月时，Adobe在全球的MAX大会上展示了它，通过它，可以制作输出由HTML、CSS和JavaScript组合控制的浏览器动画内容，而不需要可以播放SWF的FlashPlayer。经过近1年多的反复修改，EdgeAnimate近期发布了它的1.5版本，功能和稳定性上已经跟最早的那个Prototype完全不同。EdgeAnimate主要使用HTML5、CSS3和JavaScript。HTML5是其用于创建的doctype，2D的transform、

4、translate、rotate、scale、skew等特效都是渲染为CSS3，如果是最新版本的浏览器，可以操作纯粹的CSS3，如果是主流大众浏览器，EdgeAnimate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。EdgeAnimate里嵌入的JavaScript库主要是JQuery。在开始玩EdgeAnimate前，你可能有个顾虑，就是EdgeAnimate如果要做交互动画，生成的内容是否会打破已有的HTML文件代码结构？答案是不会。通过EdgeAnimate生成的HTM

5、L代码少之又少，几乎都可以用下面的代码表达方式来概述：divid=“Stage”/div而相关的动画内容则会全部以代码块的形式嵌入上面的div中，修改和删除都不会影响原有的HTML项目代码，对HTML中元素的操作都通过JSON对象和引入的JavaScript来完成。上面提到了，EdgeAnimate中主要嵌入了JQuery库，业界跟JQuery有功能上类似的大大小小的开源库有几百个，选择嵌入JQuery就是因为JQuery库的成熟程度，被采纳的程度，成功案例数量都处在世界一流水准。可能有人说，它在性能上

6、，不入某些库；在兼容性上，不入某些库；在文件大小上，又不入某些库，但是EdgeAnimate作为一款通用型的工具，嵌入JQuery是处于各种设计考量平均后得出的选择，另外，JQuery对于不会写代码的设计师也非常友善，这也是很重要的一点。其实AdobeDreamweaverCS6内也有很多功能依赖于JQuery库。EdgeAnimate使用JSON来存储元素的定义和属性。举个例子，下列的JSON代码段就是在Stage上定义一个椭圆对象： content:{dom:[{id:Ellipse,type:el

7、lipse,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:[]}AdobeEdgeAnimate中的Ru

8、ntime我觉的有必要解释一下，这个Runtime并不是以前我在博客中经常提到的FlashPlayer或AIR运行时，这个EdgeRuntime就是特指通过EdgeAnimate工具定义的一组文件集合，由它来支持动画的运行，那么这个文件集合就是EdgeAnimate的运行时环境。例如，下面的代码就是EdgeAnimate生成的，其中include的script就是运行时文件集合中的一个。scripttype=“text/javascript