软硬度：移动几个UI元素

我需要动画2个画布之间的拉布勒运动之间的油画......软硬度：移动几个UI元素

代码的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转换问题有关，但不明白如何使用它。

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

来源

2010-03-01 Oleg Tarasenko

我不太清楚你的意思。如果您试图将标签从canv1移动到canv2，那么您会错误地采用这种方法。 move（）方法仅将DisplayObject移动到其父级中的位置。你要告诉它要做的是将标签移动到canv2的x，y坐标，它们与面板1（canv2的父亲）相关。 – Robusto 2010-03-01 20:53:48

我不认为移动功能会为您解决这个问题，因为它只会移动其父项中的标签，就像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>

来源

2010-03-06 18:55:17

软硬度：移动几个UI元素

回答

相关问题