"Masking" an animation? iPhone SDK

Question

I have been looking into ways of masking images on the iPhone. I came across this solution

http://iphonedevelopertips.com/cocoa/how-to-mask-an-image.html

which works great for still images. What I want to do is mask an animation in a UIImageView. From what I have read I don't think this is possible whilst also achieving a decent frame rate.

This leads me to ask whether the following is possible, could I "clip" the images inside the UIImageView? ie not re-size the UIImageView to the size of the images so some parts are chopped off?

Answer 1

I haven't tried this for performance, but you can use a Core Animation layer as a mask. You can define a path to use in a CAShapeLayer and fill the shape. Then specify the layer mask of your UIImageView's layer. Something like:

CGMutablePathRef path = CGPathCreateMutable();
// build the path by adding points
// ...

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];
// Set shape layer bounds and position
// ...

// Set the mask for the image view's layer
[[imageView layer] setMask:shapeLayer];

Keep in mind that this isn't actually creating a new image as the link you reference does. This just creates a mask for display over top of your image view--which may not be what you want.

Answer 2

I searched high and low and finally found a solution with practically no limitations at all. So, here you go:

UIImageView *maskeeImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MaskeeImage.png"]];

[maskeeImage setAnimationRepeatCount:-1];
[maskeeImage setAnimationImages:[[NSArray alloc] initWithObjects:[UIImage imageNamed:@"MaskeeImage1.png"], [UIImage imageNamed:@"MaskeeImage2.png"], [UIImage imageNamed:@"MaskeeImage3.png"], nil]];
[maskeeImage startAnimating];

CALayer *maskeeLayer = [maskeeImage layer];
maskeeLayer = CGRectMake(0, 0, 768, 1004);
[[[self view] layer] addSublayer:maskeeLayer];

UIImage *maskImage = [UIImage imageNamed:@"ImageMask.png"];
CALayer *maskLayer = [CALayer layer];
maskLayer.contents = (id) myImageMask.CGImage;
maskLayer.frame = CGRectMake(0, 0, 768, 1004);
[maskeeLayer setMask:maskLayer];

There you go! It's actually really easy, once you know how. I tried to show a few different options; Using UIImageViews or UIImages, Animations (Which can also be used for the mask).

To sum it all up, you basically have to set the mask property on your view's CALayer. Every UIView subclass has a CALayer attached to it, so you aren't restricted at all in terms of where you get your mask or maskee from.

Hope this helped. Cheers, Dylan.