0

我正在为移动设备开发一个使用 AS3/Air 的应用程序。我正在使用 Feathers UI 和 Starling，但我想创建一个 MadComponents 附带的面板幻灯片（菜单、信息面板等）。我正在考虑创建一个包含“面板”的类，将其导入我的屏幕并使用 Greensock 进行补间。

我的问题是：

  1. 这会是使用 Starling 和 Feathers 的最佳方式吗？
  2. 考虑到它是使用 Flash 显示器而不是 Starling 构建的，我可以将 MadComponents 与 Starling 一起使用吗？
  3. 还有什么其他建议可以达到同样的效果吗？

基本上我只想要一个按钮，用户单击按钮，屏幕向左/向右补间并“打开”信息面板。再次按下按钮，它会关闭它。

非常感谢

4

2 回答 2

0

如果我理解您所描述的正确，那么听起来 ScreenNavigator 羽毛类正是您需要的东西？

请参阅ScreenNavigator API

以及以您描述的相同方式使用 SlideNavigator 的 Feathers Component Explorer的演示。

于 2013-05-27T12:43:32.133 回答
0

看起来 Josh Tynjala 正在寻求将此功能添加到 Feathers：https ://github.com/joshtynjala/feathers/issues/527

与此同时，我也想要同样的东西，所以我只是把它搞定了，我很乐意分享它（警告：尚未经过广泛测试）：

package com.hiddenachievement.space.components
{
    import feathers.core.FeathersControl;

    import starling.animation.Transitions;
    import starling.animation.Tween;
    import starling.core.Starling;
    import starling.display.Sprite;

    /**
     * Creates a control that emerges from one side of the stage, while moving the main view to show it.
     */

    public class EdgeSlideControl extends FeathersControl
    {
        private var _mainView:Sprite;
        private var _open:Boolean;
        protected var _tween:Tween;
        protected var _side:int;
        protected var _callback:Function;
        protected var _uncover:Boolean;

        static public const NORTH:int = 0;
        static public const SOUTH:int = 1;
        static public const EAST:int = 2;
        static public const WEST:int = 3;


        /**
         * Creates an EdgeSlideControl.
         *
         * @param mainView The main view (possibly a ScreenNavigator) that will move to show the menu.
         * @param side The side that the control will emerge from.
         * @param uncover When true, the main view will slide away to uncover the control.  When false, the control will slide in from the side, as the main view slides out of the way. 
         *
         */
        public function EdgeSlideControl(mainView:Sprite, side:int, uncover:Boolean = true)
        {
            super();
            _mainView = mainView;
            _side = side;
            _uncover = uncover;
        }

        /**
         * Implements the standard FeathersControl's initialize.
         */
        override protected function initialize():void
        {
            _open = false;
            visible = false;
        }

        /**
         * Begin the animation to display the control.
         */
        public function show(callback:Function=null):void
        {
            _callback = callback;
            _tween = new Tween(_mainView, 0.2, Transitions.LINEAR);
            _tween.onUpdate = updateSlide;
            _tween.onComplete = slideComplete;

            switch(_side)
            {
                case NORTH:
                    _tween.animate("y", height);
                    break;
                case SOUTH:
                    _tween.animate("y", -width);
                    break;
                case EAST:
                    _tween.animate("x", -height);
                    break;
                case WEST:
                    _tween.animate("x", width);
                    break;
            }

            Starling.juggler.add(_tween);
            _open = true;
            visible = true;
        }

        /**
         * Begin the animation to hide the control.
         */     
        public function hide(callback:Function=null):void
        {
            _callback = callback;
            _tween = new Tween(_mainView, 0.2, Transitions.LINEAR);
            _tween.onUpdate = updateSlide;
            _tween.onComplete = slideComplete;

            switch(_side)
            {
                case NORTH:
                case SOUTH:
                    _tween.animate("y", 0);
                    break;
                case EAST:
                case WEST:
                    _tween.animate("x", 0);
                    break;
            }

            Starling.juggler.add(_tween);
            _open = false;
        }


        /**
         * If the control is moving (not in "uncover" mode), move the control into place, next to the main view.
         */         
        public function updateSlide():void
        {
            if (!_uncover)
            {
                switch(_side)
                {
                    case NORTH:
                        y = _mainView.y - height;
                        break;
                    case SOUTH:
                        y = _mainView.height - _mainView.y;
                        break;
                    case EAST:
                        x = _mainView.width - _mainView.x;
                        break;
                    case WEST:
                        x = _mainView.x - width;
                        break;
                }
            }
        }


        /**
         * Perform any actions needed after the transition is done animating.
         */ 
        public function slideComplete():void
        {
            if (_callback != null)
            {
                _callback();    
            }

            visible = _open;
        }

        public function get isOpen():Boolean
        {
            return _open;
        }

    }
}

如果组件变为零，您可能需要在滑动方向上向组件添加显式大小。否则，使用应该非常简单。如果您需要有关如何使用它的更多指导，请告诉我。

于 2013-06-11T00:43:25.090 回答