我应该如何在 flex/flashbuilder 中平滑这两种状态之间的过渡

Question

我有一个项目有两种状态，最好描述为打开和关闭，它们看起来像这样：

和

< img src="https://i.sstatic.net/HvtxC.png" alt="open">

我想做的是通过在两种状态之间进行插值来平滑一种状态和另一种状态之间的过渡以平滑的方式（正弦）移动页脚/按钮块，然后在饼图中淡入淡出。

然而，这显然超出了我的能力范围，在与我无法做到这一点搏斗了一个小时之后，我将其发布在这里：D

因此，我的转换块如下所示

<s:transitions>
    <s:Transition id="TrayTrans" fromState="*" toState="*">
        <s:Sequence>
            <s:Move duration="400" target="{footer}" interpolator="{Sine}"/>
            <s:Fade duration="300" targets="{body}"/>   
        </s:Sequence>       
    </s:Transition>

    <s:Transition>
        <s:Rotate duration="3000" />
    </s:Transition>
</s:transitions> 

，其中 {body} 指的是饼图， {footer} 指页脚/按钮块。

然而，这不起作用，所以我真的不知道该怎么做...

可能有益的附加信息：

主体块始终具有固定高度（也许在某些效果中用于 Xby 变量？）。

它需要在两个方向上发挥作用。

哦，Sine 块在上面的声明中定义为 。

此外！我将如何使用这些转换块将饼图设置为连续旋转？ （这会在没有标签的情况下发生）或者这是错误的处理方式，因为它本身不是一个过渡？

我想要的效果是，在选择下面的按钮之前，饼图在没有标签的情况下缓慢旋转，但在选择时旋转停止并出现标签...

提前非常感谢！

对灰度表示歉意，但我无法真正决定配色方案。欢迎任何建议。

Answer 1

如果您不介意进行一些动作脚本编码，那么使用 as3 函数这将变得非常容易。

您需要执行以下操作：

public function doTransition():void
        {
            var move:Move= new Move();
            move.target=footer;
            move.yFrom = 0;//current position
            move.yTo = 400;//or whatever is the final position of the footer
            move.duration=500;//duration in milliseconds

            var resize:Resize=new Resize();
            resize.target=body;
            resize.heightFrom=0;//or whatever is initial height
            resize.heightTo=400;//or whatver is the final height
            resize.duration=500;

            var fadeIn:Fade =new Fade();
            fadeIn.target = pieChart;//the id of the piechart
            fadeIn.alphaFrom =0;
            fadeIn.alphaTo = 1;
            fadeIn.duration =500;

            move.play();
            resize.play();
            fadeIn.play();
        }

完成此操作后，您将需要代码来旋转饼图。
为此，您可以使用计时器和旋转变换。

Answer 2

为了使补间更容易，我建议使用 TweenLite 来完成这项工作。您最终会编写更少的动作脚本。