Swift version: 5.10
iOS makes it easy to draw shapes using CAShapeLayer
, but you also get the ability to adjust how shapes are drawn. By manipulating the strokeStart
and strokeEnd
properties you can make shapes draw themselves on the screen: you can present a half-drawn star, or a three-quarters drawn circle, for example.
However, as clever as that is what’s really neat is being able to animate the drawing process. To try it out, first create a CAShapeLayer
with a stroke that’s visible, like this one:
let layer = CAShapeLayer()
let bounds = CGRect(x: 50, y: 50, width: 250, height: 250)
layer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 20, height: 20)).cgPath
layer.strokeColor = UIColor.black.cgColor
layer.fillColor = nil
layer.lineDashPattern = [8, 6]
view.layer.addSublayer(layer)
Now create and add a CABasicAnimation
to adjust the strokeEnd
property:
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1
animation.duration = 2
animation.autoreverses = true
animation.repeatCount = .infinity
layer.add(animation, forKey: "line")
I made that animate from 0 (not drawn) to 1 (fully drawn) over two seconds, but also made it reverse at the end and repeat infinite times.
SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Available from iOS 3.2
This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.
Link copied to your pasteboard.