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游戲中都能看到這類用法。