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

by

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

More Related Contents:

  1. UIView Infinite 360 degree rotation animation?
  2. UIView shake animation
  3. How do I animate constraint changes?
  4. How do I apply a perspective transform to a UIView?
  5. How to change the Push and Pop animations in a navigation based app
  6. Cancel a UIView animation?
  7. How to animate the background color of a UILabel?
  8. Draw segments from a circle or donut
  9. How to animate the textColor property of an UILabel?
  10. How to create a UIView bounce animation?
  11. Are NSLayoutConstraints animatable? [duplicate]
  12. UITableView row animation duration and completion callback
  13. UIStackView Hide View Animation
  14. Core animation progress callback
  15. UIView animateWithDuration doesn’t animate cornerRadius variation
  16. Test whether a UIView is in the middle of animation
  17. Restoring animation where it left off when app resumes from background
  18. Showing pushviewcontroller animation look like presentModalViewController
  19. How to rotate image in Swift?
  20. UIView vertical flip animation
  21. How is the relation between UIView’s clipsToBounds and CALayer’s masksToBounds?
  22. Broken UISearchBar animation embedded in NavigationItem
  23. Sharing an Image between two viewControllers during a transition animation
  24. How to do a native “Pulse effect” animation on a UIButton – iOS
  25. Transition animation not working properly in SwiftUI
  26. Letter by letter animation for UILabel?
  27. How to mimic Keyboard animation on iOS 7 to add “Done” button to numeric keyboard?
  28. When exactly do implicit animations take place in iOS?
  29. Using CABasicAnimation to rotate a UIImageView more than once
  30. iOS animate/morph shape from circle to square

Leave a Comment