转自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滑动按钮效果”指的是在iOS或Android应用开发中常见的滑动开关(Slide Button)组件,这种组件通常被用作一种用户界面元素,允许用户通过滑动按钮来开启或关闭某个功能。在iOS中,它被称为...
总的来说,实现类似iPhone短信中滑动收缩键盘的功能,需要深入了解iOS的事件处理、手势识别、动画控制以及键盘通知机制。通过以上步骤,开发者可以为自己的应用添加类似的交互,提高用户体验。在实际开发中,不断...
总的来说,"苹果iPhone手机桌面滑动效果模板.zip"是一个包含关键JavaScript组件的资源,旨在帮助开发者轻松实现类似iOS设备桌面的滑动交互效果。通过结合Coffee-Script的简洁语法、jQuery的便利性和Touchable.js的...
总的来说,通过Flex Air,我们可以轻松地模仿iPhone的导航条设计,提供类似的功能和视觉效果。通过熟练运用Spark组件、布局和皮肤技术,我们可以创建出既美观又实用的桌面应用程序,带给用户熟悉且易于操作的界面...
标题中的“类似iPhone滑动的Datagrid框”指的是在网页或应用程序中实现一个数据网格组件,该组件具有类似于苹果iPhone设备上滑动效果的功能。这种效果通常涉及到触摸屏上的手势识别,比如轻扫和滚动,使得用户可以...
在本文中,我们将深入探讨如何使用AS3.0(ActionScript 3.0)实现一个模仿iPhone滑动效果的交互式界面。这个效果包括平滑的缓冲动作,无论是横向还是纵向滑动,都能提供类似iOS设备上的用户体验。AS3.0是Adobe Flash...
在本篇文档中,我们将详细解析一个使用 WPF(Windows Presentation Foundation)技术实现类似 iPhone 滑动效果的示例代码。该示例通过模拟 iPhone 的触控操作来创建平滑、自然的滑动体验。 #### 核心知识点概览 1....
在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 模仿iPhone的桌面滑动解锁效果。WPF是Microsoft开发的一种强大的图形用户界面框架,它提供了丰富的功能来创建美观且互动性强的桌面应用程序...
在iOS开发中,滑动解锁效果是用户界面中常见的交互元素,它模仿了早期iPhone的解锁方式,带给用户熟悉的操作体验。本教程将详细介绍如何基于`UIControl`类实现一个自定义的iPhone滑动解锁控件。`UIControl`是UIKit...
在Windows CE平台上,由于硬件和操作系统特性与Apple的iOS(iPhone的操作系统)存在显著差异,因此,模拟iPhone的滑动效果并非易事。这个压缩包文件"2.5 IPhoneEffect"提供了一种方法,通过代码实现来在Windows CE...
Flex支持创建响应式布局,可以很好地实现类似于iPhone的滑动效果,尤其是在创建可滚动内容区域时。然而,标签中的"flex"也可能是现代CSS布局模型的一部分,即Flexbox(弹性盒布局)。Flexbox允许开发者轻松地创建多...
在IT行业中,创建类似iPhone的滑动界面是许多开发者追求的目标,特别是在网页设计领域。"jQuery iPhone UI"是一个专门用于构建具有苹果设备风格用户界面的jQuery插件。这个工具允许开发者轻松地为他们的网站添加iOS...
综上所述,通过合理利用UIScrollView,设置约束,以及自定义视图控制器,我们可以有效地解决低版本iPhone上元素固定的问题,并实现流畅的区域滑动效果。同时,不断优化性能和适配多设备,将提供更好的用户体验。
在iPhone上,这种选择器以一个可滚动的圆环形式呈现,而在Android中,我们可以创建一个自定义的视图或者使用系统提供的`DatePicker`或`TimePicker`组件来实现类似的效果。本文将深入探讨如何在Android应用中创建一个...
"仿Iphone实现滑动选择器"这个项目的目标是为Android应用开发一个类似iOS picker view的组件,以提供与iPhone类似的滑动选择体验。这种组件在视觉效果和交互模式上模仿了iOS的风格,以吸引那些熟悉iOS界面的用户,...
在Android平台上实现类似iPhone的滑动解锁功能,可以为用户提供熟悉的交互体验,增强应用的用户友好性。这个过程涉及到Android的触摸事件处理、图形绘制以及动画设计等多个技术领域。下面将详细阐述如何在Android中...
在本教程中,我们将探讨如何实现仿 iPhone 的滑动显示效果,以达到真实且逼真的用户体验,特别是针对手机访问 WAP 网站时的图片浏览。这种效果是 iPhone 用户界面的一大特点,使得用户可以通过手指滑动来轻松浏览和...
JavaScript实现iPhone手机图片滑动查看,当鼠标拖住图片往左翻页或往右翻页时,图片模仿iPhone手机平滑带磁力缓冲移动,如果是最后一张图片,它就像被吸咐了一样,虽然会移动一下,但是最终还会倒回来。来自趣味课堂