Rotation Animation - Looping Spinner

#1

Not finding any relevant forum answers on this for RP 8 - I am trying to make a loping “Spinner” animation, like a loading wheel, but I can’t really figure out how to loop it more than once. Seems like this should be pretty easy in 8.

#2

Hi!

You could make each state of your animation a state in a dynamic panel. Then put this in the DP’s OnLoad handler

OnLoad
Set This to Next Wrap repeat every 50ms

The “wrap” here is the checkbox “Wrap from last to first”

#3

If it’s a static shape and you want a smooth rotation:
OnLoad
Rotate this widget by 360 degrees over 250ms
Wait 250s
Fire event: this widget OnLoad

Or if you want it stepped:
OnLoad
Rotate this widget by 60 degrees (replace with 360/number of steps you want)
Wait 100ms
Fire event: this widget

Tweak values as you desire.

#4

You can also loop the Rotation with the On Move Event:

On Load (or on Click on button):
Rotate Widget by 360 degrees over desired duration for initial rotation

On Move
Rotate Widget by 360 degrees over desired duration
Move this by 0, 0 to loop rotation

#5

But with the Fire Event action in 8.0 we could just fire the OnLoad event again and avoid the Move action and duplicating the Rotate action.

#6

I haven’t been much aware of the Fire Event functionality so far, pretty useful stuff. Thanks for pointing that out.

#7

This worked perfectly. Thank you!

#9
#10

What do you do when you want to hide the spinner after X seconds? Putting a Wait and then Hide command doesn’t do the trick as the animation will stutter and then keep firing.

#11

I’ve found that any time you want to use a timer–any kind of time-based looping–it is more reliable to use a dynamic panel (with at least two states) and and action to “Set Panel State to next, wrap, repeat every N ms”. it just works better than a recursive approach (wait N ms, Fire [this same event] ) where there are many ways things can get out of sync.

If you want to break the loop–stop the animation, change or hide any part of it, restart it, etc. place a conditional case in the timer dynamic panel’s Panel State Chagned event to test some value (could be a global variable, text on some widget, state of another panel, selected/unselected state of a widget, etc.) that would trigger it to stop looping–with an action of “Set Panel State of This to stop repeating.”

#12

@mbc66 Could you illustrate your approach with an example of the spinner please? It would help many people learn better.

#13

https://www.google.com/search?q=loading+svg

#14

Here’s a version for a spinner SVG that doesn’t use dynamic panels and allows for interruption by hiding the image. My team can drop this in from our widget library and resize as necessary without a lot of fuss, and it doesn’t constantly consume processing cycles once loaded - only while visible.

SpinnerConserveAnimation.rp (48.7 KB)