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 th

Answer 1

One possibility might be drawing the mask with a CAShapeLayer. The reason is that the path of a CAShapeLayer is animatable.

Answer 2

This works for me for a circular mask animation on a map view, you should be able to replace out the map view with an image view, the mask is an oval around the bounds and animates between being the original size and being inset by 5 points repeatedly:

func setupMapMask() {
    let largeCirclePath = UIBezierPath(ovalInRect: mapView.bounds).CGPath

    let mask = CAShapeLayer()
    mask.path = largeCirclePath
    mask.backgroundColor = UIColor.blackColor().CGColor

    mapView.layer.mask = mask

    let smallCirclePath = UIBezierPath(ovalInRect: CGRectInset(mapView.bounds, 5.0, 5.0)).CGPath

    let anim = CABasicAnimation(keyPath: "path")
    anim.toValue = smallCirclePath
    anim.duration = 0.5
    anim.repeatCount = Float.infinity
    anim.autoreverses = true
    mask.addAnimation(anim, forKey: "path")
}

Answer 3

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