How to create an easy line drawing animation for iOS

Having slick animations in your iOS app can make a huge difference in making your app look more aesthetically pleasing and making the entire user experience more enjoyable. Creating an easy line drawing animation is actually simpler than you might think. Here’s a quick and simple guide to how to get started for beginners:

In iOS, We can create line drawing animation with CAShapeLayer’s .strokeStart and .strokeEnd properties.

It is pretty straightforward. First we need to create a path.

{% c-block language="swift" %}
let bezierPath = UIBezierPath()
/* draw code goes here*/
bezierPath.addArcWithCenter( arcCenter,
   radius: 50.0,
   startAngle: 0,
   endAngle: CGFloat( 2 * M_PI ),
   clockwise: true )
/* assign a path to CAShapeLayer */
shapeLayer.path = bezierPath.CGPath
{% c-block-end %}

Then animate .strokeStart or .strokeEnd properties.

{% c-block language="swift" %}
let animation = CABasicAnimation(keyPath: “strokeEnd”)
/* set up animation */
animation.fromValue = 0.0
animation.toValue = 1.0
animation.duration = 2.5
shapeLayer.addAnimation(animation, forKey: “drawLineAnimation”)
{% c-block-end %}

And, we’re done.

Try to experiment with this. When you’re ready, we can move on to creating a progress ring animation with a few lines of code.

Easy right? The only thing that would be difficult is drawing a complex bezier path. So, you might want to take a look at PaintCode, which you can use to draw a bezier path by hand. This app will generate code from your drawing—ready for copy&paste to Xcode.

Pro tip, we can import an existing SVG.

The Xcode project can be found at
‍nRewik/EasyLineDrawingAnimation.