How to Animate a UIBezierPath

Question

i would like to animate a UIBezierPath of a rect to a triangle one, not to animate a view on a path but animate the path itself so it morphs from one shape to another. the path is added to a CALayer

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];    
maskLayer.path = [self getRectPath];

-(CGPathRef)getTrianglePath
{
    UIBezierPath* triangle = [UIBezierPath bezierPath];
    [triangle moveToPoint:CGPointZero];
    [triangle addLineToPoint:CGPointMake(width(self.view),0)];
    [triangle addLineToPoint:CGPointMake(0, height(self.view))];
    [triangle closePath];
    return [triangle CGPath];
}

-(CGPathRef)getRectPath
{
    UIBezierPath*rect = [UIBezierPath bezierPathWithRect:self.view.frame];
    return [rect CGPath];
}

Answer 1

I am not an expert on CoreAnimation but you can define a CABasicAnimation as follows

CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
morph.duration = 5;
morph.toValue = (id) [self getTrianglePath];
[maskLayer addAnimation:morph forKey:nil];

The first line states that you want to define an animation that changes the path property of the layer. The second line states that the animation takes five seconds and the third line gives the final state of the animation. Finally, we add the animation to the layer. The key is a unique identifier for the animation, that is, if you add two animations with the same key only the last one is considered. This key can also be used to override so called implicit animations. There are a couple of properties of a CALayer that are animated by default. More precisely, if you change one of these properties the change will be animated with a duration of 0.25.