AIR Android:Swipe手势-swipe finger alt+s

Swipe手势（1）

Swipe手势即单个手指触摸屏幕并快速地朝任意一个方向滑动，一般用来控制页面之间的切换。例如，使用Android自带的相册程序浏览图片时，朝左滑动手指会切换到下一张，朝右滑动则切换到上一张。

本节将创建一个图片浏览器GestureSwipe，使用Swipe手势来切换图片。程序的运行流程如下：

步骤1　创建10个Sprite，用随机颜色进行填充，视为10张图片。

步骤2　开始运行，显示第一张图片。

步骤3　监听Swipe事件，如果是朝右滑动，显示上一张，反之显示下一张。

按照以上流程，首先看第1步，创建图片的代码如下：

private function createPages():void  
{  
　for ( var i:uint = 0; i < 10; i++)  
　{  
　　pages.push(newPage());  
　}  
}  
 
private function newPage():Sprite  
{  
　var page_width:int = stage.stageWidth-20*2;  
　var page_height:int = stage.stageHeight-20*2;  
　  
　var page:Sprite = new Sprite();　　　  
　var g:Graphics = page.graphics;  
//用随机颜色填充矩形  
　var color:uint = 0xFFFFFF*Math.random();  
　g.beginFill(color);  
　g.drawRect(20, 20, page_width, page_height);  
　g.endFill();  
　//默认将图片放在屏幕外  
　page.x = stage.stageWidth;  
　addChild(page);  
　  
　return page;  
}

创建图片用了两个函数：createPages和newPage，其中newPage负责创建单张图片。图片默认被放置于屏幕外，并存放在数组pages中。之所以使用数组，主要为了便于切换图片。程序中使用参数currentIndex保存当前图片的索引，每次切换图片时，只需改变currentIndex的值即可。

第2步，开始运行后默认要显示第一张图片，也就是要将currentIndex的值修改为1。这相当于执行了“下一张”的操作，和向左滑动手势的效果是一样的。为此，将处理图片切换的相关功能独立成一个函数movePage，代码如下：

//参数direction表示方向，1表示下一张，-1表示上一张  
private function movePage( direction:int = 1 ):void  
{  
        var newIndex:int;  
        if ( direction == -1 )  
        {  
　　//上一张，当前索引减1，如果已经到达第一张，就不能再向前了  
                newIndex = currentIndex - 1;  
                if ( newIndex < 0 )  
                {  
                        newIndex = 0;  
                }  
        }  
        else  
        {  
                //下一张，索引加1，如果到了最后一张，就不能再向后了  
                newIndex = currentIndex + 1;　  
                if ( newIndex >= (pages.length-1) )  
                {  
                        newIndex = pages.length-1;  
                }  
 
        }  
        //如果和当前页是相同的，表示已经是最前或最后了，保持图片显示不变  
        if ( currentIndex == newIndex ) return;  
        //如果当前显示的图片存在，要将其移开  
        if ( currentIndex >= 0 && currentIndex <= pages.length )  
        {  
                var oldPage:Sprite = pages[currentIndex];　  
 
                if ( direction == -1 )  
                {  
                        //显示上一张，当前图片从左向右移，移到屏幕右侧  
                        TweenLite.to(oldPage, 0.5, { x: stage.stageWidth} );  
                }  
                else  
                {  
                        //显示下一张，当前图片从右向左移，移到屏幕左侧  
                        TweenLite.to(oldPage, 0.5, { x: -stage.stageWidth} );  
                }  
        }  
        //更新currentIndex，获取新的图片，将其移到屏幕显示区域  
        currentIndex = newIndex;  
        var newPage:Sprite = pages[currentIndex];　  
        if ( direction == -1 )  
        {  
                //如果是显示上一张，要从左向右移，所以先将图片位置改到最左边  
                newPage.x = -stage.stageWidth;  
        }  
        else  
        {  
                //从右向左移，先将图片位置改到最右边  
                newPage.x = stage.stageWidth;  
        }  
        //不管是哪个方向，最后都将新的图片移到屏幕显示区域  
        TweenLite.to(newPage, 0.5, { x:0} );　　　　  
}

3.3.3　Swipe手势（2）

为了让图片的切换过程更加生动，程序中添加了缓动效果，使用了第三方开源库TweenLite（http://www.greensock.com/tweenlite/）来实现动画。TweenLite的用法很简单，本例中只用了其中的一个方法：

TweenLite.to(newPage, 0.5, { x:0} );

to函数的第一个参数为作用对象，第2个参数表示持续时间，第3个参数是要修改的属性。上面这句代码的意思是对newPage对象运用缓动效果，动画持续时间为0.5秒，将newPage的x值从当前值修改为0，实现的效果就是newPage水平移动到舞台原点处。读者可以尝试修改时间参数，体验不同的动画效果。有关TweenLite的用法可以在其站点上找到详细文档。

有了movePage函数，要显示第一张图片，只要加上以下一行代码就可以实现：

movePage(1);

currentIndex的初始值为–1，执行下一张图片的命令，即切换到第一张图片。

最后是第3步，监听Swipe手势事件。和前两节中处理手势事件的方法完全一样，这里就省略了检测设备信息的过程，先添加如下相关的事件：

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

以下是响应函数：

private function onSwipe(e:TransformGestureEvent):void  
{  
        if ( e.offsetX == 1 )  
        {  
                //朝右，对应动作为上一张  
                movePage(-1);  
        }  
        else  
        {  
                //否则为下一张  
                movePage(1);  
        }  
}

在GESTURE_SWIPE 事件中，TransformGestureEvent对象的offsetX和offsetY分别代表水平和垂直方向的手势朝向。在本例中，只判断水平方向，如果offsetX是1，表示是朝右滑动，反之表示朝左滑动。有了前面的代码铺垫，这里直接调用movePage即可。

移动开发中，Swipe手势配合缓动效果的运用很常见，这种方式充分发挥了触摸屏的技术特点，为程序增色不少。

本例完整的代码位于ch3/ GestureSwipe。

小知识　使用鼠标事件也能够模拟Swipe手势，通过检测鼠标的移动速度就可以实现，在一些Flash游戏中都能看到这类用法。