Question

我们正在创建一个系统，其中人机界面中的元素是通过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>

请注意，它周围还有其他元素，并且每个元素都不需要进行转换。

我们可以看到这个元素是一个文本元素。让我们考虑（为简单起见）这个文本元素在box元素中。这个box元素可以在文本中包含其他元素（超过1个）。该框可能始终具有与之关联的过渡。现在，如果此文本元素也有一个过渡，它应该独立于框过渡。关于如何实现这一点的任何想法？

Answer 1

当您调整父级的设置时，它也会应用于子级。（移动，缩放，旋转）

因此，盒子的转换将始终应用于所有孩子。但他们肯定可以有自己的过渡。（例如，框中有一个“向上移动”过渡，文本是“向左移动”过渡，然后文本将向上和向左移动。）

如果您不希望文本位置受到框位置的影响，请不要将其添加为框的子项。

Answer 2

我可以看到你想要让一个孩子属于父母而不接受它的几何变换的原因（分层，可见性，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。

动画独立于父母的孩子

2 个答案: