Mask animation for UIView

Question

I can create a mask as follows:

CALayer *mask = [CALayer layer]; mask.contents = (id)[[UIImage imageNamed:@"mask.png"] CGImage]; mask.frame = CGRectMake(0, 0, 10, 10); self.content.layer.mask = mask; 

And this will correctly display the top left 10 pixels of my content (because mask.png is just a black image). However, I want to animate the mask to show the rest of the content:

  [UIView animateWithDuration:3.0 animations:^{ mask.frame = self.content.bounds; } completion:^(BOOL finished){ }]; 

The problem is that there is no animation. All content is immediately displayed. Why is this happening, and how can I animate the mask so that the content is displayed in the upper left corner?

Answer 1

A frame is a derived property of various other properties, such as position, borders, anchorPoint, and any transformation that it applies to it. It is not recommended to animate this property directly, especially when working with lower-level CoreAnimation levels.

In this case, I assume that you want to animate the borders. You can use the UIView animation method above, but when working with CALayers directly, I prefer to use the CoreAnimation animation methods.

 CGRect oldBounds = mask.bounds; CGRect newBounds = self.content.bounds; CABasicAnimation* revealAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"]; revealAnimation.fromValue = [NSValue valueWithCGRect:oldBounds]; revealAnimation.toValue = [NSValue valueWithCGRect:newBounds]; revealAnimation.duration = 3.0; // Update the bounds so the layer doesn't snap back when the animation completes. mask.bounds = newBounds; [mask addAnimation:revealAnimation forKey:@"revealAnimation"];