CAShapeLayer Animation color issue

Question

I am using the following code to draw a graph:

- (void) drawCircleGraphWithPercentage:(CGFloat)percentage
{


    self.circle = [[CAShapeLayer alloc] init];
    self.circle.strokeColor = [UIColor whiteColor].CGColor;
    self.circle.backgroundColor = [AESColorUtilities mdvdYellow].CGColor;

    self.circle.lineWidth = 30.0;

    // Make a circular shape
    self.circle.path = self.circlePath.CGPath;


    // Add to parent layer
    [self.contentView.layer addSublayer:self.circle];
    [self.contentView bringSubviewToFront:self.percentageLabel];

    // Configure animation
    CABasicAnimation* drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 1.0; // "animate over 10 seconds or so.."
    drawAnimation.repeatCount         = 1.0;  // Animate only once..

    // Animate from no part of the stroke being drawn to the entire stroke being drawn
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

    // Experiment with timing to get the appearence to look the way you want
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    // Add the animation to the circle
    [self.circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}

The issue I am having is that there is a black shape from the layer causing the colors to be off:

How can I make it so that the background is all yellow "mdvdYellow" without the black behind it?

Thank you in advance.

Answer 1

You need to remove the fillColor from the shape layer since the default is opaque black.

Setting fillColor to nil results in no fill being rendered.

self.circle.fillColor = nil;