Assuming there are 2 buttons: ButtonA and ButtonB, and also a widget Block
ButtonA is to resize Block to (width1, height1) in 40 seconds
ButtonB is to resize Block to (width2, height2) in 5 seconds
if now i click ButtonA, and then later I click ButtonB, i’m hoping I would get the result of “resize Block to (width2, height2) in 5 seconds”, but apparently it’s not, the ButtonA’s action won’t be interrupted until it completes
Anyone has any idea how to interrupt an ongoing action? thanks
Nothing straightforward for this… most actions, like Set Size are ballistic–once you fire them, they go and can’t be stopped.
You can build in periodic checks by creating repeating loops (a.k.a, repeating or recursive function) which can be broken/stopped. For instance, instead of “Resize Block to (width1, height1) in 40 seconds” you could initialize a “text variable” or global variable to 1, then repeatedly call an action to “Resize Block to (width1 * CountVar / 40, height1 * CountVar / 40) in 1 second”. Increment CountVar each 1-second loop and add a condition of “If CountVar <= 40 and ButtonB is unselected” (or some other means to test if ButtonB has been clicked.) So, basically, breaking down your single 40-second animation into 40 1-second animation steps. Clicking ButtonB will stop the animation steps (within one second) and then initiate its own animation. Likewise, this 5-second animation could also be setup as a repeating function in 1-second, half-second or whatever interval works best.
The most reliable way to do this in Axure is to create a dynamic panel (dp) with two states in a sort of custom function. Start this “resizing function” by setting the dp to state of “Next, wrap, repeat every 1000 ms” (or whatever interval you’d like, realizing a tradeoff between responsiveness and CPU use.)
See this file for a demo. I used an ellipse widget to resize, and probably due to rounding errors and the length of time to resize, it looks like it gets sized only in width then height, back and forth. My simple algorithm could probably be improved to handle these rounding errors for smoother sizing animation, but you should get the main point about “interruptable loops”. I also used rectangle widgets as “page-local variables” and to show the state changes in the “function dp” just to expose everything. You could group all this and hide it, or use global variables instead, and empty states in the dp.
resize in loops.rp (58.0 KB)
@mbc66 thank you so much for your reply!!!
sorry i was on leaves these days and didn’t attend your reply in time. Actually i’ve cracked with an easy solution to meet my need. Please find below to be an example of resizing with ease-in-out transition
InterruptedResize.rp (48.3 KB)
