建站
咨詢
售后
建站咨詢
新聞中心
Swipe手勢（1）
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的普寧網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！
Swipe手勢即單個手指觸摸屏幕并快速地朝任意一個方向滑動，一般用來控制頁面之間的切換。例如，使用Android自帶的相冊程序瀏覽圖片時，朝左滑動手指會切換到下一張，朝右滑動則切換到上一張。
本節(jié)將創(chuàng)建一個圖片瀏覽器GestureSwipe，使用Swipe手勢來切換圖片。程序的運行流程如下：
步驟1 創(chuàng)建10個Sprite，用隨機顏色進行填充，視為10張圖片。
步驟2 開始運行，顯示第一張圖片。
步驟3 監(jiān)聽Swipe事件，如果是朝右滑動，顯示上一張，反之顯示下一張。
按照以上流程，首先看第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;
- //用隨機顏色填充矩形
- 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;
- }
創(chuàng)建圖片用了兩個函數：createPages和newPage，其中newPage負責創(chuàng)建單張圖片。圖片默認被放置于屏幕外，并存放在數組pages中。之所以使用數組，主要為了便于切換圖片。程序中使用參數currentIndex保存當前圖片的索引，每次切換圖片時，只需改變currentIndex的值即可。
第2步，開始運行后默認要顯示第一張圖片，也就是要將currentIndex的值修改為1。這相當于執(zhí)行了“下一張”的操作，和向左滑動手勢的效果是一樣的。為此，將處理圖片切換的相關功能獨立成一個函數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，獲取新的圖片，將其移到屏幕顯示區(qū)域
- currentIndex = newIndex;
- var newPage:Sprite = pages[currentIndex];
- if ( direction == -1 )
- {
- //如果是顯示上一張，要從左向右移，所以先將圖片位置改到最左邊
- newPage.x = -stage.stageWidth;
- }
- else
- {
- //從右向左移，先將圖片位置改到最右邊
- newPage.x = stage.stageWidth;
- }
- //不管是哪個方向，最后都將新的圖片移到屏幕顯示區(qū)域
- TweenLite.to(newPage, 0.5, { x:0} );
- }
3.3.3 Swipe手勢（2）
為了讓圖片的切換過程更加生動，程序中添加了緩動效果，使用了第三方開源庫TweenLite（http://www.greensock.com/tweenlite/）來實現(xiàn)動畫。TweenLite的用法很簡單，本例中只用了其中的一個方法：
- TweenLite.to(newPage, 0.5, { x:0} );
to函數的第一個參數為作用對象，第2個參數表示持續(xù)時間，第3個參數是要修改的屬性。上面這句代碼的意思是對newPage對象運用緩動效果，動畫持續(xù)時間為0.5秒，將newPage的x值從當前值修改為0，實現(xiàn)的效果就是newPage水平移動到舞臺原點處。讀者可以嘗試修改時間參數，體驗不同的動畫效果。有關TweenLite的用法可以在其站點上找到詳細文檔。
有了movePage函數，要顯示第一張圖片，只要加上以下一行代碼就可以實現(xiàn)：
- movePage(1);
currentIndex的初始值為–1，執(zhí)行下一張圖片的命令，即切換到第一張圖片。
最后是第3步，監(jiān)聽Swipe手勢事件。和前兩節(jié)中處理手勢事件的方法完全一樣，這里就省略了檢測設備信息的過程，先添加如下相關的事件：
- 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即可。
移動開發(fā)中，Swipe手勢配合緩動效果的運用很常見，這種方式充分發(fā)揮了觸摸屏的技術特點，為程序增色不少。
本例完整的代碼位于ch3/ GestureSwipe。
小知識 使用鼠標事件也能夠模擬Swipe手勢，通過檢測鼠標的移動速度就可以實現(xiàn)，在一些Flash游戲中都能看到這類用法。
新聞標題：AIRAndroid:Swipe手勢
文章轉載：http://www.dlmjj.cn/article/cdpdepo.html
