基于Edge Animate可視化工具開發CSS3動畫

今天這篇文章主要介紹透過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，如下圖。

與Flash Pro里的基于關鍵幀的時間軸不同，Edge Animate的時間軸是基于時間的，跟After Effects更像，但是Edge Animate仍然可以定義關鍵幀動畫。Edge Animate里沒有像Flash里對元件是MovieClip,Button或是Graphics的定義，我們可以很簡單的把Edge Animate中處理的元素全部看成是MovieClip元素。接下來，我們就在Edge Animate來摸索一下CSS動畫的制作。
我們先cmd+N建立一個新的Edge項目（或者在Edge Animate打開后開啟的歡迎界面的左側點擊Create New來創建）：

圖中的空白區域，就是Edge Animate生成的動畫Stage舞臺，在HTML源代碼中會表示為下面的代碼：

<div class="EDGE-572947464" id="Stage"></div>

cmd+s保存后，Edge Animate會為這個空白項目自動生成下列結構的文件集合。

這個文件結構中的文件分別表示下列含義：

• first_ani.an，Edge Animate項目文件，雙擊它會直接打開Edge Animate軟件，該文件中保存了你在Edge Animate軟件里處理項目的信息，比如面板排列，字體顯示，色彩設定等等，跟Flash CS6保存的fla文件類似。
• first_ani.html，項目的入口頁面，可以理解為Edge Animate制作的動畫首頁面，它的代碼里又鏈接了所有與動畫有關的文件資源。
• first_ani_edge.js，包含了所有Edge Animate項目里關聯的JSON結構，聲明Edge Animate動畫的根本信息。
• first_ani_edgeActions.js，包含了動畫所有實例的腳本信息。

edge_includes文件夾，包含了2個js文件，jquery-1.7.1.min.js是最小化的jQuery庫，edge.1.5.0.min.js是最小化的Edge Animate運行時的JavaScript庫,因項目需要，這個文件夾include的文件數目可能達到4個。

Edge Animate的工具界面默認情況下包含了7個Window面板，均可以通過菜單的Window選項開啟和關閉，分別是Tools工具，Properties屬性，Stage場景，Elements元素，Library庫，Timeline時間軸和lessons課程，如下圖。此外還包括一個默認關閉的Window面板:code代碼。關于面板的作用，我這裡不做過多的介紹，在以后的操作中，自然就會了解。

在第一部分的教程里，我們用Edge Animate制作一個簡單的動畫特效。首先，使用工具欄中的字體工具在場景中寫下一行字：Adobe Edge Animate.然后將其拖拽到場景中央，之后選中該字體，在Properties屬性面板里找到Text欄目，可以為你輸入的字體選擇一項字體，你也可以選擇一項Adobe Creative Cloud提供的云服務字體，此外，你還可以定義屬于你的字體（可以靠這項調用中文字庫，其實custom項就是定制font-family屬性）。下圖是針對上面的幾步操作步驟：

選定時間軸上的text層，點擊右鍵，選取Add Keyframes，選擇Text Shadow Offset(H)，生成一個針對該文字的Shadow水平偏移特效層。重復上面的操作，加入Text Shadow Offset(V)和Text Shadow Blur Radius層。操作結束后的結果如下圖所示：

接下來，選中時間軸上方的播放頭，拖拽移動它到0:00.250的位置（0.25s)，然后分別點選三個CSS文字特效層名稱右邊的“小菱形按鈕”在0.25s位置添加新的關鍵幀。將時間頭移動回到0s的位置，選中Text Shadow Offset(H)名稱右側的黃色數值，填入-4，Text Shadow Offset(V)右側的黃色數值填入-2，Text Shadow Blur Radius右側的黃色數值填入2。將時間頭移動到0.25s位置，在Text Shadow Offset(H)名稱右側的黃色數值，填入4，Text Shadow Offset(V)名稱右側的黃色數值填入2，Text Shadow Blur Radius名稱右側的黃色數值填入1。將時間頭移動到0:00.500(0.5s)處，仍然為三個特效層添加關鍵幀，數值分別輸入0,0,2。操作結束后的時間軸如下所示：

設定完成后，保存，點擊上圖左上角的三角播放按鈕，預覽特效。你也可以打開html所存儲的文件夾，用瀏覽器瀏覽Edge Animate的html文件的動畫。

這個範例的下載地址在這里。

今天本部分的教程就到這里，下一部分的教程會繼續深入討論Edge Animate的動畫制作過程。