Repeating animation

I’m wondering if anyone can help me with this loading animation. I need the sequence of actions to repeat in a loop.

Thanks!

nashas71
loading_animation.rp (58.8 KB)

Hi nashas71,

In order to get that animation to loop you’ll want to have the interaction on ellipse iii trigger an interaction on ellipse i that starts the string of resizes over again. For example, on ellipse iii you currently have a chain of actions that that ends with ellipse i being resized to 18x18px. One way to get the animation to loop is to add an OnResize event to ellipse i that starts resizing all of the widgets again once the prototype has detected that ellipse i has been resized.

One of the tricky parts with using OnResize for looping animations is that the resize by default will fire every single time there is a resize. For example, right now your ellipse iii widget has a chain of events that starts by enlarging ellipse iii; that resize re-fires the OnResize action, which in turn re-fires that OnResize action, etc… If you look at the “Console” tab in your prototype’s sitemap after running the animation you’ll see an infinite loop of OnResize interactions for ellipse iii.

One way to break that endless loop of resizes is to only allow the ellipse to resize if it meets a certain condition. For example:

That condition (which uses the condition builder and a local variable to reference ellipse iii) only allows ellipse iii’s OnResize event to fire if its width equals 8. This prevents it from re-firing its event when it sets its own size to 18x18, but allows its resize event to be fired after ellipse i has set its size back to 8x8px.

The same logic would apply to the OnResize event that you add to your ellipse i widget, but instead of checking whether the width is equal to 8 you would want to only allow ellipse i to resize if its width is equal to 18:

Hopefully that makes sense! I attached your edited file here if you’d like to take a look. (Don’t mind the altered “Wait” lengths).
loading_animation EDIT.rp (62.6 KB)

Hi @nashas71

There is a very simple way to add infinite loop in axure. By using nested _Fire Event_s. That is by Triggering the same event inside an event.

I have incorporated this mechanism to your RP file :slight_smile:
loading_animation_Kishan.rp (49.6 KB)

5 Likes