Flex: перемещение холстов между несколькими элементами пользовательского интерфейса

Question

Мне нужно анимировать движение между двумя полотнами ...

Пример кода mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()" frameRate="1">

<mx:Script>
    <![CDATA[
        import mx.controls.Label;
        public function main():void
        {

            onEnd();
        }

        private function onEnd():void
        {
            (canv1.getChildAt(0) as Label).move(canv2.x, canv2.y);
        }

    ]]>
</mx:Script>
<mx:Panel x="208" y="0" width="190" height="200" layout="absolute" title="Panel2" id="d">
</mx:Panel>
<mx:Panel width="200" height="200" id="c"  title="Panel 1">
    <mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565">
        <mx:Label text="Move me after event" y="10"/>
    </mx:Canvas>
    <mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA">
    </mx:Canvas>
</mx:Panel>
</mx:Application>

В настоящее время проблема заключается в том, что метка фактически не покидает границы первого холста (вместо нее отображаются полосы прокрутки). Я думаю, что это связано с проблемами преобразования globalToLocal, но я не понимаю, как его использовать.

Также другой вопрос - как правильно анимировать движение, потому что функция перемещения выполняет движение без видимых действий. (Движение происходит плавно).

Answer 1

Я не думаю, что функция перемещения решит это за вас, поскольку она будет перемещать метку только внутри своего родителя, как прокомментировал Робусто выше.

Возможно, для этого нужно проследить, чтобы вы сначала отсоединили метку от ее родителя. Затем переместите его и добавьте в качестве дочернего элемента на другой холст. Манипуляции с координатами x, y не изменят для вас неявно родителя. Это всегда нужно делать явно, и это хорошо ...

Так, например, чтобы на самом деле сменить родителя, вам нужно сделать что-то вроде этого (псевдокод):

/**
 * This function only switches the parent.
 */
private function moveLabel(label:Label) {
    label.parent.removeChild(label);
    canv2.addChild(label);
}

Если вы хотите, чтобы это действие было анимированным, вам сначала нужно отсоединить ярлык от холста и проследить, чтобы он был добавлен к родителю холста, в вашем случае, к панели с идентификатором "c". Затем вы можете изменить его положение и добавить его на правильный холст.

TweenLite - отличная библиотека для анимации. http://www.greensock.com/tweenlite/

Но я думаю, что основной урок здесь заключается в том, что манипулирование координатами никогда не приведет к появлению нового родителя для компонента, который вы перемещаете.

Обновление : Вот полный пример того, как вы могли бы решить эту проблему, учитывая, что код выглядит не очень красиво, но он содержит простой пример анимации.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()">

<mx:Script>
<![CDATA[
    import mx.controls.Label;
    import flash.geom.Point;
    import gs.TweenLite;
    import gs.easing.Expo;

    public function main():void
    {

        onEnd();
    }

    private function onEnd():void
    {
        var label:Label = canv1.getChildAt(0) as Label;
        var originX:int = label.localToGlobal(new Point(label.x, label.y)).x;
        var originY:int = label.localToGlobal(new Point(label.x, label.y)).y;
        label.parent.removeChild(label);
        stage.addChild(label);
        label.x = originX;
        label.y = originY;
        TweenLite.to(label, 1.5, {y: "80", ease:Expo.easeOut, onComplete:onFinishTween, onCompleteParams:[label]});

    }

    private function onFinishTween(label:Label):void {
        stage.removeChild(label);
        label.x = canv2.globalToLocal(new Point(label.x, label.y)).x;
        label.y = canv2.globalToLocal(new Point(label.x, label.y)).y;
        canv2.addChild(label);

    }

]]>
</mx:Script>
<mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565" y="-1" x="9">
    <mx:Label text="Move me after event" y="10"/>
</mx:Canvas>
<mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA" y="90" x="8">
</mx:Canvas>

</mx:Application>