How to prototype an animation of a ring diagram filling in its value using Principle?

Question

I'd like to know if there are any members here who are Principle app geniuses and know how I could create an animation of a ring diagram filling up its value in a transition?

If I describe it in a frame interval it'd look like this:

So I want the ring to have its blue and red value being filled in at a speed based on its final value, that is the blue growing faster than the red since it's larger than the red value in its final state. I hope this comes across somewhat understandable.

I've tried a couple of times now but I don't understand how I can have the colours hidden from start and then gradually expand/gaining opacity. Maybe this is a too complex animation for Principle? Please, let me know if you have any ideas.

Answer 1

Yes, it's possible with a couple of tricks :) Here's a short screencast to demonstrate such prototype in action:

http://quick.as/bnJGcnLP8

The main idea is to split your ring diagram into sectors of a circle. The quantity of sectors depends on how much space the colored data will take. I have also added a center circle as an overlay and the outside overlay circle (in the same color as a main background color) to prevent showing some possible unexpected pieces of sectors during the animation. Another important thing to keep in mind is that you can change a transform origin from center to any point by placing an element into a group.

Feel free to download the source files to explore the structure with the following link:

https://www.dropbox.com/s/9qaphiadn9hbyi6/Animated_circle_diagram_Principle_prototype.zip?dl=0

And thank you for posting this question. Honestly, I didn't suppose that it's possible to create such animations in Principle :)