动画独立于父项的孩子

我们正在创建一个系统，通过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

动画独立于父项的孩子

回答

相关问题