Question

我需要在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>

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

另一个问题是如何对运动进行相应的动画处理，因为移动功能在没有任何可见动作的情况下执行运动。（运动无缝地发生）。

Answer 1

我不认为move函数会为你解决这个问题，因为它只会在它的父元素中移动标签，正如Robusto在上面评论过的那样。

解决这个问题的方法可能是确保您首先将标签与其父标签分开。然后移动它，并将其作为子项添加到其他画布。操纵x，y坐标不会隐式更改父级。这将始终必须明确地完成，这很好......

因此，例如，要实际切换父级，您需要执行类似这样的操作（伪代码）：

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

如果你想要动画这个动作，你首先必须从画布上分离标签，并确保它被添加到画布的父级，在你的情况下，是id为“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>

Flex：在几个ui元素之间移动画布

1 个答案: