Apache flex Flex：在多个ui元素之间移动画布

我需要动画标签之间的运动2画布

代码的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>

目前的问题是标签实际上没有离开第一个画布的边框（我看到的是滚动条而不是它）。 我认为这与全球颜色转换问题有关，但不了解如何使用它

另外一个问题是如何正确地设置运动的动画，因为move函数执行运动时没有任何可见的动作。

---

（移动是无缝进行的）。

我认为移动功能不会为您解决这个问题，因为它只会在其父对象内移动标签，正如Robusto在上面所评论的那样

实现这一点的方法可能是确保首先将标签与其父标签分离。然后移动它，并将其作为子对象添加到另一个画布。操纵x、y坐标不会隐式更改父坐标。这将总是必须明确地完成，这是好的

例如，要真正切换父级，您需要执行以下操作（伪代码）：

如果希望此操作设置动画，则首先必须将标签从画布上拆下，并确保将其添加到画布的父级（在您的情况下是id为“c”的面板）。然后，您可以将其插入位置，并将其添加到正确的画布中

TweenLite是一个非常适合tweening的图书馆

但我想这里的主要教训是，操纵坐标永远不会为正在移动的组件生成新的父对象

更新：这里有一个完整的示例，说明如何解决这个问题，考虑到代码不是很好看，但它包含一个简单的动画示例

<?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>

---

我不太清楚你的意思。如果您试图将标签从canv1移动到canv2，那么您的做法是错误的。move（）方法仅将DisplayObject移动到其父对象中的某个位置。您告诉它要做的是将标签移动到canv2的x，y坐标，该坐标相对于面板1（canv2的父级）。

<?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>