睡前没事突然想起有次在哪见过一个苹果样式的弹出窗口demo. 因为当时没有源码，也没有注意是怎么实现的。今天用一个简单的方式做一个试试。
我们知道Flex中内置了很多默认的Effect，其实只要我们稍加组合，可以实现很多很有意思的效果，这次的下滑菜单就用了其中两个效果,wipeUp和Move,然后用Parallel把他们组合起来用。我现在来详解。
Demo中我创建了一个KAlert类，用它弹出的信息框就是下滑样式了，这其中我只添加了一个静态的show()方法，重点就是我在其中调用的 setAppleStyle(alert)和setOpenEffect(alert)。
分别用来设置样式和设置弹出动画。
public static function show(text:String,modal:Boolean = false):void{
var alert:Alert = new Alert();
setAppleStyle(alert);
setOpenEffect(alert);
alert.text = text;
var parent:Sprite = Sprite(Application.application);
PopUpManager.addPopUp(alert, parent, modal);
alert.x = Application.application.width/2-100;
alert.setActualSize(alert.getExplicitOrMeasuredWidth(), alert.getExplicitOrMeasuredHeight());
}
样式设置就是让弹出框看上去更像mac的样式。我们主要来看下面的setOpenEffect(alert);，看其中的注释既可，demo就靠这个方法实现下滑弹出窗口。
//设置弹出动画
private static function setOpenEffect(alert:Alert):void{
var wipeUp:WipeUp = new WipeUp(); //Wipe效果，方向向上
var move:Move = new Move(); //移定效果
var parallel:Parallel = new Parallel(); //加入其中的效果会被并发执行
parallel.addChild(move);
parallel.addChild(wipeUp);
//设置弹出框在正中央
move.xFrom = Application.application.width/2-100;
move.xTo = Application.application.width/2-100;
//弹出时从－100移动到100，同时wipeUp
move.yFrom = -100;
move.yTo = -1;
//动画执行时间为300毫秒
wipeUp.duration = 300;
move.duration=300;
//在当前控件被加入舞台时执行
alert.setStyle("addedEffect",parallel)
}
源文件下载
0 评论:
发表评论