How to animate path using CoreAnimation

I wrote a Behind the scene of delightful animation it is about Animation patterns in modern iOS Apps. In this post, I’ll introduce how to animate path using CoreAnimation.

Before we start coding, we need to prepare the vector image like an SVG and then convert it to UIBeizierpath.

SVG Image

SVG acronym is Scalable Vector Graphics developed by W3C. Unfortunately, iOS does not support the SVG format. So We need to convert it to UIBeizierpath.

#block-yui_3_17_2_1_1589705258661_10561 .sqs-gallery-block-grid .sqs-gallery-design-grid { margin-right: -0px; }
#block-yui_3_17_2_1_1589705258661_10561 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper { margin-right: 0px; margin-bottom: 0px; }

Look at path tag. Each character has the meaning of a drawing command. Uppercase uses absolute position, and lowercase uses relative position.

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

We can convert it to UIBeizierPath.

move(to: CGPoint)
addCurve(to: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)
addQuadCurve(to: CGPoint, controlPoint: CGPoint)
addLine(to: CGPoint)
addArc(withCenter: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockWise: Bool)

How to convert SVG to UIBeizierPath?

Here is an example of Swift Logo.

Let’s convert it to UIBeizierPath step by step.

<path d="m29.885 33.047c-4.667 2.696-11.084 2.973-17.54 0.206-5.2273-2.224-9.5646-6.117-12.345-10.565 1.3346 1.112 2.8916 2.002 4.5598 2.78 6.6672 3.125 13.333 2.911 18.024 0.008-0.003-0.003-0.005-0.005-0.007-0.008-6.673-5.116-12.345-11.789-16.571-17.238-0.8901-0.8898-1.5574-2.002-2.2247-3.0029 5.1159 4.671 13.235 10.565 16.126 12.234-6.116-6.451-11.566-14.458-11.344-14.236 9.676 9.787 18.685 15.348 18.685 15.348 0.298 0.168 0.528 0.308 0.713 0.433 0.195-0.496 0.366-1.011 0.51-1.545 1.557-5.672-0.222-12.123-4.115-17.461 9.008 5.4495 14.347 15.681 12.122 24.245-0.058 0.231-0.121 0.459-0.189 0.683 0.026 0.031 0.052 0.063 0.078 0.096 4.448 5.561 3.225 11.455 2.669 10.343-2.413-4.722-6.88-3.278-9.151-2.32z"/>

//First drawing command
//m29.885 33.047
move(to: CGPoint(x: 29.885, y: 33.05)

The m command is easy. Just move the point using move(to: CGPoint).

Second point is 12.34, 33.25. It is calculated by startPoint x: 29.885 - 17.54 = 12.35 and startPoint: y: 33.05 + 0.206 = 33.25. — Second point is 12.34, 33.25. It is calculated by **startPoint x: 29.885** – 17.54 **= 12.35** and **startPoint: y: 33.05** + 0.206 **= 33.25**.

//Second drawing command
//c-4.667 2.696-11.084 2.973-17.54 0.206
addCurve(
to: CGPoint(x: 12.35, y: 33.25), 
controlPoint1: CGPoint(x: 25.22, y: 35.74), 
controlPoint2: CGPoint(x: 18.8, y: 36.02)
)

Look at the c character. The c is meaning that curveTo is a relative position. It takes 3 points, which are controlPoint1, controlPoint2, and currentPoint. I was very confused that how can it be converted from (-4.667, 2.696), (-11.084, 2.973), and (-17.54, 0.206) to (12.35, 33.25), (25.22, 35.74), and (18.8, 36.02).

Let’s look again. We take 3 points, which are controlPoint1, controlPoint2, and current Position.

The startPosition is CGPoint(x: 29.885, y: 33.05). And It was added curveTo relative to startPosition.

CurrentPosition(x: 12.35, y: 33.25) is calculated by 29.885 – 17.54 = 12.35 and 33.05 + 0.206 = 33.25
ControlPoint1(x: 25.22, y: 35.74) is calculated by 29.885 – 4.667 = 25.22 and 33.05 + 2.697 = 35.74
ControlPoint2(x: 18.8, y: 36.02) is calculated by 29.885 – 11.084 = 18.8 and 33.05 + 2.973 = 36.02

And next position is also same. Just take a 3 position and calculate it relative to currentPosition(x: 12.35, y: 33.25) which is updated after add curveTo position. Here is the full path of Swift Logo.

extension UIBezierPath {
static var swift: UIBezierPath = {
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 29.88, y: 33.05))
    bezierPath.addCurve(to: CGPoint(x: 12.35, y: 33.25), controlPoint1: CGPoint(x: 25.22, y: 35.74), controlPoint2: CGPoint(x: 18.8, y: 36.02))
    bezierPath.addCurve(to: CGPoint(x: 0, y: 22.69), controlPoint1: CGPoint(x: 7.12, y: 31.03), controlPoint2: CGPoint(x: 2.78, y: 27.14))
    bezierPath.addCurve(to: CGPoint(x: 4.56, y: 25.47), controlPoint1: CGPoint(x: 1.33, y: 23.8), controlPoint2: CGPoint(x: 2.89, y: 24.69))
    bezierPath.addCurve(to: CGPoint(x: 22.58, y: 25.48), controlPoint1: CGPoint(x: 11.23, y: 28.59), controlPoint2: CGPoint(x: 17.89, y: 28.38))
    bezierPath.addCurve(to: CGPoint(x: 22.58, y: 25.47), controlPoint1: CGPoint(x: 22.58, y: 25.47), controlPoint2: CGPoint(x: 22.58, y: 25.47))
    bezierPath.addCurve(to: CGPoint(x: 6.01, y: 8.23), controlPoint1: CGPoint(x: 15.9, y: 20.35), controlPoint2: CGPoint(x: 10.23, y: 13.68))
    bezierPath.addCurve(to: CGPoint(x: 3.78, y: 5.23), controlPoint1: CGPoint(x: 5.12, y: 7.34), controlPoint2: CGPoint(x: 4.45, y: 6.23))
    bezierPath.addCurve(to: CGPoint(x: 19.91, y: 17.46), controlPoint1: CGPoint(x: 8.9, y: 9.9), controlPoint2: CGPoint(x: 17.02, y: 15.79))
    bezierPath.addCurve(to: CGPoint(x: 8.56, y: 3.23), controlPoint1: CGPoint(x: 13.79, y: 11.01), controlPoint2: CGPoint(x: 8.34, y: 3))
    bezierPath.addCurve(to: CGPoint(x: 27.25, y: 18.57), controlPoint1: CGPoint(x: 18.24, y: 13.01), controlPoint2: CGPoint(x: 27.25, y: 18.57))
    bezierPath.addCurve(to: CGPoint(x: 27.96, y: 19.01), controlPoint1: CGPoint(x: 27.55, y: 18.74), controlPoint2: CGPoint(x: 27.78, y: 18.88))
    bezierPath.addCurve(to: CGPoint(x: 28.47, y: 17.46), controlPoint1: CGPoint(x: 28.16, y: 18.51), controlPoint2: CGPoint(x: 28.33, y: 18))
    bezierPath.addCurve(to: CGPoint(x: 24.36, y: 0), controlPoint1: CGPoint(x: 30.03, y: 11.79), controlPoint2: CGPoint(x: 28.25, y: 5.34))
    bezierPath.addCurve(to: CGPoint(x: 36.48, y: 24.25), controlPoint1: CGPoint(x: 33.36, y: 5.45), controlPoint2: CGPoint(x: 38.7, y: 15.68))
    bezierPath.addCurve(to: CGPoint(x: 36.29, y: 24.93), controlPoint1: CGPoint(x: 36.42, y: 24.48), controlPoint2: CGPoint(x: 36.36, y: 24.7))
    bezierPath.addCurve(to: CGPoint(x: 36.37, y: 25.02), controlPoint1: CGPoint(x: 36.32, y: 24.96), controlPoint2: CGPoint(x: 36.34, y: 24.99))
    bezierPath.addCurve(to: CGPoint(x: 39.04, y: 35.37), controlPoint1: CGPoint(x: 40.82, y: 30.59), controlPoint2: CGPoint(x: 39.59, y: 36.48))
    bezierPath.addCurve(to: CGPoint(x: 29.88, y: 33.05), controlPoint1: CGPoint(x: 36.62, y: 30.65), controlPoint2: CGPoint(x: 32.16, y: 32.09))
    bezierPath.close()
    return bezierPath
}()
}

Let’s animating it.

Path Animation

class ViewController: UIViewController {
    var swiftPath: UIBezierPath = .swift
    lazy var logoLayer: CAShapeLayer = {
       let logoLayer = CAShapeLayer()
        logoLayer.path = swiftPath.cgPath
        logoLayer.strokeEnd = 0
        logoLayer.strokeStart = 0
        logoLayer.lineWidth = 2

        logoLayer.borderColor = UIColor.black.cgColor
        logoLayer.strokeColor = UIColor.black.cgColor
        logoLayer.fillColor = UIColor.white.cgColor

        logoLayer.position = CGPoint(x: 161, y: 247)
        return logoLayer
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.layer.addSublayer(logoLayer)
        startPathAnimation()
    }

    func startPathAnimation() {
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.fromValue = 0
        pathAnimation.toValue = 1
        pathAnimation.duration = 2
        pathAnimation.isRemovedOnCompletion = false
        pathAnimation.fillMode = .forwards
        logoLayer.add(pathAnimation, forKey: "line")
    }
}

Fill Color Animation

func startFillColorAnimation() {
  let fillColorAnimation: CABasicAnimation = CABasicAnimation(
  keyPath: "fillColor"
  )
  fillColorAnimation.duration = 1
  //Start Fill Color Animation after finishing path animation.
  fillColorAnimation.beginTime = CACurrentMediaTime() + 2
  fillColorAnimation.fromValue = UIColor.clear.cgColor
  fillColorAnimation.toValue = UIColor.red.cgColor
  fillColorAnimation.fillMode = .forwards
  //Keep color after complete animation
  fillColorAnimation.isRemovedOnCompletion = false
  logoLayer.add(fillColorAnimation, forKey: "fill")
 }

Fill Gradient Color Animation

Unlike SVG, CAShapeLayer doen’t support gradient color. So We should use CAGradientLayer to fill the gradient color in Swift logo. I’ll show you how to change the gradient color from original orange gradient color of Swift logo to blue gradient color of SwiftUI logo.

let swiftUIColor: [CGColor] = [
  UIColor(red: 0/255, green: 240/255, blue: 245/255, alpha: 1).cgColor,
  UIColor(red: 0/255, green: 5/255, blue: 140/255, alpha: 1).cgColor
]

let swiftColor: [CGColor] = [
UIColor(red: 248/255, green: 138/255, blue: 54/255, alpha: 1).cgColor,
UIColor(red: 253/255, green: 32/255, blue: 32/255, alpha: 1).cgColor
]
override func viewDidLoad() {
    super.viewDidLoad()
    view.layer.addSublayer(logoLayer)

    startPathAnimation()
    startFillColorAnimation()
    fillGradientColor(colors: swiftColor)
}

func fillGradientColor(colors: [CGColor]) {
  let gradient = CAGradientLayer(layer: logoLayer)
  gradient.frame = swiftPath.bounds
  gradient.colors = colors
  logoLayer.addSublayer(gradient)
}

🤪 CAGradientLayer cover the CAShapeLayer.

To fix CAGradientLayer cover the Swift logo, We need to clip mask before addSublayer.

func fillGradientColor(colors: [CGColor]) {
  let gradient = CAGradientLayer(layer: logoLayer)
  gradient.frame = swiftPath.bounds
  gradient.colors = colors
  //Shape Mask!
  let shapeMask = CAShapeLayer()
  shapeMask.path = swiftPath.cgPath
  gradient.mask = shapeMask
  logoLayer.addSublayer(gradient)
}

Ok. Almost done! Let’s fill gradient color.

override func viewDidLoad() {
  super.viewDidLoad()
  view.layer.addSublayer(logoLayer)

  startPathAnimation()
  startFillColorAnimation()
  fillGradientColor(colors: [UIColor.clear.cgColor, UIColor.clear.cgColor])
}

func startPathAnimation() {
  let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
  pathAnimation.fromValue = 0
  pathAnimation.toValue = 1
  pathAnimation.duration = 2
  pathAnimation.isRemovedOnCompletion = false
  pathAnimation.fillMode = .forwards
  logoLayer.add(pathAnimation, forKey: "line")
}

func startFillColorAnimation() {
  let fillColorAnimation: CABasicAnimation = CABasicAnimation(keyPath: "fillColor")
  fillColorAnimation.duration = 1
  fillColorAnimation.beginTime = CACurrentMediaTime() + 2
  fillColorAnimation.fromValue = UIColor.clear.cgColor
  fillColorAnimation.toValue = UIColor.red.cgColor
  fillColorAnimation.fillMode = .forwards
  fillColorAnimation.isRemovedOnCompletion = false
  logoLayer.add(fillColorAnimation, forKey: "fill")
}

func fillGradientColor(colors: [CGColor]) {
  let gradient = CAGradientLayer(layer: logoLayer)
  gradient.frame = swiftPath.bounds
  gradient.colors = colors
  //Shape Mask!
  let shapeMask = CAShapeLayer()
  shapeMask.path = swiftPath.cgPath
  gradient.mask = shapeMask
  logoLayer.addSublayer(gradient)

  //Start Animation
  startGradientAnimation(gradientLayer: gradient)
}

func startGradientAnimation(gradientLayer: CAGradientLayer) {
  let colorAnimation : CABasicAnimation = CABasicAnimation(keyPath: "colors")
  colorAnimation.duration = 2
  colorAnimation.beginTime = CACurrentMediaTime() + 3
  colorAnimation.fromValue = swiftColor
  colorAnimation.toValue = swiftUIColor
  colorAnimation.isRemovedOnCompletion = false
  colorAnimation.fillMode = .forwards
  gradientLayer.add(colorAnimation, forKey: "colors")
}

Thank you for reading my article. If you find any awkward expressions, I would appreciate your advice.

I want to say that Thank you for review this post!

Divjjot Singh helps me to improve my English writing skills. Thank you!

Shawn