title: Animate the mask of a mask of a CALayer
body: <p><strong>Goal:</strong><br>
  I am drawing a custom shape that has a gradient.  I also want to animate the drawing of this shape by having it draw in from left to right.  </p>
  
  <p><strong>Problem:</strong><br>
  The code below works on an iPad simulator, but it doesn't work on my iPad 4 running iOS 7.  Does anyone know how to make this work on the device?  Is there a different way to achieve this same result?</p>
  
  <p><strong>Explanation of my Code:</strong><br>
  My code works (only on simulator) using 3 CALayers.  </p>
  
  <ul>
  <li><code>gradientLayer</code> holds my gradient.  </li>
  <li><code>shapeMaskLayer</code> holds my custom shape.</li>
  <li><code>animationMaskLayer</code> animates it's path to simulate drawing from left to right</li>
  </ul>
  
  <p><code>animationMaskLayer --masks--&gt; shapeMaskLayer --masks--&gt; gradientLayer</code>  </p>
  
  <p>I then animate the frame of <code>animationMaskLayer</code> to animate the whole shape.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>// Animation Mask Rects
  CGPathRef leftStartingRectPath = CGPathCreateWithRect(CGRectMake(0, 0, 0, self.frame.size.height), 0);
  CGPathRef fullViewRectPath = CGPathCreateWithRect(CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), 0);
  
  // Animation Mask Layer
  CAShapeLayer *animationMaskLayer = [CAShapeLayer layer];
  animationMaskLayer.path = fullViewRectPath;
  animationMaskLayer.fillColor = UIColor.blackColor.CGColor;
  
  // Shape Mask Layer
  CAShapeLayer *shapeMaskLayer = [CAShapeLayer layer];
  shapeMaskLayer.path = CGPathCreateWithEllipseInRect(self.bounds, 0);
  shapeMaskLayer.fillColor = [UIColor blueColor].CGColor;
  shapeMaskLayer.mask = animationMaskLayer;
  
  // Gradient Layer
  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  gradientLayer.frame = self.bounds;
  gradientLayer.colors = self.colors;
  gradientLayer.mask = shapeMaskLayer;
  mountainLayer.anchorPoint = pt(0, 0);
  mountainLayer.position = pt(0, 0);
  [self.layer addSublayer:gradientLayer];
  
  // Left To Right Animation
  CABasicAnimation *leftToRightAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
  leftToRightAnimation.duration = 0.5;
  leftToRightAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  leftToRightAnimation.fromValue = (__bridge id)leftStartingRectPath;
  leftToRightAnimation.toValue = (__bridge id)fullViewRectPath;
  leftToRightAnimation.fillMode = kCAFillModeForwards;
  leftToRightAnimation.removedOnCompletion = NO;
  [animationMaskLayer addAnimation:leftToRightAnimation forKey:@"animatePath"];
  
  // Memory Management
  CGPathRelease(leftStartingRectPath);
  CGPathRelease(fullViewRectPath);
  </code></pre>