How to make a shape draw itself using strokeEnd
Swift version: 5.0
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.
LEARN SWIFTUI FOR FREE I wrote a massive, free SwiftUI tutorial collection, and also have a growing list of free SwiftUI tutorials on YouTube – get started today!
Available from iOS 3.2
Did this solution work for you? Please pass it on!
Other people are reading…
- How to make a UIView glow using shadowColor
- How to change a view’s anchor point without moving it
- How to add a border outline color to a UIView
- How to create a marching ants effect using lineDashPhase
- How to make a UIView fade out
About the Swift Knowledge Base
This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.
