Easy Line Drawing Animation
2 min readJan 1, 2016
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.
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
Then animate .strokeStart or .strokeEnd properties.
let animation = CABasicAnimation(keyPath: “strokeEnd”)/* set up animation */
animation.fromValue = 0.0
animation.toValue = 1.0
animation.duration = 2.5shapeLayer.addAnimation(animation, forKey: “drawLineAnimation”)
And, we’re done.
Try experiment, we can make another nice 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 take a look at PaintCode, which you can draw 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.
