Swift version: 5.2
iOS makes it easy to draw shapes using
CAShapeLayer, but you also get the ability to adjust how shapes are drawn. By manipulating the
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
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 Are you tired of wasting time debugging your Swift app? Instabug’s SDK is here to help you minimize debugging time by providing you with complete device details, network logs, and reproduction steps with every bug report. All data is attached automatically, and it only takes a line of code to setup. Start your free trial now and get 3 months off exclusively for the Hacking with 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.