Simple linear animations in Swift

BezierPathLinearAnimation.swift

// Create new playground in Xcode and see the result for yourself
// or see the final result here: https://twitter.com/StudioTvor/status/820629171613433856

import UIKit
import PlaygroundSupport

// This is the bezier path that will be animated, feel free to change it or add another one and scroll down for animation.
let logotypePath = UIBezierPath()
logotypePath.move(to: CGPoint(x: 36.28, y: 53.92))
logotypePath.addCurve(to: CGPoint(x: 21.03, y: 48.14), controlPoint1: CGPoint(x: 32.17, y: 50.07), controlPoint2: CGPoint(x: 26.89, y: 48.14))
logotypePath.addCurve(to: CGPoint(x: 5.28, y: 61.63), controlPoint1: CGPoint(x: 12.99, y: 48.14), controlPoint2: CGPoint(x: 5.28, y: 52.66))
logotypePath.addCurve(to: CGPoint(x: 16.34, y: 74.61), controlPoint1: CGPoint(x: 5.28, y: 69.34), controlPoint2: CGPoint(x: 11.06, y: 72.35))
logotypePath.addCurve(to: CGPoint(x: 24.72, y: 80.98), controlPoint1: CGPoint(x: 20.69, y: 76.54), controlPoint2: CGPoint(x: 24.72, y: 77.88))
logotypePath.addCurve(to: CGPoint(x: 19.1, y: 84.84), controlPoint1: CGPoint(x: 24.72, y: 83.66), controlPoint2: CGPoint(x: 21.53, y: 84.84))
logotypePath.addCurve(to: CGPoint(x: 8.71, y: 79.64), controlPoint1: CGPoint(x: 14.83, y: 84.84), controlPoint2: CGPoint(x: 12.06, y: 82.91))
logotypePath.addLine(to: CGPoint(x: 1.93, y: 86.68))
logotypePath.addCurve(to: CGPoint(x: 19.69, y: 94.22), controlPoint1: CGPoint(x: 6.79, y: 91.54), controlPoint2: CGPoint(x: 12.82, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 36.61, y: 80.06), controlPoint1: CGPoint(x: 28.23, y: 94.22), controlPoint2: CGPoint(x: 36.61, y: 89.78))
logotypePath.addCurve(to: CGPoint(x: 23.71, y: 66.49), controlPoint1: CGPoint(x: 36.61, y: 71.68), controlPoint2: CGPoint(x: 29.41, y: 68.83))
logotypePath.addCurve(to: CGPoint(x: 16.76, y: 60.79), controlPoint1: CGPoint(x: 20.02, y: 64.98), controlPoint2: CGPoint(x: 16.76, y: 63.56))
logotypePath.addCurve(to: CGPoint(x: 21.03, y: 57.44), controlPoint1: CGPoint(x: 16.76, y: 58.7), controlPoint2: CGPoint(x: 18.77, y: 57.44))
logotypePath.addCurve(to: CGPoint(x: 29.74, y: 61.13), controlPoint1: CGPoint(x: 24.38, y: 57.44), controlPoint2: CGPoint(x: 27.48, y: 59.11))
logotypePath.addLine(to: CGPoint(x: 36.28, y: 53.92))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 69.71, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 69.71, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 58.48, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 58.48, y: 39.43))
logotypePath.addLine(to: CGPoint(x: 48.43, y: 39.43))
logotypePath.addLine(to: CGPoint(x: 46.58, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 41.3, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 41.3, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 46.58, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 46.58, y: 77.38))
logotypePath.addCurve(to: CGPoint(x: 47.42, y: 84.75), controlPoint1: CGPoint(x: 46.58, y: 79.98), controlPoint2: CGPoint(x: 46.75, y: 82.57))
logotypePath.addCurve(to: CGPoint(x: 60.49, y: 94.22), controlPoint1: CGPoint(x: 49.01, y: 90.45), controlPoint2: CGPoint(x: 53.62, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 70.96, y: 91.62), controlPoint1: CGPoint(x: 63.93, y: 94.22), controlPoint2: CGPoint(x: 68.11, y: 93.3))
logotypePath.addLine(to: CGPoint(x: 67.28, y: 82.82))
logotypePath.addCurve(to: CGPoint(x: 62.5, y: 84.08), controlPoint1: CGPoint(x: 65.77, y: 83.58), controlPoint2: CGPoint(x: 64.34, y: 84.08))
logotypePath.addCurve(to: CGPoint(x: 58.65, y: 79.89), controlPoint1: CGPoint(x: 59.99, y: 84.08), controlPoint2: CGPoint(x: 58.98, y: 82.49))
logotypePath.addCurve(to: CGPoint(x: 58.48, y: 76.12), controlPoint1: CGPoint(x: 58.48, y: 78.64), controlPoint2: CGPoint(x: 58.48, y: 77.46))
logotypePath.addLine(to: CGPoint(x: 58.48, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 69.71, y: 59.03))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 117.97, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 117.97, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 106.07, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 106.07, y: 78.38))
logotypePath.addCurve(to: CGPoint(x: 96.52, y: 84), controlPoint1: CGPoint(x: 103.89, y: 81.99), controlPoint2: CGPoint(x: 100.04, y: 84))
logotypePath.addCurve(to: CGPoint(x: 90.65, y: 80.9), controlPoint1: CGPoint(x: 93.92, y: 84), controlPoint2: CGPoint(x: 91.74, y: 83.08))
logotypePath.addCurve(to: CGPoint(x: 89.31, y: 71.43), controlPoint1: CGPoint(x: 89.4, y: 78.38), controlPoint2: CGPoint(x: 89.31, y: 74.7))
logotypePath.addLine(to: CGPoint(x: 89.31, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 77.41, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 77.41, y: 72.02))
logotypePath.addCurve(to: CGPoint(x: 81.35, y: 88.44), controlPoint1: CGPoint(x: 77.41, y: 78.3), controlPoint2: CGPoint(x: 77.92, y: 84))
logotypePath.addCurve(to: CGPoint(x: 93.08, y: 94.22), controlPoint1: CGPoint(x: 84.12, y: 91.96), controlPoint2: CGPoint(x: 88.31, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 106.74, y: 87.18), controlPoint1: CGPoint(x: 97.94, y: 94.22), controlPoint2: CGPoint(x: 103.22, y: 92.12))
logotypePath.addLine(to: CGPoint(x: 107.66, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 117.97, y: 93.21))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 171.92, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 171.92, y: 30.38))
logotypePath.addLine(to: CGPoint(x: 160.02, y: 30.38))
logotypePath.addLine(to: CGPoint(x: 160.02, y: 53.42))
logotypePath.addCurve(to: CGPoint(x: 147.21, y: 48.14), controlPoint1: CGPoint(x: 156.67, y: 49.65), controlPoint2: CGPoint(x: 151.39, y: 48.14))
logotypePath.addCurve(to: CGPoint(x: 126.51, y: 71.01), controlPoint1: CGPoint(x: 135.22, y: 48.14), controlPoint2: CGPoint(x: 126.51, y: 58.61))
logotypePath.addCurve(to: CGPoint(x: 147.04, y: 94.22), controlPoint1: CGPoint(x: 126.51, y: 83.83), controlPoint2: CGPoint(x: 135.39, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 160.61, y: 87.77), controlPoint1: CGPoint(x: 151.56, y: 94.22), controlPoint2: CGPoint(x: 157.51, y: 92.63))
logotypePath.addLine(to: CGPoint(x: 161.62, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 171.92, y: 93.21))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 160.02, y: 78.22))
logotypePath.addCurve(to: CGPoint(x: 149.63, y: 84), controlPoint1: CGPoint(x: 157.43, y: 82.57), controlPoint2: CGPoint(x: 153.41, y: 84))
logotypePath.addCurve(to: CGPoint(x: 138.66, y: 71.35), controlPoint1: CGPoint(x: 142.85, y: 84), controlPoint2: CGPoint(x: 138.66, y: 77.8))
logotypePath.addCurve(to: CGPoint(x: 149.8, y: 58.36), controlPoint1: CGPoint(x: 138.66, y: 65.15), controlPoint2: CGPoint(x: 142.18, y: 58.36))
logotypePath.addCurve(to: CGPoint(x: 160.02, y: 63.14), controlPoint1: CGPoint(x: 153.49, y: 58.36), controlPoint2: CGPoint(x: 157.01, y: 59.62))
logotypePath.addLine(to: CGPoint(x: 160.02, y: 78.22))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 195.38, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 195.38, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 183.48, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 183.48, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 195.38, y: 93.21))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 195.38, y: 43.03))
logotypePath.addLine(to: CGPoint(x: 195.38, y: 32.89))
logotypePath.addLine(to: CGPoint(x: 183.48, y: 32.89))
logotypePath.addLine(to: CGPoint(x: 183.48, y: 43.03))
logotypePath.addLine(to: CGPoint(x: 195.38, y: 43.03))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 227.05, y: 48.14))
logotypePath.addCurve(to: CGPoint(x: 203.93, y: 71.18), controlPoint1: CGPoint(x: 213.56, y: 48.14), controlPoint2: CGPoint(x: 203.93, y: 58.19))
logotypePath.addCurve(to: CGPoint(x: 227.05, y: 94.22), controlPoint1: CGPoint(x: 203.93, y: 84.17), controlPoint2: CGPoint(x: 213.56, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 250.09, y: 71.18), controlPoint1: CGPoint(x: 240.45, y: 94.22), controlPoint2: CGPoint(x: 250.09, y: 84.17))
logotypePath.addCurve(to: CGPoint(x: 227.05, y: 48.14), controlPoint1: CGPoint(x: 250.09, y: 58.19), controlPoint2: CGPoint(x: 240.45, y: 48.14))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 237.94, y: 71.18))
logotypePath.addCurve(to: CGPoint(x: 227.05, y: 84), controlPoint1: CGPoint(x: 237.94, y: 78.38), controlPoint2: CGPoint(x: 233.58, y: 84))
logotypePath.addCurve(to: CGPoint(x: 216.07, y: 71.18), controlPoint1: CGPoint(x: 220.51, y: 84), controlPoint2: CGPoint(x: 216.07, y: 78.38))
logotypePath.addCurve(to: CGPoint(x: 227.05, y: 58.36), controlPoint1: CGPoint(x: 216.07, y: 63.97), controlPoint2: CGPoint(x: 220.51, y: 58.36))
logotypePath.addCurve(to: CGPoint(x: 237.94, y: 71.18), controlPoint1: CGPoint(x: 233.58, y: 58.36), controlPoint2: CGPoint(x: 237.94, y: 63.97))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 303.21, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 303.21, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 291.98, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 291.98, y: 39.43))
logotypePath.addLine(to: CGPoint(x: 281.93, y: 39.43))
logotypePath.addLine(to: CGPoint(x: 280.08, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 274.81, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 274.81, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 280.08, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 280.08, y: 77.38))
logotypePath.addCurve(to: CGPoint(x: 280.92, y: 84.75), controlPoint1: CGPoint(x: 280.08, y: 79.98), controlPoint2: CGPoint(x: 280.25, y: 82.57))
logotypePath.addCurve(to: CGPoint(x: 293.99, y: 94.22), controlPoint1: CGPoint(x: 282.51, y: 90.45), controlPoint2: CGPoint(x: 287.12, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 304.46, y: 91.62), controlPoint1: CGPoint(x: 297.43, y: 94.22), controlPoint2: CGPoint(x: 301.62, y: 93.3))
logotypePath.addLine(to: CGPoint(x: 300.78, y: 82.82))
logotypePath.addCurve(to: CGPoint(x: 296, y: 84.08), controlPoint1: CGPoint(x: 299.27, y: 83.58), controlPoint2: CGPoint(x: 297.85, y: 84.08))
logotypePath.addCurve(to: CGPoint(x: 292.15, y: 79.89), controlPoint1: CGPoint(x: 293.49, y: 84.08), controlPoint2: CGPoint(x: 292.48, y: 82.49))
logotypePath.addCurve(to: CGPoint(x: 291.98, y: 76.12), controlPoint1: CGPoint(x: 291.98, y: 78.64), controlPoint2: CGPoint(x: 291.98, y: 77.46))
logotypePath.addLine(to: CGPoint(x: 291.98, y: 59.03))
logotypePath.addLine(to: CGPoint(x: 303.21, y: 59.03))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 338.31, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 329.35, y: 76.29))
logotypePath.addLine(to: CGPoint(x: 329.18, y: 76.29))
logotypePath.addLine(to: CGPoint(x: 320.3, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 307.15, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 323.73, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 333.45, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 351.55, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 338.31, y: 49.14))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 377.35, y: 48.14))
logotypePath.addCurve(to: CGPoint(x: 354.23, y: 71.18), controlPoint1: CGPoint(x: 363.87, y: 48.14), controlPoint2: CGPoint(x: 354.23, y: 58.19))
logotypePath.addCurve(to: CGPoint(x: 377.35, y: 94.22), controlPoint1: CGPoint(x: 354.23, y: 84.17), controlPoint2: CGPoint(x: 363.87, y: 94.22))
logotypePath.addCurve(to: CGPoint(x: 400.39, y: 71.18), controlPoint1: CGPoint(x: 390.76, y: 94.22), controlPoint2: CGPoint(x: 400.39, y: 84.17))
logotypePath.addCurve(to: CGPoint(x: 377.35, y: 48.14), controlPoint1: CGPoint(x: 400.39, y: 58.19), controlPoint2: CGPoint(x: 390.76, y: 48.14))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 388.25, y: 71.18))
logotypePath.addCurve(to: CGPoint(x: 377.35, y: 84), controlPoint1: CGPoint(x: 388.25, y: 78.38), controlPoint2: CGPoint(x: 383.89, y: 84))
logotypePath.addCurve(to: CGPoint(x: 366.38, y: 71.18), controlPoint1: CGPoint(x: 370.82, y: 84), controlPoint2: CGPoint(x: 366.38, y: 78.38))
logotypePath.addCurve(to: CGPoint(x: 377.35, y: 58.36), controlPoint1: CGPoint(x: 366.38, y: 63.97), controlPoint2: CGPoint(x: 370.82, y: 58.36))
logotypePath.addCurve(to: CGPoint(x: 388.25, y: 71.18), controlPoint1: CGPoint(x: 383.89, y: 58.36), controlPoint2: CGPoint(x: 388.25, y: 63.97))
logotypePath.close()
logotypePath.move(to: CGPoint(x: 419.25, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 408.94, y: 49.14))
logotypePath.addLine(to: CGPoint(x: 408.94, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 420.84, y: 93.21))
logotypePath.addLine(to: CGPoint(x: 420.84, y: 63.39))
logotypePath.addCurve(to: CGPoint(x: 429.13, y: 58.53), controlPoint1: CGPoint(x: 422.6, y: 60.46), controlPoint2: CGPoint(x: 425.7, y: 58.53))
logotypePath.addCurve(to: CGPoint(x: 433.32, y: 59.53), controlPoint1: CGPoint(x: 430.64, y: 58.53), controlPoint2: CGPoint(x: 432.06, y: 58.86))
logotypePath.addLine(to: CGPoint(x: 436.17, y: 49.14))
logotypePath.addCurve(to: CGPoint(x: 430.47, y: 48.14), controlPoint1: CGPoint(x: 434.58, y: 48.56), controlPoint2: CGPoint(x: 432.65, y: 48.14))
logotypePath.addCurve(to: CGPoint(x: 420.17, y: 55.01), controlPoint1: CGPoint(x: 426.12, y: 48.14), controlPoint2: CGPoint(x: 422.68, y: 50.9))
logotypePath.addLine(to: CGPoint(x: 419.25, y: 49.14))
logotypePath.close()

// The background color of the sketch.
let backgroundColor = UIColor(red: 240.0 / 255.0, green: 78.0 / 255.0, blue: 47.0 / 255.0, alpha: 1)

// Create a shape layer with the path
let layer = CAShapeLayer()
layer.path = logotypePath.cgPath

// Settting up the layer, this is the place to play.
layer.strokeEnd = 0
layer.lineWidth = 2
layer.strokeColor = UIColor.white.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineCap = kCALineCapRound
layer.lineJoin = kCALineJoinRound

// Move the path bit to the centre
layer.transform = CATransform3DMakeTranslation(25, 10, 0)

// And finally create a vew with the layer
let view = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 150))
view.backgroundColor = backgroundColor
view.layer.addSublayer(layer)

// Assign the view to playground so you can see the animation instantly
PlaygroundPage.current.liveView = view

// And create the animation, don't be afraid and change the values as you please
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.toValue = 1
animation.duration = 6
animation.autoreverses = true
animation.repeatCount = 0
animation.fillMode = kCAFillModeForwards

// And in the end animate the vector layer!
layer.add(animation, forKey: "line")