Wsrtjtyk

I have the following animation, I need to implement a code, by clicking on a button the animation increased by one until a value that I want to reach it.

I try the following code:

    let strokeIt = CABasicAnimation(keyPath: "strokeEnd")

    let timeLeftShapeLayer = CAShapeLayer()

    let bgShapeLayer = CAShapeLayer()







 override func viewDidLoad() {

        drawBgShape()

        drawTimeLeftShape()

      }





func drawBgShape() {

    bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:

        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath

    bgShapeLayer.strokeColor = UIColor.white.cgColor

    bgShapeLayer.fillColor = UIColor.clear.cgColor

    bgShapeLayer.lineWidth = 15

    view.layer.addSublayer(bgShapeLayer)

}



func drawTimeLeftShape() {

    timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:

        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath

    timeLeftShapeLayer.strokeColor = UIColor.red.cgColor

    timeLeftShapeLayer.fillColor = UIColor.clear.cgColor

    timeLeftShapeLayer.lineWidth = 15

    view.layer.addSublayer(timeLeftShapeLayer)

}

and when click a button :

     var x = 0.0

    @IBAction func click(_ sender: Any) {



        strokeIt.fromValue = x

        strokeIt.toValue = x + 0.1



        strokeIt.duration = 0.25

        timeLeftShapeLayer.add(strokeIt, forKey: nil)

        x = x + 0.1

}

How can I achieve that?

You don't need to use an explicit animation to achieve this.

For some properties of CALayer, Core Animation will add an implicit animation for you. The strokeEnd property is one of these.

This means that Core Animation will automatically animate any changes to a layer's strokeEnd property. You don't need to create an animation object and add it yourself.

There are a few things you'll need to amend with your implementation to get it working.

1) The background circle, to look like the image you've posted, should have a grey strokeColor within your drawBgShape function:

bgShapeLayer.strokeColor = UIColor.lightGray.cgColor

2) The strokeEnd for timeLeftShapeLayer should be set to 0.0 as its starting value within your drawTimeLeftShape function.

 timeLeftShapeLayer.strokeEnd = 0.0

3) Remove the strokeIt animation property from your class, you don't need it.

4) Update your click function to slowly increment the strokeEnd property of timeLeftShapeLayer directly. This is one simple line of code:

timeLeftShapeLayer.strokeEnd += 0.1

Here's an example implementation:

class ViewController: UIViewController {



    let timeLeftShapeLayer = CAShapeLayer()

    let bgShapeLayer = CAShapeLayer()



    override func viewDidLoad() {

        super.viewDidLoad()

        drawBgShape()

        drawTimeLeftShape()

    }



    func drawBgShape() {

        bgShapeLayer.path = UIBezierPath(

            arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY),

            radius: 100,

            startAngle: -90.degreesToRadians,

            endAngle: 270.degreesToRadians,

            clockwise: true

        ).cgPath

        bgShapeLayer.strokeColor = UIColor.lightGray.cgColor

        bgShapeLayer.fillColor = UIColor.clear.cgColor

        bgShapeLayer.lineWidth = 15

        view.layer.addSublayer(bgShapeLayer)

    }



    func drawTimeLeftShape() {

        timeLeftShapeLayer.path = UIBezierPath(

            arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY),

            radius: 100,

            startAngle: -90.degreesToRadians,

            endAngle: 270.degreesToRadians,

            clockwise: true

        ).cgPath

        timeLeftShapeLayer.strokeColor = UIColor.red.cgColor

        timeLeftShapeLayer.fillColor = UIColor.clear.cgColor

        timeLeftShapeLayer.lineWidth = 15

        timeLeftShapeLayer.strokeEnd = 0.0

        view.layer.addSublayer(timeLeftShapeLayer)

    }



    @IBAction func click(_ sender: Any) {

        timeLeftShapeLayer.strokeEnd += 0.1

    }





}