title: CABasicAnimation Circular Mask Reveal Scaling Path Animation
body: <p>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.</p>
  
  <pre><code>#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;
  </code></pre>
  
  <p>Then I animate the new mask with a CABasicAnimation.</p>
  
  <pre><code>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];
  </code></pre>
  
  <p>On the first look this is working but the problem is that the animation itself is more oval than circular: <a href="https://i.stack.imgur.com/fqPYJ.png" rel="nofollow noreferrer">http://i.stack.imgur.com/fqPYJ.png</a></p>
  
  <p>The code is inspired by <a href="https://stackoverflow.com/questions/23965658/animate-circular-mask-of-uiimageview-in-ios">Animate circular mask of UIImageView in iOS</a>. </p>