在IOS設備的網頁體驗中，HTML5可以替代Flash的缺失（某種程度上）。然后，HTML5動畫制作過程中各種苦逼之處，無法一一描述。主要痛點在于缺乏如Flash Pro這樣的殿堂級制作工具。Adobe推出的Edge Animate有望成為HTML5動畫設計師新的神器。
在之前的文章中，我們介紹了如何Edge Animate的一些基本用法。在本教程中，我們將學習如何如何使用Label，Trigger以及JavaScript腳本來控制Edge Animate動畫，并響應用戶在IOS上的手勢操作，比如滑動。

你可以使用ipad等移動設備訪問DEMO

項目文件下載：http://vdisk.weibo.com/s/uVPKa

下載Adobe Edge Animate制作工具

在本教程發布的時間，Edge Animate版本為1.5，可以在Adobe云創意平臺上免費下載。您只需要在注冊地址注冊即可登錄下載。

教程

制作上述動畫，要完成三個任務：

制作Logo元件：首先需要在舞臺中導入Edge Animate圖標，轉換成元件后，制作正向和反向旋轉效果。
通過JavaScript腳本，監聽鼠標或者觸摸手勢事件，計算鼠標或者手勢滑動的方向
通過JavaScript腳本，控制Logo元件移動方向

本文不會逐一介紹每一個步驟的詳細操作過程，而只就關鍵點進行解釋。如果你不甚了解如何使用Edge Animate，可以參考本站其他教程。

制作旋轉LOGO元件

在舞臺中導入Edge Animate元件（可在上述下載的項目文件，解壓后的image目錄中找到），通過Ctrl+Y/CMD+Y轉換成元件，命名為symLogo。之后，可以刪除舞臺上導入的圖片元素，然后編輯symLogo元件。

在本教程完成的示例中，當鼠標或者手勢向右滑動，logo將順時針旋轉，而向左滑動，logo會相應逆時針旋轉。因此，在symLogo的元件編輯狀態下，我們需要為其加入兩端動畫：“0.5秒內順時針旋轉360度” 和 “0.5秒內逆時針旋轉360度”。你可以很容易的使用Transform下的rotate屬性來實現，或者使用右側面板上方的“Transform Tools”來制作。

為了未來能夠方便的通過JavaScript腳本來控制旋轉，在時間軸上，我們需要在每段動畫的起始位置加入標簽Label：分別為rotate和rotateReverse。你只需要把播放頭移到動畫的起始位置，然后點擊時間軸左側如下圖標志的小箭頭按鈕即可插入并編輯標簽。

加入label和trigger的symbol

在播放時任意一段動畫時，我們都期望在旋轉到一周時自動停止，因此把播放頭移至每段動畫的結尾幀處，點擊時間軸左側的{}狀代碼按鈕，插入trigger，即觸發器。觸發器是一段javascript腳本，當播放頭移到trigger所在的幀時，Edge Animate即會自動觸發調用。Trigger的代碼類似如下：

Trigger觸發器

至此，Logo元件制作完畢。接下來，我們回到主舞臺來通過JavaScript響應用戶操作，控制logo的滾動。

設置鼠標和觸摸的監聽器

Edge Animate是基于jQuery的，因此通過Edge Animate提供的JavaScript API，我們可以獲得舞臺上的元件，元件實例，并將其轉換成更方便操作的jQuery對象。Edge Animate是一個開放的環境，也可以非常方便的導入第三方javaScript庫，我們在之后的教程中會逐步涉獵。

為了響應用戶操作，首先我們要偵聽用戶鼠標事件或者觸摸touch事件。根據滑動開始和結束時鼠標或者觸摸的位置，我們可以判斷滑動的方向，從而進一步控制logo的滾動以及移動方向。同時，我們還要使用Edge Animate javaScript API提供的sym.setVariable()命令記錄操作的關鍵變量值，來存儲計算出來的移動方向，當前logo移動位置，每幀移動步進。我們在Stage的compositionReady事件中完成上述工作。如下圖：

Stage compositionReady事件

完整代碼如下，可以參考其中注視說明：

//設置變量，分別控制移動方向，當前位置和步進。
	sym.setVariable("Direction", "1");
	sym.setVariable("LeftPosition", "0");
	sym.setVariable("Step", "100"); 
//監聽鼠標mousedown事件，記錄鼠標起始位置
	$(document).bind("mousedown", function(e) { 
			 e.preventDefault();
			 var xStart = e.originalEvent.clientX;
			 sym.setVariable('xStart', xStart);
	});
//監聽鼠標mouseup事件，記錄鼠標結束位置，并依次計算滑動方向
	$(document).bind("mouseup", function(e) { 
		 e.preventDefault();
		 xStart = sym.getVariable('xStart');
		 var xEnd = e.originalEvent.clientX;

		if (xEnd > xStart)
		{
                       //向右滑動
			sym.setVariable("Direction", "1");
		}
		else if (xEnd  xStart)
		  {
				sym.setVariable("Direction", "1");
		  }
			 else if (xEnd < xStart)
		  {
				sym.setVariable("Direction", "0");
		  }
	});

使用腳本控制LOGO移動

如下圖，可以通過Timeline左端的{}狀代碼按鈕，為Timeline的complete事件添加偵聽器代碼。如下圖：

Timeline complete事件

timeline的complete事件完整代碼如下：

         //獲取logo元件
	var symLogo=sym.getSymbol("logo");
        //獲取stage jQuery對象   
   	var stage = sym.$("stage");
        //獲取舞臺寬度   
   	var width=parseInt(stage.css("width"));
        //獲取logo元件元素實例   
   	var logo=symLogo.getSymbolElement();

        //獲取logo元件的寬度   
   	var logoWidth=parseInt(logo.css("width"));
        //獲取當前logo偏移位置。因為使用jQuery.animate控制logo移動，并不會真正改變logo的left css屬性，因此，需要設置變量記載   
   	var x = sym.getVariable("LeftPosition");
        //獲取步進 
	var step=parseInt(sym.getVariable("Step"));
   	var newX;

        //確保logo不會移出屏幕，一旦到達stage邊緣，即改變方向
	if(x>width-logoWidth){
		sym.setVariable("Direction", "0");
	}
	if(x0){
   		symLogo.play("rotate");
   		x=parseInt(x+step); 			
   	}else{
   		symLogo.play("rotateReverse");
   		x=parseInt(x-step);
   	}
        //使用jQuery的animate方法控制logo移動   
	logo.animate({"left":x +"px"},500,"linear",function(){
	 	// 移動完成時，記錄新的位置，并重播Edge Aniamte動畫。
		sym.setVariable("LeftPosition",parseInt(x));
		sym.play(0);
   	});