First off, what are these things actually called anyway? A donut chart is a pie chart with a hole in the middle, but what about the Apple Watch rings that demonstrate progress rather than parts of a whole?
Anyway, you can start this tutorial from scratch (recommended) or download the final Studio file here. I've also included an animated version of the Apple Watch activity rings to demonstrate how this tutorial can be applied.
A quick note: This tutorial requires you to already understand the basics of animation in InVision Studio. You can check out my full InVision Studio animation course then come back to this one.
Creating and animating a circle graph is pretty straightforward if it covers less than 50% of the circle's circumference. However, animating around a full circle requires a little bit of experimentation. This technique is not ideal for full user interface designs, but it can work great to demonstrate how these individual components should respond and animate. Let's get started.
Create a circle (shortcut: O) with a centered border and name it 'background'.
Copy and paste (CMD+C, CMD+V) this circle and name the new circle 'inner'. Reduce the border size slightly and use a color that contrasts with the background. Use the Scissors tool (S when you are editing an individual layer) to remove the two left segments.
Copy and paste the half circle and rename it to 'overlay'. Change the border color and border width to match the 'background' layer.
Group 'inner' and 'background' into a group named 'animation'. This will allow us to rotate the 'inner' group around the whole circle rather than around the center of the half circle. Rotating this group will reveal 'inner' from behind 'overlay'.
Create a new artboard and rotate 'animation' 180 degrees. Add a default 'Tap' or 'Click' interaction (C) between the first and second artboard, then add one from the second to first artboard as well.
We now have a ring animation that takes up half of the graph. This technique only uses 3 layers and one group. Continuing to rotate this layer will cause 'overlay' to start hiding it again. To create a graph that animates the entire circle, we have to add another group and show/hide specific layers.
Going back to your original artboard, group the entire graph, copy and paste it, move it to an open space on the artboard, and rename both groups to 'top' and 'bottom'.
On the new 'bottom' group, copy and paste the 'animation' group and rename to 'animation-top'. This will give us another half circle to animate after the first half is complete. Set the opacity of the background to 0%. We still need this layer to ensure that it rotates correctly, but the color interferes with the other half.
We can now change the visibility of the 'overlay' layer to create the full animation. Any change to the visibility is automatically applied at the end of an animation. This allows instant hiding and showing layers, even during a complex animation.
Create a new artboard and rotate both animation layers 180 degrees, then hide (Shift+CMD+H) the 'overlay' layer. Create another new artboard and rotate 'animation-top' 360 degrees. The first step creates the first half of the animation then instantly hides the overlay to prepare for the second half, while the second half reveals the new 'animation-top' group.
Add a 'Tap' or 'Click' interaction between the first and second artboards, then add a 'Timer' interaction between the second and third artboards. Set the 'Timeout' to 0 for the 'Timer' interaction, and set 'Duration' to .3s for both.
The entire circle will now animate. However, you will see it doesn't look smooth when we preview it. We will need to adjust the easing curves for both interactions to create the appearance of a single, fluid animation. For the first interaction, go to 'Edit Timeline' to change the overall easing to 'ease-in'. For the second interaction, change the overall easing to 'ease-out'. This will cause the interaction to speed up during the first half and slow down during the second half.
Reversing the animation will require one additional artboard. since you can only have a single 'Timer' animation on a specific artboard.
Copy and paste the middle artboard and unhide the 'overlay' layer. The animation settings will be very similar to the original animation. A 'Tap' or 'Click' interaction on the final artboard will lead to a 'Timer' interaction on the new artboard. Use 'ease-in' on the first one and 'ease-out' on the second.
Finally, just for fun, we can create the original half circle animation to happen alongside the full circle animation. All you have to do is rotate it 90 degrees for the in-between artboards and 180 degrees for the final artboard.
This type of graph works great in dashboards or other data heavy applications. The activity monitoring on the Apple Watch is a great example. I've included an Apple Watch animation in the Studio file that uses these techniques. Use that as a starting point to create individual activity screens with swipe transitions or create your own brand new design. Make sure to share with me what you create!
