Travis Kirton

Dash Phase

On a circle, the dash pattern will overlap at the begin/end of the shape’s circumference (i.e. where the stroke start and end meet).


//create the circle and center it
let circle = Circle(center:, radius: 150)
circle.lineWidth = 10.0
circle.fillColor = Color(UIColor.clearColor())

//create a dash pattern
var dashPattern = [Double]()
let circumference = M_PI * circle.width
for i in 1..<Int(circumference) {

circle.lineDashPattern = dashPattern
//add the line to the canvas
//animate it after a short wait
let a = ViewAnimation(duration:180) {
    circle.strokeColor = C4Pink
    //set the final dash phase to the entire width of the pattern
    circle.lineDashPhase = dashPattern.reduce(0, combine: +)

a.autoreverses = true

Check out the way we use reduce to calculate the sum of the entire pattern array.