基于Edge Animate开发CSS3 Animations.doc

基于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工具定义的一组文件集合，由它来支持动画的运行，那么这个文件集合就是Edge Animate的运行时环境。例如，下面的代码就是Edge Animate生成的，其中include的script就是运行时文件集合中的一个。 scripttype=“text/javascript”charset=“utf-8”src=“JSONTest_edgePreload.js” /script Edge Animate工具打开后，也会看到一个Timeline，如下图。与Flash Pro里的基于关键帧的时间轴不同，Edge Animate的时间轴是基于时间的，跟After Effects更像，但是Edge Animate仍然可以定义关键帧动画。Edge Animate里没有像Flash里对元件是Movie Clip、Button或是Graphics的定义，我们可以很简单的把Edge Animate中处理的元素全部看成是Movie Clip元素。接下来，我们就在Edge Animate来摸索一下CSS动画的制作。我们先cmd+N建立一个新的Edge项目：图中的空白区域，就是EdgeAnimate生成的动画Stage舞台，在HTML源代码中会表示为下面的代码： body divid=“Stage” /div /body cmd+s保存后，Edge Animate会为这个空白项目自动生成下列结构的文件集合。这个文件结构中的文件分别表示下列含义：first_ani.an，EdgeAnimate项目文件，双击它会直接打开EdgeAnimate软件，该文件中保存了你在EdgeAnimate软件里处理项目的信息，比如面板排列，字体显示，色彩设定等等，跟FlashCS6保存的fla文件类似。first_ani.html，项目的入口页面，可以理解为Edge Animate制作的动画首页面，它的代码里又链接了所有与动画有关的文件资源。first_ani_edge.js，包含了所有Edge Animate项目里关联的JSON结构，声明Edge Animate动画的根本信息。first_ani_edgeActions.js，包含了动画所有实例的脚本信息。first_ani_edgePreload.js，读取动画涉及到的相关文件的读取。edge_includes文件夹，包含了2个js文件，jquery-1.7.1.min.js是最小化的jQuery库，edge.1.5.0.min.js是最小化的EdgeAnimate运行时的JavaScript库,因项目需要，这个文件夹include的文件数目可能达到4个。Edge Animate的工具界面默认情况下包含了7个Window面板，均可以通过菜单的Window选项开启和关闭，分别是Tools工具，Properties属性，Stage场景，Elements元素，Library库，Timeline时间轴和lessons课程，如下图。此外还包括一个默认关闭的Window面板:code代码。关于面板的作用，我這裡不做过多的介绍，在以后的操作中，自然就会了解。在第一部分的教程里，我们用EdgeAnimate制作一个简单的动画特效。首先，使用工具栏中的字体工具在场景中写下一行字：AdobeEdge Animate.然后将其拖拽到场景中央，之后选中该字体，在Properties属性面板里找到Text栏目，可以为你输入的字体选择一项字体，你也可以选择一项AdobeCreative Cloud提供的云服务字体，此外，你还可以定义属于你的字体。下图是针对上面的几步操作步骤：选定时间轴上的text层，点击右键，选取AddKeyframes，选择TextShadow Offset(H)，生成一个针对该文字的Shadow水平偏移特效层。重复上面的操作，加入TextShadow Offset(V)和TextShadow Blur Radius层。操作结束后的结果如下图所示：接下来，选中时间轴上方的播放头，拖拽移动它到0:00.250的位置（0.25s)，然后分别点选三个CSS文字特效层名称右边的“小菱形按钮”在0.25s位置添加新的关键帧。将时间头移动回到0s的位置，选中TextShadow Offset(H)名称右侧的黄色数值，填入-4，TextShadow Offset(V)右侧的黄色数值填入-2，TextShadow Blur Radius右侧的黄色数值填入2。将时间头移动到0.25s位置，在TextShadow Offset(H)名称右侧的黄色数值，填入4，TextShadow Offset(V)名称右侧的黄色数值填入2，TextShadow Blur Radius名称右侧的黄色数值填入1。将时间头移动到0:00.500(0.5s)处，仍然为三个特效层添加关键帧，数值分别输入0,0,2。操作结束后的时间轴如下所示：设定完成后，保存，点击上图左上角的三角播放按钮，预览特效。你也可以打开html所存储的文件夹，用浏览器浏览EdgeAnimate的html文件的动画。 聚玖爱HYTW 摘要：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工具定義的一組文件集合，由它來支持動畫的運行，那麼這個文件集合就是Edge Animate的運行時環境。例如，下面的代碼就是Edge Animate生成的，其中include的script就是運行時文件集合中的一個。 scripttype=“text/javascript”charset=“utf-8”src=“JSONTest_edgePreload.js” /script Edge Animate工具打開後，也會看到一個Timeline，如下圖。與Flash Pro裡的基於關鍵幀的時間軸不同，Edge Animate的時間軸是基於時間的，跟After Effects更像，但是Edge Animate仍然可以定義關鍵幀動畫。Edge Animate裡沒有像Flash裡對元件是Movie Clip、Button或是Graphics的定義，我們可以很簡單的把Edge Animate中處理的元素全部看成是Movie Clip元素。接下來，我們就在Edge Animate來摸索一下CSS動畫的制作。我們先cmd+N建立一個新的Edge項目：圖中的空白區域，就是EdgeAnimate生成的動畫Stage舞臺，在HTML源代碼中會表示為下面的代碼： body   divid=“Stage”   /div /body cmd+s保存後，Edge Animate會為這個空白項目自動生成下列結構的文件集合。這個文件結構中的文件分別表示下列含義： first_ani.an，EdgeAnimate項目文件，雙擊它會直接打開EdgeAnimate軟件，該文件中保存瞭你在EdgeAnimate軟件裡處理項目的信息，比如面板排列，字體顯示，色彩設定等等，跟FlashCS6保存的fla文件類似。 first_ani.html，項目的入口頁面，可以理解為Edge Animate制作的動畫首頁面，它的代碼裡又鏈接瞭所有與動畫有關的文件資源。 first_ani_edge.js，包含瞭所有Edge Animate項目裡關聯的JSON結構，聲明Edge Animate動畫的根本信息。 first_ani_edgeActions.js，包含瞭動畫所有實例的腳本信息。 first_ani_edgePreload.js，讀取動畫涉及到的相關文件的讀取。 edge_includes文件夾，包含瞭2個js文件，jquery-1.7.1.min.js是最小化的jQuery庫，edge.1.5.0.min.js是最小化的EdgeAnimate運行時的JavaScript庫,因項目需要，這個文件夾include的文件數目可能達到4個。Edge Animate的工具界面默認情況下包含瞭7個Window面板，均可以通過菜單的Window選項開啟和關閉，分別是Tools工具，Properties屬性，Stage場景，Elements元素，Library庫，Timeline時間軸和lessons課程，如下圖。此外還包括一個默認關閉的Window面板:code代碼。關於面板的作用，我這裡不做過多的介紹，在以後的操作中，自然就