转载类似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>

工程详见附件
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值