Animated drawing of UIBezierPath array

Question

I have UIBezierPath array that created from touchesBegan and touchesMoved point. I want animate the draw of them on the screen.

What is the best way to do that without iterate each bezier and call setNeedsDisplay()?

thanks

  override func draw(_ rect: CGRect) {
      for bezier in beziers{
         bezier.stroke()
      }
   }
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
      super.touchesBegan(touches, with: event)
      let cgPoint = touches.first!.location(in: self)
      let bezierPath = ColorBezierPath() // subclass of UIBezierPath
      bezierPath.lineWidth = lineWidth
      bezierPath.color = color
      bezierPath.move(to: cgPoint)
      beziers.append(bezierPath)
   }

   override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
      super.touchesMoved(touches, with: event)
      let cgPoint = touches.first!.location(in: self)
      let bezierPath = beziers.last
      bezierPath?.addLine(to: cgPoint)
      setNeedsDisplay()
   }

Answer 1

Your best bet would be to use CAShapeLayer . It takes a path and various other settings. To animate it, just animate its strokeEnd property from 0.0 to 1.0 . That will create the effect of drawing the path from start to finish given whatever animation timing parameters you want:

let shapeLayer = CAShapeLayer()               // strokeEnd's model value is 1.0 by default
shapeLayer.frame = containerLayer.bounds
shapeLayer.path = bezierPath.cgPath
containerLayer.addSublayer(shapeLayer)

let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
strokeEndAnimation.duration = 2.0
strokeEndAnimation.fromValue = 0.0

shapeLayer.add(strokeEndAnimation, forKey: "strokeEndAnimation")