Cut circle into equal parts in Sketch to implement animation progress bar?
Cut circle into equal parts in Sketch to implement animation progress bar?
Question
I have a circle in Sketch 3 that I would like to animate a progress bar in iOS. So I will need to cut the green circle in 30 pieces so I can spin through [email protected] to [email protected] to give the animation effect (*-01 is 3% of the circle and *-30 is 99% of the circle).
Is there a way to do this automatically? I couldn't figure it out so I was going to do it manually, but became too difficult and time consuming to measure all the pieces exactly. Is there a technique to accomplish this?
Below is a screenshot of my Sketch file (green circle), and a screenshot of an example of how I would like to cut it up (blue circle from another sample project but don't know how they did that).
To something like this:
Accepted Answer
You can use GB-Sketch-Segmentcircle plugin to achieve this.
- Download and install the plugin (see link above) ;
- In the plugin menu : Segmented circles > Create segmented circle
- Choose options :
- Circle is segmented so you just have to copy / modify the circle segments to match the desired result.
Hope it helps !