Swipe手勢(shì)（1）

Swipe手勢(shì)即單個(gè)手指觸摸屏幕并快速地朝任意一個(gè)方向滑動(dòng)，一般用來(lái)控制頁(yè)面之間的切換。例如，使用Android自帶的相冊(cè)程序?yàn)g覽圖片時(shí)，朝左滑動(dòng)手指會(huì)切換到下一張，朝右滑動(dòng)則切換到上一張。

本節(jié)將創(chuàng)建一個(gè)圖片瀏覽器GestureSwipe，使用Swipe手勢(shì)來(lái)切換圖片。程序的運(yùn)行流程如下：

步驟1　創(chuàng)建10個(gè)Sprite，用隨機(jī)顏色進(jìn)行填充，視為10張圖片。

步驟2　開(kāi)始運(yùn)行，顯示第一張圖片。

步驟3　監(jiān)聽(tīng)Swipe事件，如果是朝右滑動(dòng)，顯示上一張，反之顯示下一張。

按照以上流程，首先看第1步，創(chuàng)建圖片的代碼如下：

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;  
//用隨機(jī)顏色填充矩形  
　var color:uint = 0xFFFFFF*Math.random();  
　g.beginFill(color);  
　g.drawRect(20, 20, page_width, page_height);  
　g.endFill();  
　//默認(rèn)將圖片放在屏幕外  
　page.x = stage.stageWidth;  
　addChild(page);  
　  
　return page;  
} 

創(chuàng)建圖片用了兩個(gè)函數(shù)：createPages和newPage，其中newPage負(fù)責(zé)創(chuàng)建單張圖片。圖片默認(rèn)被放置于屏幕外，并存放在數(shù)組pages中。之所以使用數(shù)組，主要為了便于切換圖片。程序中使用參數(shù)currentIndex保存當(dāng)前圖片的索引，每次切換圖片時(shí)，只需改變currentIndex的值即可。

第2步，開(kāi)始運(yùn)行后默認(rèn)要顯示第一張圖片，也就是要將currentIndex的值修改為1。這相當(dāng)于執(zhí)行了“下一張”的操作，和向左滑動(dòng)手勢(shì)的效果是一樣的。為此，將處理圖片切換的相關(guān)功能獨(dú)立成一個(gè)函數(shù)movePage，代碼如下：

//參數(shù)direction表示方向，1表示下一張，-1表示上一張  
private function movePage( direction:int = 1 ):void  
{  
        var newIndex:int;  
        if ( direction == -1 )  
        {  
　　//上一張，當(dāng)前索引減1，如果已經(jīng)到達(dá)第一張，就不能再向前了  
                newIndex = currentIndex - 1;  
                if ( newIndex < 0 )  
                {  
                        newIndex = 0;  
                }  
        }  
        else  
        {  
                //下一張，索引加1，如果到了最后一張，就不能再向后了  
                newIndex = currentIndex + 1;　  
                if ( newIndex >= (pages.length-1) )  
                {  
                        newIndex = pages.length-1;  
                }  
 
        }  
        //如果和當(dāng)前頁(yè)是相同的，表示已經(jīng)是最前或最后了，保持圖片顯示不變  
        if ( currentIndex == newIndex ) return;  
        //如果當(dāng)前顯示的圖片存在，要將其移開(kāi)  
        if ( currentIndex >= 0 && currentIndex <= pages.length )  
        {  
                var oldPage:Sprite = pages[currentIndex];　  
 
                if ( direction == -1 )  
                {  
                        //顯示上一張，當(dāng)前圖片從左向右移，移到屏幕右側(cè)  
                        TweenLite.to(oldPage, 0.5, { x: stage.stageWidth} );  
                }  
                else  
                {  
                        //顯示下一張，當(dāng)前圖片從右向左移，移到屏幕左側(cè)  
                        TweenLite.to(oldPage, 0.5, { x: -stage.stageWidth} );  
                }  
        }  
        //更新currentIndex，獲取新的圖片，將其移到屏幕顯示區(qū)域  
        currentIndex = newIndex;  
        var newPage:Sprite = pages[currentIndex];　  
        if ( direction == -1 )  
        {  
                //如果是顯示上一張，要從左向右移，所以先將圖片位置改到最左邊  
                newPage.x = -stage.stageWidth;  
        }  
        else  
        {  
                //從右向左移，先將圖片位置改到最右邊  
                newPage.x = stage.stageWidth;  
        }  
        //不管是哪個(gè)方向，最后都將新的圖片移到屏幕顯示區(qū)域  
        TweenLite.to(newPage, 0.5, { x:0} );　　　　  
} 

3.3.3　Swipe手勢(shì)（2）

為了讓圖片的切換過(guò)程更加生動(dòng)，程序中添加了緩動(dòng)效果，使用了第三方開(kāi)源庫(kù)TweenLite（http://www.greensock.com/tweenlite/）來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。TweenLite的用法很簡(jiǎn)單，本例中只用了其中的一個(gè)方法：

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

to函數(shù)的第一個(gè)參數(shù)為作用對(duì)象，第2個(gè)參數(shù)表示持續(xù)時(shí)間，第3個(gè)參數(shù)是要修改的屬性。上面這句代碼的意思是對(duì)newPage對(duì)象運(yùn)用緩動(dòng)效果，動(dòng)畫(huà)持續(xù)時(shí)間為0.5秒，將newPage的x值從當(dāng)前值修改為0，實(shí)現(xiàn)的效果就是newPage水平移動(dòng)到舞臺(tái)原點(diǎn)處。讀者可以嘗試修改時(shí)間參數(shù)，體驗(yàn)不同的動(dòng)畫(huà)效果。有關(guān)TweenLite的用法可以在其站點(diǎn)上找到詳細(xì)文檔。

有了movePage函數(shù)，要顯示第一張圖片，只要加上以下一行代碼就可以實(shí)現(xiàn)：

movePage(1); 

currentIndex的初始值為–1，執(zhí)行下一張圖片的命令，即切換到第一張圖片。

最后是第3步，監(jiān)聽(tīng)Swipe手勢(shì)事件。和前兩節(jié)中處理手勢(shì)事件的方法完全一樣，這里就省略了檢測(cè)設(shè)備信息的過(guò)程，先添加如下相關(guān)的事件：

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);　 

以下是響應(yīng)函數(shù)：

private function onSwipe(e:TransformGestureEvent):void  
{  
        if ( e.offsetX == 1 )  
        {  
                //朝右，對(duì)應(yīng)動(dòng)作為上一張  
                movePage(-1);  
        }  
        else  
        {  
                //否則為下一張  
                movePage(1);  
        }  
} 

在GESTURE_SWIPE 事件中，TransformGestureEvent對(duì)象的offsetX和offsetY分別代表水平和垂直方向的手勢(shì)朝向。在本例中，只判斷水平方向，如果offsetX是1，表示是朝右滑動(dòng)，反之表示朝左滑動(dòng)。有了前面的代碼鋪墊，這里直接調(diào)用movePage即可。

移動(dòng)開(kāi)發(fā)中，Swipe手勢(shì)配合緩動(dòng)效果的運(yùn)用很常見(jiàn)，這種方式充分發(fā)揮了觸摸屏的技術(shù)特點(diǎn)，為程序增色不少。

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

小知識(shí)　使用鼠標(biāo)事件也能夠模擬Swipe手勢(shì)，通過(guò)檢測(cè)鼠標(biāo)的移動(dòng)速度就可以實(shí)現(xiàn)，在一些Flash游戲中都能看到這類用法。