我应该如何在 flex/flashbuilder 中平滑这两种状态之间的转换 [英] How should I smooth the transition between these two states in flex/flashbuilder

问题描述

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

I have an item in which has two states, best described as open and closed, and they look like this:

和

我想做的是平滑一种状态和另一种状态之间的转换，有效地通过以平滑方式(正弦)在两点之间进行插值以移动页脚/按钮块然后淡入饼形图.

And what I'd like to do is is smooth the transition between one state and the other, effectively by interpolating between the two points in a smooth manner (sine) to move the footer/button-block and then fade in the pie chart.

然而，这显然超出了我的能力范围，在与我无法这样做一个小时+后，我将其发布在这里:D

However this is apparently beyond me and after wrestling with my inability to do so for an hour+ I'm posting it here :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} 指的是页脚/按钮块.

where {body} refers to the pie chart and {footer} refers to the footer/button-block.

但是这不起作用所以我真的不知道该怎么做...

However this doesn't work so I don't really know what to do...

可能有益的其他信息:

主体块的高度总是固定的(也许在某些效果中用于 Xby 变量?).

The body block is always of fixed height (perhaps of use for the Xby variables in some effects?).

它需要双向工作.

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

Oh and the Sine block is defined above in declarations just as <s:Sine id="Sine">.

另外！我将如何使用这些过渡块设置饼图以连续旋转?(这会在没有标签的情况下发生)或者这是错误的处理方式，因为它不是这样的过渡?

Additionally! How would I go about setting the pie chart to rotate continually using these transition blocks? (this would occur without the labels on) Or is that the wrong way to go about it as it's not a transition as such?

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

The effect I'm after is one where the pie chart rotates slowly without labels prior to a selection of a button below, but on selection the rotation stops and labels appear...

非常感谢！

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

And apologies on greyscale, but I can't really decide on a colour scheme. Any suggestions welcome.

推荐答案

如果你不介意做一些 actionscript 编码，使用 as3 函数这会变得很容易.

If you dont mind doing some actionscript coding, this becomes pretty easy with an as3 function.

您需要执行以下操作:

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();
        }

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

This done, you would need code to rotate the pie chart. For that you can use timers and rotation transformations.

这篇关于我应该如何在 flex/flashbuilder 中平滑这两种状态之间的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！