How do you achieve a “clock wipe”/ radial wipe effect in iOS?

Sometimes you’ll see a “clock wipe” animation in use. Something like this:

enter image description here

  • Using a loop for adding attributes to multiple UIImageViews
  • Moving UIView from bottom to top
  • UIButton can't be touched while animated with UIView animateWithDuration
  • How can I flip an iOS UITableViewCell?
  • If statement on NSNotificationCenter in iOS
  • CALayerInvalidGeometry', reason: 'CALayer bounds contains NaN: crash in view
  • 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.)

    Solutions Collect From Internet About “How do you achieve a “clock wipe”/ radial wipe effect in iOS?”


    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