動畫獨立於父項的孩子

我們正在創建一個系統，通過xml定義顯示單元中的元素。這也意味着整個系統本質上是動態的。所以無法知道某個元素是否會有與之關聯的補間。動畫獨立於父項的孩子

<element id="name" type="txt" top="0" txt="Black look down" left="0" width="145" height="35"......> 
    <transitions> 
     <navIn> 
     <tween type="default" orientation="horizontal" direction="1" time=".4" delay=".2" stagger="0" ease="Quint.easeOut" /> 
     </navIn> 
     <navOut> 
     <tween type="default" orientation="vertical" direction="1" time=".4" delay="0" stagger="0" ease="Quint.easeIn" /> 
     </navOut> 
    </transitions> 
</element>

請注意，它周圍還有其他元素，並且每個元素都不需要過渡。

我們可以看到這個元素是一個文本元素。讓我們考慮（爲了簡單起見），這個文本元素是在一個盒子元素中。這個盒子元素可以像文本一樣包含其他元素（超過1個）。該框可能總會有一個與之相關的轉換。現在如果這個文本元素也有一個轉換，它應該獨立於框轉換工作。關於如何實現這一點的任何想法？

來源

2012-02-09 ganaraj

我可以看到原因（分層，可見性，mouseChildren等），你想有一個孩子屬於父母，但沒有收到它的幾何變換。

這取決於您正在尋找的效果，但您可以通過應用父變換矩陣的逆來逆轉父親的仿射變換（幾何 - 也稱爲縮放/旋轉/平移）的效果，例如，到一個容器之間：

在這個例子中，我掀起了一股，父容器（紅點）被移動/旋轉/縮放，而孩子（藍點）保持靜態，因爲我創建了一個容器在之間，使用Matrix.invert（注意：對每個幀執行的計算）輕鬆地反轉父變換的效果。你可以在沒有容器的情況下做到這一點，但是你需要注意你如何補償孩子。

您需要根據您的要求對其進行優化，但我只是表明如果不容易，它可能是可能的。 =）

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.utils.setInterval; 

    [SWF(width="800", height="600", frameRate="30", backgroundColor="#FFFFFF")] 
    public class tst extends Sprite 
    { 

    public function tst():void 
    { 
     var prnt:Sprite = new Sprite(); 
     var cont:Sprite = new Sprite(); 
     var child:Sprite = new Sprite(); 

     prnt.addChild(cont); 
     cont.addChild(child); 

     prnt.graphics.beginFill(0xff0000); 
     prnt.graphics.drawCircle(0, 0, 10); 

     child.graphics.beginFill(0x0000ff); 
     child.graphics.drawCircle(0, 0, 10); 


     cont.addEventListener(Event.EXIT_FRAME, function(e:Event):void { 
     var m:Matrix = prnt.transform.matrix.clone(); 
     m.invert(); 
     cont.transform.matrix = m; 
     }); 

     var n:Number = 0; 
     setInterval(function():void { 
     prnt.x = 50+40*Math.cos(n); 
     prnt.y = 50+40*Math.sin(n); 
     prnt.scaleX = 3*Math.sin(n); 
     prnt.rotation += 7*Math.cos(n); 
     n += 0.1; 
     }, 100); 

     addChild(prnt); 
    } 
    } 
}

查看一下in action。

來源

2012-02-09 17:11:20

，如上所述，這不是一個好辦法。你的解決方案也是一個出價（孩子沒有停下來，它總是感動一點） – RasmusWL 2012-02-09 21:13:08

Lol @你的downvote。再次，很抱歉給你看。我沒有說這是個好主意，我說這是可能的。 – 2012-02-09 21:37:05

當您調整家長的設置時，它也將應用於孩子。（移動，縮放，旋轉）

因此，盒子的過渡將始終應用於所有它的孩子。但他們肯定可以有自己的轉變。（Fx盒子有一個「向上移動」的過渡，文本是一個「向左移動」的過渡，然後文本將向上移動並離開。）

如果您不希望文字位置受到盒子的位置，然後不要將它添加爲盒子的小孩。

來源

2012-02-09 11:28:24 RasmusWL

是的。我明白了。我正在尋找的是這種情況下的高效解決方案！ – ganaraj 2012-02-09 11:50:04

「如果您不希望文本位置受到框位置的影響，請不要將其添加爲框的子項。」對不起，我很少接受失敗這麼快。 =） – 2012-02-09 17:16:56

@JeffWard我不得不不同意！我認爲這是不好的做法，不遵循最普遍的規則（比如兒童不受到幾何變換的影響）。如果你的想法不適合系統，解決方案不僅僅是破解它，直到它的工作。要麼將您的想法調整到系統（通常會是最好的，您可能還會找到更好的方法）。如果你不能遵循這個系統，那麼製作你自己的！ – RasmusWL 2012-02-09 21:09:34

動畫獨立於父項的孩子

回答

相關問題