在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云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。

教程

制作上述动画，要完成三个任务：

1. 制作Logo元件：首先需要在舞台中导入Edge Animate图标，转换成元件后，制作正向和反向旋转效果。
2. 通过JavaScript脚本，监听鼠标或者触摸手势事件，计算鼠标或者手势滑动的方向
3. 通过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 parseInt(stage.css("width")); 
       //获取logo元件元素实例
      	var logo=symLogo.getSymbolElement(); 
       //获取logo元件的宽度
      	var logoparseInt(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);   	});