How to draw Semi(half) circle and animate it till particular angle in swift 4?

Question

 let slayer = CAShapeLayer()
 let center = CGPoint(x: (bounds.width / 2) + 4, y: bounds.height - 8)
 let radius: CGFloat = bounds.height - 16
 let startAngle: CGFloat = 4 * .pi / 4
 let endAngle: CGFloat = 0.0
 slayer.path = UIBezierPath(arcCenter: center,
                               radius: radius,
                               startAngle: startAngle,
                               endAngle: endAngle,
                               clockwise: true).cgPath
 slayer.lineWidth = 15.0
 slayer.lineCap = kCALineCapRound
 slayer.strokeColor = UIColor.blue.cgColor
 slayer.fillColor = UIColor.clear.cgColor
 self.layer.addSublayer(slayer)

Please look at the following image. The requirement is this circle with animation it till a particular angle.

My first suggestion might be [`CAShapeLayer`](https://www.google.com/search?client=safari&rls=en&q=cashapelayer&ie=UTF-8&oe=UTF-8) — MadProgrammer, Aug 14 '18 at 05:29
Possible duplicate [CAShapeLayer strokeStart and strokeEnd positions](https://stackoverflow.com/questions/33431210/cashapelayer-strokestart-and-strokeend-positions) — MadProgrammer, Aug 14 '18 at 05:31

score 1 · Answer 1 · answered Aug 14 '18 at 06:57

You can animate the circle by adding another layer on top of it and animating it's stroke end property.

  func animate()
    {
      let slayer = CAShapeLayer()
      let center = CGPoint(x: (bounds.width / 2) + 4, y: bounds.height - 8)
      let radius: CGFloat = bounds.height - 16
      let startAngle: CGFloat = 4 * .pi / 4
      let endAngle: CGFloat = 0.0
      slayer.path = UIBezierPath(arcCenter: center,
                               radius: radius,
                               startAngle: startAngle,
                               endAngle: endAngle,
                               clockwise: true).cgPath
      slayer.lineWidth = 15.0
      slayer.lineCap = kCALineCapRound
      slayer.strokeColor = UIColor.blue.cgColor
      slayer.fillColor = UIColor.clear.cgColor
      self.layer.addSublayer(slayer)
      slayer.strokeEnd = 0.0

      let animation = CABasicAnimation(keyPath: "strokeEnd")
      animation.duration = 60.0 .  //Customize the time of your animation here.
      animation.fromValue = 0.0
      animation.toValue = 1.0
      animation.timingFunction = CAMediaTimingFunction(name: 
      kCAMediaTimingFunctionLinear)
      slayer.strokeEnd = 1.0
      slayer.add(animation, forKey: nil)
    }

score 0 · Answer 2 · answered Aug 14 '18 at 05:49

Use 2 CA Shape Layer objects, one for gray(w/o animation) & other blue(with animation).

 func addCircle(color: UIColor) -> CAShapeLayer
    {
        let centre = CGPoint(x: view.bounds.size.width/2, y: view.bounds.size.height/2)
        let beizerPath = UIBezierPath(arcCenter: centre, radius: 30.0, startAngle: .pi, endAngle: 2.0 * .pi, clockwise: true)
        let circleLayer = CAShapeLayer()
        circleLayer.path = beizerPath.cgPath
        circleLayer.fillColor = color.cgColor
        circleLayer.strokeEnd = 1.0

        captureButton.layer.addSublayer(circleLayer)
        return circleLayer
    }

    func animateButton()
    {
        blueLayer = addCircle(color: .blue)
        blueLayer!.strokeEnd = 0.0

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = 60.0
        animation.fromValue = 0.0
        animation.toValue = 1.0
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        blueLayer!.strokeEnd = 1.0
        blueLayer!.add(animation, forKey: nil)
    }

How to draw Semi(half) circle and animate it till particular angle in swift 4?

2 Answers2