Flex 中的状态转换
我有一个具有两种状态的 Flex 组件 - “”(即无名称/默认)和“事务性” - 以及一堆从一种状态移动到另一种状态的转换。
有一个按钮可以在两种状态之间切换,单击该按钮会调用以下函数,
public function ToggleState():void
{
if (this.currentState=="Transactional")
{
this.currentState = "";
}
else
{
this.currentState = "Transactional";
}
}
除非您在组件从一种状态更改为另一种状态时单击该按钮,否则一切都会按预期工作。之后事情开始变得奇怪——一些以前会淡出的组件不再消失。其他不再重新出现,
我怀疑这是因为过渡未正确完成,因此动画组件的属性未正确重置为正确的值。
我尝试进行一些检查来判断状态是否正在发生变化(从而在播放转换时禁用按钮),但我能找到的唯一监听的事件是
enterState
currentStateChange
currentStateChanging
在转换完成之前触发的所有事件。
有谁知道任何其他合适的事件来监听或进行状态更改的更好方法?
更新:
这是我用于转换的 mxml
<transitions>
<mx:Transition fromState="" toState="Transactional">
<mx:Sequence>
<mx:Parallel>
<mx:AnimateProperty target="{Controller}" property="y" fromValue="-60" toValue="-1" duration="600" />
<mx:AnimateProperty target="{Environment}" property="y" fromValue="156" toValue="46" />
<mx:AnimateProperty target="{ProfitAndLoss}" property="y" fromValue="156" toValue="126" />
<mx:AnimateProperty target="{Summary}" property="y" fromValue="156" toValue="56" />
<mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="266" toValue="246" />
<mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="425" toValue="505" />
<mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="1" />
</mx:Parallel>
<mx:AnimateProperty target="{Summary}" property="x" fromValue="42" toValue="256" />
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="Transactional" toState="">
<mx:Sequence>
<mx:AnimateProperty target="{Summary}" property="x" fromValue="256" toValue="42" />
<mx:Parallel>
<mx:AnimateProperty target="{Controller}" property="y" fromValue="-1" toValue="-60" />
<mx:AnimateProperty target="{Environment}" property="y" toValue="156" fromValue="46" />
<mx:AnimateProperty target="{ProfitAndLoss}" property="y" toValue="156" fromValue="126" />
<mx:AnimateProperty target="{Summary}" property="y" toValue="156" fromValue="56" />
<mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="246" toValue="266" />
<mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="505" toValue="425" />
<mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="0" />
</mx:Parallel>
</mx:Sequence>
</mx:Transition>
</transitions>
I have a flex component with 2 states - "" (ie no name / default) and "Transactional" - and a bunch of transitions to move from one state to the other.
There is a button to toggle between the two states which calls the following function when clicked
public function ToggleState():void
{
if (this.currentState=="Transactional")
{
this.currentState = "";
}
else
{
this.currentState = "Transactional";
}
}
Everything works as expected unless you click on the button whilst the component is changing from one state to the other. After that things start going strange - some components that would previously fade out, no longer disappear. Others no longer re-appear
I suspect this is because the transitions don't complete properly and so the properties of the components being animated are not properly reset to the correct values.
I tried to put in some checks to tell if the state is changing (and hence disable the button whilst the transitions are playing) but the only events I could find to listen for were
enterState
currentStateChange
currentStateChanging
all of which are fired before the transitions are complete.
Does anyone know of any other suitable events to listen for or a better way of doing the state change?
UPDATE:
Here is the mxml I am using for the transitions
<transitions>
<mx:Transition fromState="" toState="Transactional">
<mx:Sequence>
<mx:Parallel>
<mx:AnimateProperty target="{Controller}" property="y" fromValue="-60" toValue="-1" duration="600" />
<mx:AnimateProperty target="{Environment}" property="y" fromValue="156" toValue="46" />
<mx:AnimateProperty target="{ProfitAndLoss}" property="y" fromValue="156" toValue="126" />
<mx:AnimateProperty target="{Summary}" property="y" fromValue="156" toValue="56" />
<mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="266" toValue="246" />
<mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="425" toValue="505" />
<mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="1" />
</mx:Parallel>
<mx:AnimateProperty target="{Summary}" property="x" fromValue="42" toValue="256" />
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="Transactional" toState="">
<mx:Sequence>
<mx:AnimateProperty target="{Summary}" property="x" fromValue="256" toValue="42" />
<mx:Parallel>
<mx:AnimateProperty target="{Controller}" property="y" fromValue="-1" toValue="-60" />
<mx:AnimateProperty target="{Environment}" property="y" toValue="156" fromValue="46" />
<mx:AnimateProperty target="{ProfitAndLoss}" property="y" toValue="156" fromValue="126" />
<mx:AnimateProperty target="{Summary}" property="y" toValue="156" fromValue="56" />
<mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="246" toValue="266" />
<mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="505" toValue="425" />
<mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="0" />
</mx:Parallel>
</mx:Sequence>
</mx:Transition>
</transitions>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
currentState
属性立即发生变化,我很确定是转换导致了麻烦(曾经在那里,做过那件事;-)。如果单击太快,则会有两个同时运行的效果更改同一组值,从而产生未定义的结果。此外,效果上的effectEnd
事件处理程序将在另一个正在运行的效果中间触发。您可以在效果实例上尝试使用end()
方法,以在开始下一个效果之前立即结束效果,这还会将所有属性设置为其最终值并触发effectEnd
。如果这没有帮助,您可以发布一些效果代码吗?The
currentState
property changes instantly, I'm pretty sure it's the transitions that cause the trouble (been there, done that ;-). If you click too fast, you have two concurrently running effects changing the same set of values, yielding an undefined result. Also,effectEnd
event handlers on your effects will fire in the middle of another running effect. You might try theend()
method on your effect instances to immediately end an effect before starting the next, this also sets all attributes to their final values and triggerseffectEnd
. If that does not help, can you post some of your effect code?