只看楼主 楼主

Adobe Flex迷你教程 -- Super easy实现Mac系统下滑式Alert窗口

睡前没事突然想起有次在哪见过一个苹果样式的弹出窗口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)
}






原文:http://www.flextheworld.com/?p=16
[本帖最后由 kevin.luo.sl 于 2009-01-02 21:01:20 编辑]

(您是游客)您没有权限查看附件

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 沙发!

Re:Adobe Flex迷你教程 -- Super easy实现Mac系统下滑式Alert窗口

谢谢分享~

评分

举报 使用道具 TOP

只看该用户 板凳

挺有用的,我试过了,不错

评分

举报 使用道具 TOP

只看该用户 地板

楼主啥也不说  - - 你是最棒的

评分

举报 使用道具 TOP

只看该用户 #4

支持楼主

评分

举报 使用道具 TOP

只看该用户 #5

好东西.不错 谢谢

评分

举报 使用道具 TOP

只看该用户 #6

好东西,谢谢分享!

评分

举报 使用道具 TOP

只看该用户 #7

好东西,可惜我没钱,留个记号先

评分

举报 使用道具 TOP

只看该用户 #8

好东西.下来看看
zhoubinlai的签名
我这一生只有两件事不会,这也不会,那也不会.

评分

举报 使用道具 TOP

只看该用户 #9

很好很好很好很好

评分

举报 使用道具 TOP