`
lxlkulong
  • 浏览: 8482 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

转载类似iphono的加速度滑动效果的Flex容器

    博客分类:
  • 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>

工程详见附件
分享到:
评论

相关推荐

    类似iphone滑动按钮效果

    标题中的“类似iPhone滑动按钮效果”指的是在iOS或Android应用开发中常见的滑动开关(Slide Button)组件,这种组件通常被用作一种用户界面元素,允许用户通过滑动按钮来开启或关闭某个功能。在iOS中,它被称为...

    类似iphone短信中滑动收缩键盘

    总的来说,实现类似iPhone短信中滑动收缩键盘的功能,需要深入了解iOS的事件处理、手势识别、动画控制以及键盘通知机制。通过以上步骤,开发者可以为自己的应用添加类似的交互,提高用户体验。在实际开发中,不断...

    苹果iPhone手机桌面滑动效果模板.zip

    总的来说,"苹果iPhone手机桌面滑动效果模板.zip"是一个包含关键JavaScript组件的资源,旨在帮助开发者轻松实现类似iOS设备桌面的滑动交互效果。通过结合Coffee-Script的简洁语法、jQuery的便利性和Touchable.js的...

    flex air 类似iphone的导航条

    总的来说,通过Flex Air,我们可以轻松地模仿iPhone的导航条设计,提供类似的功能和视觉效果。通过熟练运用Spark组件、布局和皮肤技术,我们可以创建出既美观又实用的桌面应用程序,带给用户熟悉且易于操作的界面...

    类似Iphone滑动的Datagrid框,效果不是很好

    标题中的“类似iPhone滑动的Datagrid框”指的是在网页或应用程序中实现一个数据网格组件,该组件具有类似于苹果iPhone设备上滑动效果的功能。这种效果通常涉及到触摸屏上的手势识别,比如轻扫和滚动,使得用户可以...

    AS3.0 仿iphone滑动效果

    在本文中,我们将深入探讨如何使用AS3.0(ActionScript 3.0)实现一个模仿iPhone滑动效果的交互式界面。这个效果包括平滑的缓冲动作,无论是横向还是纵向滑动,都能提供类似iOS设备上的用户体验。AS3.0是Adobe Flash...

    wpf实现iphone滑动效果demo

    在本篇文档中,我们将详细解析一个使用 WPF(Windows Presentation Foundation)技术实现类似 iPhone 滑动效果的示例代码。该示例通过模拟 iPhone 的触控操作来创建平滑、自然的滑动体验。 #### 核心知识点概览 1....

    WPF模仿iPhone桌面滑动解锁效果

    在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 模仿iPhone的桌面滑动解锁效果。WPF是Microsoft开发的一种强大的图形用户界面框架,它提供了丰富的功能来创建美观且互动性强的桌面应用程序...

    iphone 滑动解锁效果

    在iOS开发中,滑动解锁效果是用户界面中常见的交互元素,它模仿了早期iPhone的解锁方式,带给用户熟悉的操作体验。本教程将详细介绍如何基于`UIControl`类实现一个自定义的iPhone滑动解锁控件。`UIControl`是UIKit...

    Windows CE下模拟IPhone滑动效果的示例代码.rar

    在Windows CE平台上,由于硬件和操作系统特性与Apple的iOS(iPhone的操作系统)存在显著差异,因此,模拟iPhone的滑动效果并非易事。这个压缩包文件"2.5 IPhoneEffect"提供了一种方法,通过代码实现来在Windows CE...

    仿Iphone样式

    Flex支持创建响应式布局,可以很好地实现类似于iPhone的滑动效果,尤其是在创建可滚动内容区域时。然而,标签中的"flex"也可能是现代CSS布局模型的一部分,即Flexbox(弹性盒布局)。Flexbox允许开发者轻松地创建多...

    仿iphone滑动界面 jquery iphone ui

    在IT行业中,创建类似iPhone的滑动界面是许多开发者追求的目标,特别是在网页设计领域。"jQuery iPhone UI"是一个专门用于构建具有苹果设备风格用户界面的jQuery插件。这个工具允许开发者轻松地为他们的网站添加iOS...

    iphone区域滑动

    综上所述,通过合理利用UIScrollView,设置约束,以及自定义视图控制器,我们可以有效地解决低版本iPhone上元素固定的问题,并实现流畅的区域滑动效果。同时,不断优化性能和适配多设备,将提供更好的用户体验。

    Android类似iphone的选择时间,很有用

    在iPhone上,这种选择器以一个可滚动的圆环形式呈现,而在Android中,我们可以创建一个自定义的视图或者使用系统提供的`DatePicker`或`TimePicker`组件来实现类似的效果。本文将深入探讨如何在Android应用中创建一个...

    仿Iphone实现滑动选择器

    "仿Iphone实现滑动选择器"这个项目的目标是为Android应用开发一个类似iOS picker view的组件,以提供与iPhone类似的滑动选择体验。这种组件在视觉效果和交互模式上模仿了iOS的风格,以吸引那些熟悉iOS界面的用户,...

    android 实现iphone滑动解锁

    在Android平台上实现类似iPhone的滑动解锁功能,可以为用户提供熟悉的交互体验,增强应用的用户友好性。这个过程涉及到Android的触摸事件处理、图形绘制以及动画设计等多个技术领域。下面将详细阐述如何在Android中...

    仿 iphone 滑动显示效果_真实逼真效果

    在本教程中,我们将探讨如何实现仿 iPhone 的滑动显示效果,以达到真实且逼真的用户体验,特别是针对手机访问 WAP 网站时的图片浏览。这种效果是 iPhone 用户界面的一大特点,使得用户可以通过手指滑动来轻松浏览和...

    JavaScript实现iPhone手机图片滑动查看.rar

    JavaScript实现iPhone手机图片滑动查看,当鼠标拖住图片往左翻页或往右翻页时,图片模仿iPhone手机平滑带磁力缓冲移动,如果是最后一张图片,它就像被吸咐了一样,虽然会移动一下,但是最终还会倒回来。来自趣味课堂

Global site tag (gtag.js) - Google Analytics