Edge Animate为ios设备开发HTML5动画

在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。你只需要把播放头移到动画的起始位置,然后点击时间轴左侧如下图标志的小箭头按钮即可插入并编辑标签。

Edge Animate为ios设备开发HTML5动画,PS教程,

加入label和trigger的symbol

在播放时任意一段动画时,我们都期望在旋转到一周时自动停止,因此把播放头移至每段动画的结尾帧处,点击时间轴左侧的{}状代码按钮,插入trigger,即触发器。触发器是一段javascript脚本,当播放头移到trigger所在的帧时,Edge Animate即会自动触发调用。Trigger的代码类似如下:
 

Edge Animate为ios设备开发HTML5动画,PS教程,

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事件中完成上述工作。如下图:
 

Edge Animate为ios设备开发HTML5动画,PS教程,

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事件添加侦听器代码。如下图:
 

Edge Animate为ios设备开发HTML5动画,PS教程,

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);   	});