軟硬度：移動幾個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元素

回答

相關問題