Question

I am trying to built an animated circle which would be drawn clockwise until it becomes complete circle as illustrated in iPhone Core Animation – Drawing a Circle

Problem is that CALayer object is not added or build. I tested and saw that it is not accessing my drawInContext:CGContextRef and animatingArc methods.

What so far I have done is:

In AnimateArc.h

@interface AnimateArc : CALayer {

CAShapeLayer *circle;
}

-(void) animatingArc;

@end

In AnimateArc.m

-(void) drawInContext:(CGContextRef)ctx
{
CGFloat radius = 50.0;
circle = [CAShapeLayer layer];

//make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0, 0.0, 2 * radius, 2 * radius) cornerRadius:radius].CGPath;

    CGPoint centerPoint = CGPointMake(CGRectGetWidth(self.bounds)/2, CGRectGetHeight(self.bounds)/2);    

//center the shape in self.view
circle.position = centerPoint;

//configure appearence of circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;
circle.lineWidth = 5;                                           

/*CGPointMake((self.contentsCenter.size.width), (self.contentsCenter.size.height));*/

//path the circle
CGContextAddArc(ctx, centerPoint.x, centerPoint.y, radius, 0.0, 2 * M_PI, 0);
CGContextClosePath(ctx);

//fill it
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx); }

///////////////////////////////////////////////////////////////////////

-(void) animatingArc
{
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"arcEnd"];
anim.duration = 20.0; //animate over 20 seconds
anim.repeatCount = 1.0; //animate only once
anim.removedOnCompletion = NO; //Reamin there after completion

//animate from start to end
anim.fromValue = [NSNumber numberWithFloat:50.0f];
anim.toValue = [NSNumber numberWithFloat:150.0f];

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

//add animation to circle
[circle addAnimation:anim forKey:@"animatingArc"]; 
}

/////////////////////

//needed since key not part of animatable properties
+(BOOL) needsDisplayForKey:(NSString *)key
{
if([key isEqualToString:@"arcEnd"])
    return YES;
else
    return [super needsDisplayForKey:key];

}

//ensure custom properties copied to presentation layer
-(id) initWithLayer:(id)layer
{
if((self = [super initWithLayer:layer]))
{
    if ([layer isKindOfClass:[AnimateArc class]])
    {
        AnimateArc *other = (AnimateArc *) layer;
        [other setNeedsDisplay];
    }
}
return self; }

And finally in my viewController,

- (void)viewDidLoad
{
[super viewDidLoad];
[self.view.layer addSublayer:AnimateArcObject];
[AnimateArcObject animatingArc];
 }

Apology for bad formatting…. Please can someone tell me what am I doing wrong? I have also doubt that my code can crash at any place after accessing those two functions since I am novice about Core Animation and haven’t got any idea that I am in right direction or not.

Any help will be appreciated. Thanks.

Answer 1

After little searching, I thought that I am going in wrong direction. So I deleted this AnimateArc file and added new one which is inheriting from UIViewController.

Then in viewDidLoad Method, I wrote the code from this link to create circle and animations using path.

In parent view controller, I added AnimatedArc ViewController's subview. Now its working perfectly 🙂