将 Flex Group 绘制到位图，然后附加它

Question

一点背景信息：我想使用 Greensock Tweenlite class 在 Flex 中的弹出窗口（扩展 Spark Group）中制作动画。我有一种我非常喜欢的弹性轻松，但是当我调整弹出窗口的比例时，Flex Group 中的文本会跳来跳去，摇摆不定，并且通常看起来很糟糕，直到调整停止为止。

我考虑过在介绍动画完成后淡入文本，但我对这个解决方案不满意。我唯一的其他选择（据我所知）是将整个组绘制到位图，在弹出窗口中包含该位图，隐藏弹出窗口中的其余内容，然后删除位图（并显示 "real" 内容）补间完成后。

但是不知道如何在 Flex 中执行此操作，因为我无法在其中 addChild(bitmap)。

这是我的代码的简化版本。

<fx:Script>
    <![CDATA[
    import com.greensock.TweenLite;
    import com.greensock.easing.Elastic;
    import com.greensock.plugins.TweenPlugin;

    import mx.events.FlexEvent;


    private function creationComplete(event : FlexEvent) : void
    {
        addEventListener(MouseEvent.CLICK,
                         function (m : MouseEvent) : void {
                             TweenLite.killTweensOf(rect);
                             TweenLite.killTweensOf(content);

                             TweenLite.fromTo(rect,
                                              .8,
                                              {
                                                  scaleX: .8,
                                                  scaleY: .8
                                              },
                                              {
                                                  scaleX: 1,
                                                  scaleY: 1,
                                                  ease:   Elastic.easeOut
                                              });
                         });
    }
    ]]>
</fx:Script>

<s:HGroup width="100%"
          height="100%"
          horizontalAlign="center"
          verticalAlign="middle">

    <s:Group id="rect"
             width="120"
             height="120">

        <s:Rect width="100%"
                height="100%"
                radiusX="10"
                radiusY="10">

            <s:fill>
                <s:SolidColor color="0x000000" />
            </s:fill>

        </s:Rect>

        <s:VGroup id="content"
                  width="100%"
                  height="100%"
                  padding="10"
                  horizontalAlign="center"
                  verticalAlign="middle">
            <s:Label width="100%"
                     text="Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123"
                     color="0xffffff" />
        </s:VGroup>

    </s:Group>

</s:HGroup>

Answer 1

我明白了。做了我计划的事情，经过更多研究发现 BitmapImage class.

最终代码：

<fx:Script>
    <![CDATA[
    import com.greensock.TweenLite;
    import com.greensock.easing.Elastic;

    import mx.events.FlexEvent;


    private function creationComplete(event : FlexEvent) : void
    {
        addEventListener(MouseEvent.CLICK,
                         function (m : MouseEvent) : void {
                             var bitmapData : BitmapData = new BitmapData(content.width,
                                                                          content.height,
                                                                          true,
                                                                          0x000000);
                             bitmapData.draw(content);
                             bitmapImage.source  = bitmapData;
                             bitmapImage.visible = true;
                             content.visible     = false;
                             trace(bitmapImage.smoothingQuality);

                             TweenLite.killTweensOf(rect);
                             TweenLite.killTweensOf(content);

                             TweenLite.fromTo(rect,
                                              .8,
                                              {
                                                  scaleX: .8,
                                                  scaleY: .8
                                              },
                                              {
                                                  scaleX:     1,
                                                  scaleY:     1,
                                                  ease:       Elastic.easeOut,
                                                  onComplete: onComplete
                                              });
                         });
    }

    private function onComplete() : void
    {
        bitmapImage.visible = false;
        content.visible     = true;
    }
    ]]>
</fx:Script>

<s:HGroup width="100%"
          height="100%"
          horizontalAlign="center"
          verticalAlign="middle">

    <s:Group id="rect"
             width="120"
             height="120">

        <s:Rect width="100%"
                height="100%"
                radiusX="10"
                radiusY="10">

            <s:fill>
                <s:SolidColor color="0x999999" />
            </s:fill>

        </s:Rect>

        <s:BitmapImage id="bitmapImage"
                       smooth="true"
                       smoothingQuality="high" />
        <s:VGroup id="content"
                  width="100%"
                  height="100%"
                  padding="10"
                  horizontalAlign="center"
                  verticalAlign="middle">
            <s:TextInput width="100%"
                         text="Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123"
                         color="0x0000ff" />
        </s:VGroup>

    </s:Group>

</s:HGroup>

将 Flex Group 绘制到位图，然后附加它

Drawing a Flex Group to a bitmap, then attaching it

apache-flex

actionscript-3