: How to prototype an animation of a ring diagram filling in its value using Principle? I'd like to know if there are any members here who are Principle app geniuses and know how I could create
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.
More posts by @XinRu324
1 Comments
Sorted by latest first Latest Oldest Best
Yes, it's possible with a couple of tricks :) Here's a short screencast to demonstrate such prototype in action:
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:
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 :)
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.