1

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:

enter image description here

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.

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 :)

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.