How do you achieve the wipe / radial wipe effect in iOS?

Question

Sometimes you will see the "watch clearing" animation. Something like that:

How would you achieve this effect on iOS?

(Note: this question is a “jingle”. I would like to share the technique of creating an animation to erase the clock, but SO does not have a format for exchanging textbooks, so the closest I can ask is a question and then providing an answer. This is an intentional attempt to share information, which others may find useful.)

Answer 1

Answer:

You would create a CAShapeLayer and set it as a mask at your presentation level.

Then you set the arc to a shape layer that spanned 360 degrees and had a radius that was half the distance from the center to the corner of your image. You would give it a line width that was the same as the radius.

Finally, you must create a CABasicAnimation that animates the strokeEnd property of the form layer from 0 to 1.0. This will cause the form to start blank (the image is completely masked) and animate the mask as a “piece of cake” that gets bigger and bigger until the image is full size.

You can download the sample project on github that I wrote that shows the working code for this animation, among other Core Animation methods:

Demonstration CA Animation on github