转载类似iphono的加速度滑动效果的Flex容器
转自http://bbs.airia.cn/thread-2925-1-1.html
[iScrollBox.as]
/**
* Author: Kevin Luo
* Email: Kevin.luo.sl@gmail.com
* Description:
* The passed in conponent can be scroll as iphone style;
* */
package
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.containers.Canvas;
/**
* iphono的带加速度的滑动的容器
*/
public class iScrollBox extends Canvas
{
private var _displayObj:DisplayObject;
private var isMouseDown:Boolean = false;
private var mDY:int;
private var sY:int;
private var eY:int;
private var mDX:int;
private var sX:int;
private var eX:int;
private var isDragging:Boolean = false;
private var sTime:Number;
private var eTime:Number
private var inertialTimerY:Timer;
private var inertialTimerX:Timer;
private var speedY:Number;
private var speedX:Number;
private var a:int;
public function get displayObj():DisplayObject{
return this._displayObj;
}
public function iScrollBox(value:DisplayObject,a:int = 50)
{
super();
this.horizontalScrollPolicy = "off";
this.verticalScrollPolicy = "off";
this._displayObj = value;
this.a = a;
this.addChild(value);
this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandle);
this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandle);
this.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandle);
this.inertialTimerY = new Timer(30);
this.inertialTimerX = new Timer(30);
this.inertialTimerY.addEventListener(TimerEvent.TIMER,inertialMovePieceY);
this.inertialTimerX.addEventListener(TimerEvent.TIMER,inertialMovePieceX);
}
protected function mouseDownHandle(e:MouseEvent):void{
this.isMouseDown = true;
this.mDY = mouseY;
this.mDX = mouseX;
if(inertialTimerY.running) inertialTimerY.stop();
if(inertialTimerX.running) inertialTimerX.stop();
}
protected function mouseUpHandle(e:MouseEvent):void{
this.isDragging = false;
this.isMouseDown = false;
this.eTime = new Date().time;
this.eY = mouseY;
this.eX = mouseX;
this.speedY = (eY-mDY)/(eTime-sTime)*a;
this.speedX = (eX-mDX)/(eTime-sTime)*a;
if(inertialTimerY.running) inertialTimerY.stop();
if(inertialTimerX.running) inertialTimerX.stop();
if(Math.abs(speedY) >20){
inertialTimerY.start();
}
if(Math.abs(speedX) >20){
inertialTimerX.start();
}
}
private function mouseMoveHandle(e:MouseEvent):void{
if(this.isMouseDown){
if(Math.abs(mouseY-mDY) >3 || Math.abs(mouseY-mDX) >3){
if(!this.isDragging){
sY = mouseY;
sX = mouseX
this.isDragging = true
this.sTime = new Date().time;
}
this._displayObj.y = this._displayObj.y + (mouseY - sY);
this._displayObj.x = this._displayObj.x + (mouseX - sX)
this.sY = mouseY
this.sX = mouseX
if(this._displayObj.y >0){
this._displayObj.y = 0;
}else if(this._displayObj.y < -(this._displayObj.height- this.height)){
this._displayObj.y = - (this._displayObj.height- this.height)
}
if(this._displayObj.x>0){
this._displayObj.x = 0;
}else if(this._displayObj.x < -(this._displayObj.width - this.width)){
this._displayObj.x = -(this._displayObj.width - this.width)
}
if(this._displayObj.hasOwnProperty("selectedItem")){
this._displayObj["selectedItem"]= null;
}
}
}
}
private function inertialMovePieceY(evt:TimerEvent):void{
this._displayObj.y += speedY;
speedY = speedY * 0.9;
if(this._displayObj.y >0){
this._displayObj.y = 0;
inertialTimerY.stop()
}else if(this._displayObj.y < -(this._displayObj.height- this.height)){
this._displayObj.y = - (this._displayObj.height- this.height)
inertialTimerY.stop()
}
}
private function inertialMovePieceX(evt:TimerEvent):void{
this._displayObj.x += speedX;
speedX = speedX * 0.9;
if(this._displayObj.x >0){
this._displayObj.x = 0;
inertialTimerX.stop()
}else if(this._displayObj.x < -(this._displayObj.width- this.width)){
this._displayObj.x = - (this._displayObj.width- this.width)
inertialTimerX.stop()
}
}
}
}
[iListDemo.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.List;
[Bindable]
[Embed(source="map.jpg")]
private var map:Class;
private function init():void{
//List
/* var testArray:Array = new Array();
for(var i:int=1; i<=135; i++){
testArray.push("Item " + i);
}
var list:List = new List();
list.width = 200;
list.dataProvider = testArray;
list.rowCount = testArray.length;
list.verticalScrollPolicy = "off"; */
//List end
//image
var img:Image = new Image();
img.source = map
img.buttonMode = true;
img.useHandCursor = true
//image end
var iphoneList:iScrollBox = new iScrollBox(img);
this.addChild(iphoneList);
iphoneList.height = 300;
iphoneList.width = 300;
}
]]>
</mx:Script>
</mx:Application>
工程详见附件
