FAQs: Timing and Animations

rp-7

#1

Hi guys,

Lately we’ve been getting a pretty good number of inquiries regarding the timing of actions and their animations in Axure RP, so I thought I’d make a post to help out anybody who has any questions! :thumbup:

General Overview:

Axure RP fires off actions one after another in the order that they’re listed. This is still true even though some actions appear to fire simultaneously; this happens because the actions fire off so quickly that you barely notice that one is happening before another. However, you’ll notice that if you include timed animations within your actions, the gap between the firing of the actions becomes more obvious, and can also illustrate that certain actions can or can’t fire together.

Timing on animations can make things a bit tricky in a number of ways:

Timing and Animations: Simultaneous vs Sequential

If you have multiple actions that each have their own animations (i.e., “Move” and “Hide”), they cannot fire at the same time. For example, if you have a rectangle shape and you want it to move to the right and fade at the same time, this is not possible. This is because each the “Move” and “Hide” actions have their own animation timings, so one can’t begin executing until the animation on the previous one has completed. However, certain actions can work together, such as the “Move” and “Set Text” actions; since the “Set Text” action doesn’t have an animation, it can fire off at the same time that the “Move” action begins, so the two appear to happen at once. Specifically, it seems that the “Move”, “Hide” and “Show” actions are all treated as animations, even if there is not an animation selection set for them. Examples of this are below:

  1. For a “Move” and “Hide” action set without animations on a widget, the “Hide” action will instantly hide the widget without showing the “Move” action, even if the “Hide” action comes after the “Move” action.

  2. Even if the “Hide” action has no animation set on it, if the “Move” action has an animation, “Hide” will not activate until “Move” has completed.

In a nutshell, as long as the two actions that you want to have fire simultaneously don’t both have animations on them, then they can be set to execute simultaneously. Otherwise, expect them to fire sequentially.

Out of Order Animations

Another issue that animations can cause is an out-of-order situation where one action that’s expected to happen first (or last, or anywhere in between) doesn’t happen where you expect it to due to the timing of other animations. One such example can be seen in the “Timing” section of my game post, here:

[But Wait, There’s MORE (Fun with Random) / Rock, Paper, Scissors, Lizard, Spock"]But Wait, There’s MORE (Fun with Random) / Rock, Paper, Scissors, Lizard, Spock](http://www.axure.com/c/forum/tips-tricks-examples/11987-but-wait-theres-more-fun-random-rock-paper-scissors-lizard-spock.html#post38433)

As demonstrated in this post, you can see that some actions, such as the setting of a variable, will set off conditions (and the following chain of actions) even if all of the actions of the previous case have not been completed. Because the variable sets off the following conditional case earlier than expected, you run into a situation where your conditional event starts animating before your first case has completed its actions. In such situations, you’ll want to make sure that you set a “Wait” action at the start of the cases that are executing prematurely. You’ll also want to make sure that the “Wait” action is long enough to allow for all of your animated actions to complete so that you get the desired order of events. To do this, add up the timings of all of your animations (e.g., the 500ms on a move animation, the 300ms on a hide animation) and then create a “Wait” action at the start of that case for that total sum of time (e.g., 800ms).

Looping Animations

If you’ve ever experienced issues with looping animations (especially with OnMouseEnter cases), this is also a timing issue. In Axure RP, the animations all activate sequentially, and if there’s an animation on it, that animation has to fully carry out before the next action is able to fire off. Now, say, you have an OnMouseEnter case and you quickly hover over the element multiple times—you may get an effect where the OnMouseEnter action then loops its actions and may behave in an undesirable manner (e.g., sliding down the page over and over), depending on what the original interaction on it was. This happens because even though only one action is firing at a time, every time your mouse hovers over the element with the OnMouseEnter case, that action is queueing up over and over again. This results in the same actions firing repeatedly one after the other. To fix this, you have to create a blocker that keeps the actions from queueing up before the first has completed. An example of that can be found is Ben’s helpful post here:

An Animation Too Far

Well that about wraps it up! I hope this was helpful for you guys, and feel free to post below if you’ve got any questions or additional tips and tricks for dealing with the wacky tacky issue that is timing and animations. :slight_smile:

Cheers,
Alyssa


unlisted #3

closed #4