Animating lineDashPattern

[travis]

Want to see a shape's lineDashPattern works? Well, check out this little animation I made:

import C4
import UIKit

class ViewController: C4CanvasController {
    override func setup() {
        let c = C4Circle(center: canvas.center, radius: 100)
        c.lineWidth = 2.0
        c.fillColor = clear
        canvas.add(c)

        let a = C4ViewAnimation(duration: 20.0) {
            var pattern = [Double]()
            for i in 0..<100 {
                if i % 2 == 0 {
                    pattern.append(Double(i))
                } else {
                    pattern.append(10)
                }
            }

            var sum = 0.0
            for val in pattern {
                sum += val
            }

            c.lineDashPattern = pattern as [NSNumber]
            c.lineDashPhase = sum
        }

        a.autoreverses = true
        a.repeats = true

        a.animate()
    }
}

[Ollstar]

What does the sum var do?

[travis]

The sum var accumulates the length of the pattern.

For example, on a line with a pattern of [10,10], the pattern will take 20 points to draw itself out (i.e. 10 + 10 or the sum of all the values in the pattern array).

In the example above, we are calculating the pattern where the dash lengths increase with gaps always equal to 10.

So, to animate through the entire pattern we calculate the length / sum of the pattern.

[buza]

Let's make it shorter!

import C4
import UIKit

class ViewController: C4CanvasController {
    override func setup() {
        let c = C4Circle(center: canvas.center, radius: 100)
        c.lineWidth = 2.0
        c.fillColor = clear
        canvas.add(c)

        let a = C4ViewAnimation(duration: 20.0) {
	    let pattern = (0...99).map({$0 % 2 != 0 ? 10 : Double($0)})
            c.lineDashPattern = pattern as [NSNumber]
            c.lineDashPhase = pattern.reduce(0.0,combine:+)
        }

        a.autoreverses = true
        a.repeats = true

        a.animate()
    }
}

[travis]

Nice use of .map()!