Animate circular mask of UIImageView in iOS

Question

I am wondering how to animate the scale of a mask on a uiimageview. Example images attached. The gray boxes are the image background of my uiviewcontroller and is not part of the issue.

I assume creation of a uiview subclass that I pass an image, a radius and a center point. And then (?) create a mask, and then animate it back and forth?

Can anyone point me in the right direction? The circle can be placed anywhere, at any size, but the image to be revealed is always full screen.

Eventually I will add a method to shrink the circle back down. But one step at a time.

Thank you for the direction,

-e

Answer 1

Matt has the right idea.

What you want to do is use Core Animation and a CAShapeLayer. Layers have an optional mask property, which controls the part of the layer that's visible. You can add a CAShapeLayer as the mask of another layer.

If you install a CGPath that's a circle on your shape layer, then use a CABasicAnimation to animate in a different path that is a larger circle, Core Animation will animate the change.

The key thing to animating changes to the path in a shape layer is to make the starting path and ending path have the same number of control points. In your case, you should be able to use CGPathAddEllipseInRect to create both the starting and ending ellipses, with different bounding rectangles.

I have a project on github that includes using path animation to animate a mask on an image view's layer. The project is called "iOS CAAnimation group demo", and you can download it at this link: https://github.com/DuncanMC/iOS-CAAnimation-group-demo. The main part of the project is using Core Animation animation groups to apply a sequence of animations, but it also includes the mask animation.

In that project the mask animation creates a "clock wipe" transition:

...but you should be able to use the basic structure to get the effect you're after. Take a look and let me know if you have trouble getting the effect you're after.

I have a Youtube video that shows the different transitions I've created. The "Iris Circle" transition at about 55 seconds into the video is very close to what you're after:

Transitions video