I have seen a lot of Flash developers struggling with the issue of drawing and animating piecharts. I recently developed this simple class to take care of this, so I hope it gives someone a helping hand.
It’s really simple, just use a “radius”, “start angle” and an “end angle”, by tweening the “end angle” value, you get an animated piechart – simple but nice.
Here are three examples:
Using a circle mask for image transitions
Multiple piechart animations simultaneously
Advanced version with a gradient applied
The class looks like this:
public class circle extends Sprite
{
private var _radius:Number;
private var _startAngle:Number;
private var _endAngle:Number;
private var _radian:Number = Math.PI / 180;
public function circle(_f:Number, _l:Number, _r:Number)
{
_startAngle = _f;
_endAngle = _l;
_radius = _r;
draw();
}
public function set endAngle(_a:Number):void
{
_endAngle = _a;
draw();
}
public function get endAngle():Number
{
return _endAngle;
}
private function draw() : void
{
graphics.clear();
graphics.beginFill(0x000000);
var _angle:int = _startAngle;
while(_angle < _endAngle + 1){
graphics.lineTo(_radius * Math.cos(_angle * _radian), _radius * Math.sin(_angle * _radian));
_angle++;
}
graphics.endFill();
}
}And this is how it can be used:
var _c:circle = new circle(0, 0, 200); //start, end, radius
addChild(_c);
//Tween the end angle value
TweenLite.to(_c, 2, {endAngle:360, ease:Cubic.easeInOut});You need Tweenlite to do the example above!