独立于父母为孩子制作动画

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>

请注意，它周围还有其他元素，并且每个元素不需要有过渡。

我们可以看到这个元素是一个文本元素。让我们考虑（为了简单起见）该文本元素位于框元素内。该框元素内部可以包含其他元素，例如文本（超过 1 个）。该框可能总是有一个与之相关的转换。现在，如果这个文本元素也有一个过渡，它应该独立于框过渡工作。关于如何实现这一目标有什么想法吗？

Answer 1

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

查看它实际操作。

Answer 2

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

因此盒子的过渡将始终应用于它的所有子项。但他们肯定可以有自己的转变。 （如果框有“上移”过渡，文本有“左移”过渡，则文本将同时向上和向左移动。）

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