Search code examples
iosobjective-ccalayercashapelayer

How to animate CAShapleLayer's path changes?


I have a CAShapeLayer which contains a "hole" in it and a transparent surrounding(see screenshot). I want to animate that circle's radius changing(i want to make it bigger or smaller). Any ideas ?

this is my layer:

CAShapeLayer *fillLayer = [self getCircleLayerWithRadius:self.view.frame.size.width/2];

getCirleWithRadius function:

-(CAShapeLayer *)getCircleLayerWithRadius:(NSInteger)radius {
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.view.frame cornerRadius:0];
UIBezierPath *circlePath = [self getCirclePathWithRadius:radius];
[path appendPath:circlePath];
path.usesEvenOddFillRule = YES;
CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor grayColor].CGColor;
fillLayer.opacity = 0.5;
return fillLayer; }

getCircleWithRadius:

- (UIBezierPath *)getCirclePathWithRadius:(NSInteger)radius {
CGRect rect = self.view.frame;
UIBezierPath *circlePath;
circlePath = [UIBezierPath bezierPathWithArcCenter:(CGPoint){rect.size.width/2, rect.size.height/2} radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
return circlePath;}

Solution

  • Try using 'CABasicAnimation' with the @"path" key. Below is the example configuring your animation:

        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
        animation.duration = [CATransaction animationDuration];
        animation.timingFunction = [CATransaction animationTimingFunction];
        animation.fromValue = (id)oldPath;
        animation.toValue = (id)path;
        [fillLayer addAnimation:animation forKey:@"pathAnimation"];