`

模仿下拉列表下拉和收起的动画效果

阅读更多
/**
 * 实现下拉列表、弹出菜单出现和隐藏时缓动的效果
 */
package com.gde.dataModel
{
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.Regular;
	
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextFormat;
	
	public class PopupMenu extends Sprite{
//		private var curListMenuState:Boolean;
		
		private var myTween:Tween;
		private var listMenu:ListMenus;
		private var maskSprite:Sprite;
		private var referenceObject:Object;
		//
		private var playMode:PlayMode;
		
		//隐藏位置
		private var hidePosition:Number;
		//显示位置
		private var showPosition:Number;
		
		/**
		 * referenceObject参照物对象
		 */
		public function PopupMenu(sprite:Object):void{
			referenceObject = sprite;
			var itemTextFormat:TextFormat =  new TextFormat();
			itemTextFormat.underline = true;
			
			listMenu = new ListMenus();
			listMenu.setSelectIcon(true);
			listMenu.selectItem(3);
			listMenu.setTextFormat(itemTextFormat);
//			listMenu.addEventListener(ListMenusEvent.SELECTITEM, playMode.setPlayModeHandler);
//			listMenu.addEventListener(ListMenusEvent.SELECTITEM, playModeMenuEnd);
			
			//在按钮的右下方显示菜单
			this.addChild(listMenu);
			
			maskSprite = new Sprite();
			this.addChild(maskSprite);
		}
		
		public function setdata(itemVoArray:Array):void{
			listMenu.addItemArray(itemVoArray);
			listMenu.isSelectMore = false;
			
			listMenu.y = referenceObject.y + referenceObject.height;
			listMenu.x = referenceObject.x + (referenceObject.width - listMenu.width)/2;
			
			maskSprite.graphics.clear();
			maskSprite.graphics.beginFill(0xFFFFFF);
			maskSprite.graphics.drawRect(0, 0, listMenu.width, listMenu.height);
			maskSprite.graphics.endFill();
			
			maskSprite.x = listMenu.x;
			maskSprite.y = listMenu.y;
			maskSprite.height = listMenu.height * 1.2;
			maskSprite.width = listMenu.width;
			
			listMenu.mask = maskSprite;
			listMenu.y = listMenu.y - listMenu.height;
			
			hidePosition = listMenu.y - listMenu.height;
			showPosition = listMenu.y;
		}
		
		public function showListMenu(e:MouseEvent):void{
			referenceObject.removeEventListener(MouseEvent.CLICK, showListMenu);
			backIn();
		}
		
		public function destroyPlayModeMenu(e:MouseEvent):void{
			stage.removeEventListener(MouseEvent.MOUSE_UP, destroyPlayModeMenu);
			backOut();
		}
		
		private function backIn():void{
			var startValue:Number = maskSprite.y - listMenu.height;
			var finishValue:Number = maskSprite.y;
			var duration:Number = 0.4;
			myTween = new Tween(listMenu, "y", Regular.easeOut, startValue, finishValue, duration, true);
			myTween.addEventListener(TweenEvent.MOTION_FINISH, showFinishHandler);
		}
		
		private function backOut():void{
			var startValue:Number = maskSprite.y;
			var finishValue:Number = maskSprite.y - listMenu.height;
			var duration:Number = 0.2;
			myTween = new Tween(listMenu, "y", Regular.easeIn, startValue, finishValue, duration, true);
			myTween.addEventListener(TweenEvent.MOTION_FINISH, hideFinishHandler);
		}
		
		private function showFinishHandler(e:TweenEvent):void{
			myTween.removeEventListener(TweenEvent.MOTION_FINISH, showFinishHandler);
//			curListMenuState = true;
			stage.addEventListener(MouseEvent.MOUSE_UP, destroyPlayModeMenu);
		}
		
		private function hideFinishHandler(e:TweenEvent):void{
			myTween.removeEventListener(TweenEvent.MOTION_FINISH, hideFinishHandler);
//			curListMenuState = false;
			referenceObject.addEventListener(MouseEvent.CLICK, showListMenu);
		}
		
	}
}
分享到:
评论
3 楼 timothy_bitty 2010-03-24  
最好能够将fl包附件形式上传上来
2 楼 whaosoft 2010-02-23  
sosyi 写道
没见效果。。。。。

同上!!.....
1 楼 sosyi 2010-02-22  
没见效果。。。。。

相关推荐

    swift-下拉列表仿饿了么美团外卖的下拉菜单

    在这个项目“swift-下拉列表仿饿了么美团外卖的下拉菜单”中,开发者尝试模仿了饿了么和美团外卖应用中的下拉菜单效果,以提供类似的用户体验。这种设计通常用于筛选、分类或者设置,如选择城市、排序方式等。 首先...

    jQuery手机大众点评下拉菜单特效.zip

    使用CSS3的过渡效果和动画,我们可以进一步增强交互体验,例如添加滑动或淡入淡出的效果。 最后,为了确保代码的可维护性和复用性,我们应将此特效封装为一个插件或组件。这样,其他开发者可以在他们的项目中轻松...

    jquery+css实现的ul+li模仿下拉框表单美化效果源码.zip

    4. 可能的JavaScript事件处理:例如,使用`.on('click', function() {...})`来绑定点击事件,以及`.slideToggle()`方法来实现下拉列表的展开和收起动画。 5. 可能的AJAX交互:如果下拉框的内容是动态加载的,可能会...

    Android仿大众点评、美团下拉菜单

    Spinner是Android SDK内置的一种控件,可以方便地创建下拉列表,而RecyclerView则更为灵活,能够处理更复杂的布局和动画效果,适用于创建类似大众点评和美团那种带有滑动效果的下拉菜单。 1. **Spinner的使用**: ...

    仿美团菜单下拉

    2. **动画效果**:美团菜单下拉通常伴随着平滑的动画效果,如渐显渐隐、滑动展开等,这涉及到Android的`ObjectAnimator`、`ValueAnimator`或者iOS的`UIView animations`。 3. **布局管理**:菜单项需要合理地排列...

    javascript

    5. **动画效果**:为了提升用户体验,下拉列表的展开和收起可以加入平滑的过渡动画,这可以通过CSS的`transition`属性或者JavaScript的`requestAnimationFrame`来实现。 6. **封装组件**:为了代码的可重用性和维护...

    DropDownMenu, iOS下拉菜单,也可以实现类似NSComboBox的效果.zip

    6. **动画效果**:为了提升用户体验,`DropDownMenu`在展开和收起菜单时提供了平滑的过渡动画。 7. **响应式布局**:考虑到不同设备屏幕尺寸和方向的变化,`DropDownMenu`支持自动调整布局,确保在各种情况下都能...

    Android自定义View仿腾讯TIM下拉刷新View

    本篇文章将探讨如何创建一个模仿腾讯TIM应用下拉刷新效果的自定义View。这个效果的特点是,当用户下拉时,界面上的小球会随着滑动距离改变位置,并呈现出动态的动画效果。 首先,我们要定义需求。我们需要实现的...

    ios-下拉菜单选项.zip

    `SSheetAction`可能是一个自定义视图,它模仿了常见的表单下拉列表。我们可以创建一个扩展,包含一个`UIPickerView`或`UITableView`来显示选项,并通过`@State`变量来管理选中的值。 4. **UIPickerView** `...

    腾讯云下拉导航菜单.zip

    当然,腾讯云的下拉菜单可能包含更多定制的交互和视觉效果,如动画过渡、延迟显示、触摸设备支持等,这些都需要进一步的开发和优化。 在实际项目中,你可能还需要考虑菜单的响应式设计,使其在不同屏幕尺寸下都能...

    ios-模仿新浪微博App首页展开按钮.zip

    开发者可能会使用AutoLayout或者Size Classes来适应不同屏幕尺寸,同时利用UIView的动画方法实现展开和收起的过渡效果。 【标签】:“菜单”意味着这个项目的核心功能是创建和管理一个可展开的菜单。在iOS中,实现...

    模拟淘宝下拉菜单

    4. **动画效果**:淘宝下拉菜单的一大特色是其平滑的动画效果,如展开和收起的过渡。在iOS中,我们可以使用Core Animation或者CAAnimationGroup来实现这些效果,包括视图的平移、缩放和透明度变化等。 5. **数据...

    jQuery仿苹果apple官网导航菜单代码.zip

    在本资源中,我们主要探讨的是一个使用jQuery编写的导航菜单代码,该代码旨在模仿苹果Apple官方网站的导航结构和交互效果。这个导航菜单具有黑色的质感设计,与苹果品牌风格相吻合,同时包含了搜索功能以及下拉显示...

    vc实现Office式样的扁平组合框combox

    4. **动画效果**:为了进一步模仿Office的交互,可以添加展开/收起下拉列表的动画效果,例如渐变显示或滑动效果。这需要处理`WM_COMMAND`消息,根据用户操作的状态来控制动画。 5. **其他样式调整**:除了基本的...

    ios-select.zip

    总的来说,"AGSelect"是一个为iOS应用提供HTML-like下拉列表体验的自定义组件,它通过自定义的数据源和代理协议,结合丰富的动画和界面设计,实现了与网页中`<select>`元素类似的交互效果。对于那些希望在iOS应用中...

    模仿QQ的扩展型很好的ExpandableListView.zip

    为了实现动画效果,可以设置`setGroupIndicator()`和`setChildIndicator()`,使用自定义的指示器。 6. **性能优化** 由于ExpandableListView会复用视图,所以必须在`getChildView()`和`getGroupView()`中正确处理...

    ios-菜单.zip

    QQ下拉菜单可能借鉴了下拉列表的概念,这种设计在网页和桌面应用中很常见,但在iOS上需要进行一些适应性调整,以符合平台的人机交互指南。 1. **SwiftUI**:如果项目使用SwiftUI进行构建,我们可以利用`List`、`...

    Android 仿QQ空间二级评论列表

    - **动态加载动画**:在新评论加载时,可以添加下拉刷新的动画效果,如渐变加载、旋转动画等。 - **点赞动画**:当用户点赞时,点赞数的增加可以配合动画效果,例如数字增长动画或小红心出现动画。 通过以上技术...

    基于jQuery Animated Menu 导航条与动感菜单特效.zip

    在导航条中,这些动画常用于菜单项的展开和收起,或者在用户悬停时改变颜色或形状。 其次,导航条的动态效果通常涉及到事件监听。例如,使用`.hover()`或`.click()`方法,可以绑定鼠标悬停和点击事件,触发相应的...

    jQuery模仿Remember The Milk 写的个人任务管理界面

    在这个项目中,jQuery被用来动态地添加、删除和编辑任务,以及实现交互效果,如点击事件、淡入淡出动画等。 2. **To-do列表结构**:项目的核心是一个to-do列表,由多个任务项组成。每个任务项包含任务标题、描述、...

Global site tag (gtag.js) - Google Analytics