How do you achieve a “clock wipe”/ radial wipe eff

问题:

Sometimes you'll see a "clock wipe" animation in use. Something like this:

How would you achieve that effect in iOS?

(Note: This question is a "ringer." I wanted to share a technique for creating a clock wipe animation, but SO does not have a format for sharing tutorials, so the closest I can come is asking a question and then providing the answer. This is deliberate, and an attempt to share information that others might find useful.)

回答1:

Answer:

You'd create CAShapeLayer and install it as a mask on your view's layer.

You'd then install an arc into the shape layer that spanned a full 360 degrees, and had a radius that was half the center-to-corner distance of your image. You'd give it a line width that was the same as the radius.

Finally, you'd create a CABasicAnimation that animates the strokeEnd property of the shape layer from 0 to 1.0. This would cause the shape to start out empty (image fully masked) and animate the mask as a "pie slice" that got bigger and bigger, until it was the full size of the image.

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

CA Animation demo on github