Anyone have any tricks for doing a radial wipe animation on a pie chart? Something like this: https://dribbble.com/shots/2000368-Radial-Wipes
I tried using Josh Puckett’s SVG module, but getting all the pieces lined up is really difficult.
Ideally, I’d also be able to reverse it.
I have a circle animation using SVG up somewhere in this group that might be easier for you?
I came up with a hack to make it work. But it's a prototype...so nothing wrong with hacks!
I used Josh Puckett's SVG module to create a white SVG mask for the pie chart. So I'm animating the mask instead of the chart itself. Works perfectly for the UI I'm working on!
Here's a demo:http://share.framerjs.com/i4r2a22huhqc/
http://jrdn.io/0r1O2w0N3X2V - Here's a quick version of what I sent you.
You can draw arcs yourself, once you understand the svg path commands like MoveTo, DrawTo, ArcTo and some trigonometry:
I tried to make this with d3, but I always have a hard time getting behind some of the concepts. and d3's arcTween is no fun.
I ended up drawing svg arcs manually, after calculating all necessary angles for each data set, then I simply distribute the arcs between a start and an end angle, both can be set independently with an animation or sliders.What's a bit wacky here is that all the SVG paths are removed and re-drawn to "animate" them. I don't know if there's a way to update/change an svg's path, but at least for this it's all happening fast and smooth.
Oh yeah, the code is pretty rough :)