這次來練習一下仿 iPhone 的 UIFlow Flash 版
轉載請註明出處
製作羅輯:
把所有的圖片丟到一個 Sprite 裡,並依序排列
接下時,記錄當下的滑鼠座標
再用 EnterFrame 不斷的記錄現在的座標和上一個 FPS 的座標差
丟給主要的 Sprite.x 屬性。
放開後,判斷使用者是否拉動超過一半,移動到下一個或上一個,
當托到第一個或最後一個時,拉動的距離要越來越慢。
IPhoneScrollTween.as
轉載請註明出處
製作羅輯:
把所有的圖片丟到一個 Sprite 裡,並依序排列
接下時,記錄當下的滑鼠座標
再用 EnterFrame 不斷的記錄現在的座標和上一個 FPS 的座標差
丟給主要的 Sprite.x 屬性。
放開後,判斷使用者是否拉動超過一半,移動到下一個或上一個,
當托到第一個或最後一個時,拉動的距離要越來越慢。
IPhoneScrollTween.as
/** * @author milkmidi * @version 1.0.1 * @date created 2011/06/01 */ package milkmidi.behavior { import com.greensock.TweenMax; import com.greensock.easing.Cubic; import flash.display.DisplayObject; import flash.display.Sprite; import flash.display.Stage; import flash.display.StageQuality; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.geom.Point; /** * IPhone scroll behavior */ public class IPhoneScrollTween { private static var DECAY :Number = 0.98; private static var BOUNCING_SPRINGESS :Number = 0.45; private static var SNAP_VELOCITY :Number = 40; private var mStage:Stage; public function get stage():Stage { return mStage; } public var onChange:Function/*int*/; private var mLastMotionX :int = 0; private var mContainer :Sprite; private var mCurrentScreen :int = 0; private var mCount :uint; private var mWidth :int; private var mDeltaX :int = 0; private var mTweenMax :TweenMax; //__________________________________________________________________________________ Constructor public function IPhoneScrollTween(pContainer:Sprite, pWidth:int) { this.mWidth = pWidth; this.mContainer = pContainer; this.mStage = mContainer.stage; this.mCount = mContainer.numChildren; this.mContainer.addEventListener(MouseEvent.MOUSE_DOWN , _mouseDownHandler); } private function _mouseDownHandler(e:MouseEvent):void { stage.quality = StageQuality.LOW; this.mLastMotionX = stage.mouseX; stage.addEventListener(Event.ENTER_FRAME, _stageMouseMoveHandler); stage.addEventListener(MouseEvent.MOUSE_UP , _stageMouseUpHandler); } private function calculateScroll():void { //trace(mDeltaX , SNAP_VELOCITY,mCurrentScreen) if (mDeltaX > SNAP_VELOCITY && mCurrentScreen < ( mCount - 1) ) { snapToScreen(mCurrentScreen + 1); } else if (mDeltaX < -SNAP_VELOCITY && mCurrentScreen > 0) { snapToScreen(mCurrentScreen - 1); } else { snapToDestination(); } } private function snapToDestination():void { var _whichScreen:int = ( mContainer.x * -1 + (mWidth / 2)) / mWidth; snapToScreen(_whichScreen); } public function snapToScreen(pWhichScreen:int):void { mCurrentScreen = pWhichScreen; trace("snapToScreen()", pWhichScreen); var _newX :int = mCurrentScreen * mWidth * -1; var _time :Number = Math.abs( _newX - mContainer.x) * 2 / 1000; if (mTweenMax!=null) { mTweenMax.kill(); } mTweenMax = TweenMax.to( mContainer, _time, { x :_newX, onComplete :function ():void { stage.quality = StageQuality.HIGH; } } ); if (onChange != null) onChange.apply( this, [mCurrentScreen]); for (var i:int = 0; i < mCount; i++) { var _child:DisplayObject = mContainer.getChildAt(i); var _dis:int =Math.abs(mCurrentScreen - i); _child.visible = _dis >= 2 ? false : true; } } private function getWidth():int { return mContainer.width; } private function _stageMouseUpHandler(e:MouseEvent):void { stage.quality = StageQuality.BEST; stage.removeEventListener(MouseEvent.MOUSE_UP , _stageMouseUpHandler); stage.removeEventListener(Event.ENTER_FRAME, _stageMouseMoveHandler); calculateScroll(); } private function _stageMouseMoveHandler(e:Event):void { mDeltaX = mLastMotionX - stage.mouseX; mLastMotionX = stage.mouseX; if (mContainer.x > 0) { mDeltaX *= BOUNCING_SPRINGESS; }else if (mContainer.x < (getWidth() - mWidth) * -1) { mDeltaX *= BOUNCING_SPRINGESS; } mContainer.x -= mDeltaX; } }//__________________________________________________________________________________ End Class }//__________________________________________________________________________________ End Package線上 Demo 實際丟到手機上測,還真的有幾分像。 SourceCodeDownload
留言
按住滑鼠 只要有拖動圖片 放掉~
圖片就滑過去 ~
private function calculateScroll():void {
//trace(mDeltaX , SNAP_VELOCITY,mCurrentScreen)
if (mDeltaX > SNAP_VELOCITY && mCurrentScreen < ( mCount - 1) ) {
snapToScreen(mCurrentScreen + 1);
} else if (mDeltaX < -SNAP_VELOCITY && mCurrentScreen > 0) {
snapToScreen(mCurrentScreen - 1);
} else {
if(mCurrentScreen < ( mCount - 1)&& mCurrentScreen > 0){
snapToDestination();
}else {
snapToScreen(mCurrentScreen);
}
//snapToScreen(mCurrentScreen);
}
}