AS3，AIR，Starling滑動面板（如MadComponents）

Question

我正在使用AS3 / Air開發用於移動設備的應用程序。 我正在使用Feathers UI和Starling，但我想創建MadComponents隨附的面板幻燈片（菜單，信息面板等）。 我當時正在考慮創建一個包含“面板”的類，將其導入到我的屏幕上，並使用Greensock進行補間。

我的問題是：

1. 這是使用史達琳和羽毛的最好方法嗎？
2. 考慮到它是使用Flash顯示器而不是Starling構建的，是否可以將MadComponents與Starling一起使用？
3. 還有其他建議可以達到相同的結果嗎？

基本上，我只想要一個按鈕，用戶單擊該按鈕，屏幕將在左右之間進行補間，並“打開”信息面板。 再次按下按鈕，它將關閉它。

非常感謝

Answer 1

如果我正確理解了您所描述的內容，那么聽起來好像是ScreenNavigator類的羽毛正是您所需要的？

請參閱ScreenNavigator API

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

Answer 2

看起來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;
        }

    }
}

您可能需要在滑動方向上向組件添加一個明確的尺寸（如果該尺寸為零）。 否則，使用應該非常簡單。 讓我知道您是否需要更多使用指導。