Arcs can be used for many purposes, but are often used to show some form of progress. This tutorial will walk you through how to animate an arc to create a loading wheel, using two different methods. The first will use the start and end angles that define the arc to create a spinning wheel where the tail chases the head. The second will use the arc’s rotation to create a pinwheel-like animation.
Create a new project and add an arc control to a layer. You can do this by right-clicking on the layer and selecting Add > Control, or by dragging in an arc control from the Palette.
Change the colour of the arc to whatever you desire, and change the style from fill to Line. You can also adjust the stroke if you would like something thicker than the default.
At this point, you will want to decide where the arc will start. By default, the Start Angle is 0 degrees, which is the point on the right side of the circle, as seen in the above screenshot. If you would like it to start at a different angle, set the Start Angle to a different value and remember that you will now have to change the End Angle relative to that.
Set all angles to 0 so they do not show before the animation begins.
Create a new animation and create an animation step for the end angle. Set it to change from a specific value of 0 (or whatever start angle you want) to 360 degrees relative to the start value.
You can keep the Rate linear if you would like, or use some easing to make the wheel seem smoother.
Preview the animation to see if you are happy with how this simple animation looks. If you would like to add a little more flair, you can have the tail of the loading wheel trail behind and catch up with the head.
Add another animation step, this time for the Start Angle. Set it to change from the current value to a specific value of 0. Set the offset and duration both to 0, as well. This will ensure the start angle is reset every time the animation replays, since the animation will likely replay a few times while your app is in a loading state.
Create another animation step for the Start Angle, setting it to change from 0 to 360, mimicking the End Angle animation. Set it to the same duration as the End Angle animation, but stagger it so that it begins approximately 75% of the way through the End Angle animation. This way, it will begin just as the end angle is reaching its destination.
Preview the animation to see if this looks good to you. You can play with the easing graph or staggering of the animation steps if you would like something different.
If you would prefer a loading wheel that is more like a pinwheel, you can use the Rotation angle for the animation instead of the End and Start Angles.
Change the arc style to a fill and set the End Angle to 45 degrees from the Start Angle.
Now remove the animation steps from the loading_wheel animation and create a new one for the variable that is tied to the arc’s Rotation. Set it to go from 0 to 360. In this case, you probably want to use a linear Rate. Test the animation and alter the progression values as desired.
The loading animation will be triggered in very specific situations, but for the purpose of this tutorial, it will be triggered on screenshow. Right click on the Screen in the Application Model and create a new action that is triggered on screenshow and triggers the start of the loading_wheel animation.
The important aspect of a loading wheel animation is that it should repeat continuously until it is stopped by another event in the system. To achieve this, create another event on the Screen, this time triggered by the completion of the loading_wheel animation and triggering the start of the same animation.
Now if you start the app, the animation should begin playing and repeat until you send a gra.animate.stop event. Because this last event is on the Screen, it will not be triggered if the animation completes when the user moves to a different screen. This helps to clean up the lifecycle of the animation, so that you don’t have animations running in the background causing performance issues. Keep in mind that if you put this animation complete event at the app level (the top of the Application Model), the animation will continue to be re-triggered continuously, regardless of what screen the user is on, until you send it a stop event.