Animate the mask of a mask of a CALayer

Question

Goal: 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. Problem: 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? Explanation of my Code: My code works (only on simulator) using 3 CALayers. - `gradientLayer` holds my gradient. - `shapeMaskLayer` holds my custom shape. - `animationMaskLayer` animates it's path to simulate drawing from left to right `animationMaskLayer --masks--> shapeMaskLayer --masks--> gradientLayer` I then animate the frame of `animationMaskLayer` to animate the whole shape. 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); // An…

Accepted Answer

Animating the mask of a mask? I'm surprised that even works in the simulator.

Have you tried nesting two layers, with the parent layer with `masksToBounds` on? You can then set an independent mask on both layers, and the outer layer will effectively mask your inner layer with its own mask (due to `masksToBounds`). It probably doesn't matter which layer gets which mask (because you want the intersection of both masks).

With the code you listed in your question, you would just need to add one line, and comment out one line to get the correct functionality:

```
self.layer.mask = animationMaskLayer;
//    shapeMaskLayer.mask = animationMaskLayer;
```

Animate the mask of a mask of a CALayer

Solution

Problem