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

你可以使用ipad等移動設(shè)備訪問DEMO

項(xiàng)目文件下載：http://vdisk.weibo.com/s/uVPKa

下載Adobe Edge Animate制作工具

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

教程

制作上述動畫，要完成三個任務(wù)：

1. 制作Logo元件：首先需要在舞臺中導(dǎo)入Edge Animate圖標(biāo)，轉(zhuǎn)換成元件后，制作正向和反向旋轉(zhuǎn)效果。
2. 通過JavaScript腳本，監(jiān)聽鼠標(biāo)或者觸摸手勢事件，計(jì)算鼠標(biāo)或者手勢滑動的方向
3. 通過JavaScript腳本，控制Logo元件移動方向

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

制作旋轉(zhuǎn)LOGO元件

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

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

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

加入label和trigger的symbol

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

Trigger觸發(fā)器

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

設(shè)置鼠標(biāo)和觸摸的監(jiān)聽器

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

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

Stage compositionReady事件

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

//設(shè)置變量，分別控制移動方向，當(dāng)前位置和步進(jìn)。
	sym.setVariable("Direction", "1");
	sym.setVariable("LeftPosition", "0");
	sym.setVariable("Step", "100"); 
//監(jiān)聽鼠標(biāo)mousedown事件，記錄鼠標(biāo)起始位置
	$(document).bind("mousedown", function(e) { 
			 e.preventDefault();
			 var xStart = e.originalEvent.clientX;
			 sym.setVariable('xStart', xStart);
	});
//監(jiān)聽鼠標(biāo)mouseup事件，記錄鼠標(biāo)結(jié)束位置，并依次計(jì)算滑動方向
	$(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元件元素實(shí)例   
   	var logo=symLogo.getSymbolElement();

        //獲取logo元件的寬度   
   	var logoWidth=parseInt(logo.css("width"));
        //獲取當(dāng)前l(fā)ogo偏移位置。因?yàn)槭褂胘Query.animate控制logo移動，并不會真正改變logo的left css屬性，因此，需要設(shè)置變量記載   
   	var x = sym.getVariable("LeftPosition");
        //獲取步進(jìn) 
	var step=parseInt(sym.getVariable("Step"));
   	var newX;

        //確保logo不會移出屏幕，一旦到達(dá)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);
   	});