Draw line animated

Question

I want to have a line in the center of the screen and animate it like a snake

This is step by step animation I want to make

How can I do this?

Answer 1

You can animate the end of the stroke of a path on a CAShapeLayer, e.g.,

weak var shapeLayer: CAShapeLayer?  @IBAction func didTapButton(_ sender: Any) {     // remove old shape layer if any      self.shapeLayer?.removeFromSuperlayer()      // create whatever path you want      let path = UIBezierPath()     path.move(to: CGPoint(x: 10, y: 50))     path.addLine(to: CGPoint(x: 200, y: 50))     path.addLine(to: CGPoint(x: 200, y: 240))      // create shape layer for that path      let shapeLayer = CAShapeLayer()     shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor     shapeLayer.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor     shapeLayer.lineWidth = 4     shapeLayer.path = path.cgPath      // animate it      view.layer.addSublayer(shapeLayer)     let animation = CABasicAnimation(keyPath: "strokeEnd")     animation.fromValue = 0     animation.duration = 2     shapeLayer.add(animation, forKey: "MyAnimation")      // save shape layer      self.shapeLayer = shapeLayer } 

That yields:

Clearly, you can change the UIBezierPath to whatever suits your interests. For example, you could have spaces in the path. Or you don't even need to have rectilinear paths:

let path = UIBezierPath() path.move(to: CGPoint(x: 10, y: 130)) path.addCurve(to: CGPoint(x: 210, y: 200), controlPoint1: CGPoint(x: 50, y: -100), controlPoint2: CGPoint(x: 100, y: 350)) 

You can also combine animation of both the start and end of the stroke in a CAAnimationGroup:

// create shape layer for that path (this defines what the path looks like when the animation is done)  let shapeLayer = CAShapeLayer() shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor shapeLayer.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor shapeLayer.lineWidth = 5 shapeLayer.path = path.cgPath shapeLayer.strokeStart = 0.8  let startAnimation = CABasicAnimation(keyPath: "strokeStart") startAnimation.fromValue = 0 startAnimation.toValue = 0.8  let endAnimation = CABasicAnimation(keyPath: "strokeEnd") endAnimation.fromValue = 0.2 endAnimation.toValue = 1.0  let animation = CAAnimationGroup() animation.animations = [startAnimation, endAnimation] animation.duration = 2 shapeLayer.add(animation, forKey: "MyAnimation") 

Yielding:

CoreAnimation gives you a lot of control over how the stroked path is rendered.