Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.)

like image 848
Duncan C Avatar asked Mar 14 '14 15:03

Duncan C


1 Answers

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


EDIT Update for Swift 5:

Ok, this thread is REALLY old. I tried to get the sample project to build and gave up fighting with Xcode after about 45 minutes. Too many settings are out of date with current project formats.

The clock wipe demo needed to be rewritten in Swift, so I just started over.

The new project can be found at this link: https://github.com/DuncanMC/ClockWipeSwift

like image 157
Duncan C Avatar answered Nov 14 '22 18:11

Duncan C