title: CABasicAnimation - transform scale keep in center
body: <p>Trying to animatie an ellipse masked on a UIView to be scale transformed remaining in the center position.</p>
  
  <p>I have found <a href="https://stackoverflow.com/questions/11495956/calayer-cabasicanimation-not-scaling-around-center-anchorpoint">CALayer - CABasicAnimation not scaling around center/anchorPoint</a>, and followed by adding a <code>bounds</code> property to the <code>maskLayer</code> <code>CAShapeLayer</code> however, this ends with the mask being positioned in the left corner with only 1/4 of it showing. I would like the mask to remain within the center of the screen.</p>
  
  <pre><code>@synthesize maskedView;
  - (void)viewDidLoad
  {
      [super viewDidLoad];
      UIViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"Next"];
  
      vc.view.frame = CGRectMake(0,0, self.view.frame.size.width, self.view.frame.size.height);
  vc.view.layer.bounds = self.view.layer.bounds;
  
      CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
  
      CGRect maskRect = CGRectMake((self.view.frame.size.width/2)-50, (self.view.frame.size.height/2)-50, 100, 100);
      CGMutablePathRef path = CGPathCreateMutable();
      CGPathAddEllipseInRect(path, nil, maskRect);
      [maskLayer setPath:path];
  
      CGPathRelease(path);
  
      vc.view.layer.mask = maskLayer;
      [self.view addSubview:vc.view];
  
      maskedView = vc.view;
      [self startAnimation];
  }
  </code></pre>
  
  <p>Animation...</p>
  
  <pre><code>-(void)startAnimation
  {
      maskedView.layer.mask.bounds = CGRectMake((self.view.frame.size.width/2)-50, (self.view.frame.size.height/2)-50, 100, 100);
      maskedView.layer.mask.anchorPoint = CGPointMake(.5,.5);
      maskedView.layer.mask.contentsGravity = @"center";
  
      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  
      animation.duration = 1.0f;
      animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
      animation.fromValue = [NSNumber numberWithFloat:1.0f];
      animation.toValue = [NSNumber numberWithFloat:5.0f];
  
      [maskedView.layer.mask addAnimation:animation forKey:@"animateMask"];
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I seem to have fixed this with a second animation on the <code>position</code> key. Is this correct or is there a better way of doing this?</p>
  
  <pre><code>CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"position"];
  
  animation2.duration = 1.0f;
  
  animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  
  animation2.fromValue = [NSValue valueWithCGPoint:CGPointMake((self.view.frame.size.width/2), (self.view.frame.size.height/2))];
  animation2.toValue = [NSValue valueWithCGPoint:CGPointMake((self.view.frame.size.width/2), (self.view.frame.size.height/2))];
  
  [toBeMask.layer.mask addAnimation:animation2 forKey:@"animateMask2"];
  </code></pre>