CABasicAnimation Circular Mask Reveal Scaling Path Animation

Question

I am aiming to reveal a menu with a circular reveal scaling animation. For this I first set the mask to a radius with a radius of 0 at the beginning.

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)    
CAShapeLayer *mask = [CAShapeLayer new];
mask.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:0 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;
self.layer.mask = mask;

Then I animate the new mask with a CABasicAnimation.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.toValue = (id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:self.frame.size.height*1.2 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;
    animation.removedOnCompletion = NO;
    animation.duration = 0.45f;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [self.layer.mask addAnimation:animation forKey:nil];

On the first look this is working but the problem is that the animation itself is more oval than circular: https://i.stack.imgur.com/fqPYJ.png

The code is inspired by Animate circular mask of UIImageView in iOS.

score 0 · Accepted Answer · answered Mar 29 '15 at 12:53

0

Your code looks reasonable. (Although if you're always using a full circle you could probably use the simpler bezierPathWithOvalInRect method instead of bezierPathWithArcCenter).

It's hard to tell what I'm looking at in the image you linked. The two layer are white so we can't tell what is what. You might want to set one of the layers to a colored background while you're testing.

As to why you would get an oval: Do you have a transform on any of your layers? Specifically a scale transform? That would cause your distortion.

answered Mar 29 '15 at 12:53

Duncan C

128,072
22
173
272

Hello! Thanks for you answer! I changed the color and updated the image, it should be clear now. I do not use any transformation... Just the code posted above. – Oskar Mar 29 '15 at 13:23
Fixed it using bezierPathWithOvalInRect method instead of bezierPathWithArcCenter. Thanks!! – Oskar Mar 29 '15 at 13:36

CABasicAnimation Circular Mask Reveal Scaling Path Animation

1 Answers1