0

Inside the circle progress bar there is a constantly changing number (eg 250, 300, 1000). Whenever I click, the number will decrease and circle progress bar will move. I did it with the time counter. But I want to do it with my control. So when I click the button it will move, if I don't click it won't move. My code :

import UIKit

class ViewController: UIViewController {

    let shapeLAyer = CAShapeLayer()
    
    let progressLayer = CAShapeLayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
       
        
        let center = view.center
        
        let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi/2, endAngle: 2*CGFloat.pi, clockwise: true)
        
        progressLayer.path = circularPath.cgPath
        // ui edits
       
        progressLayer.strokeColor = UIColor.black.cgColor
        
        progressLayer.fillColor = UIColor.clear.cgColor
        
        //progressLayer.fillColor = UIColor.clear.cgColor
        
        progressLayer.lineCap = .round
        
        progressLayer.lineWidth = 20.0
        
        view.layer.addSublayer(progressLayer)
      
        
       
        
        
        shapeLAyer.path = circularPath.cgPath
        
        shapeLAyer.fillColor = UIColor.clear.cgColor
        
        shapeLAyer.strokeColor = UIColor.red.cgColor
        
        shapeLAyer.lineWidth = 10
        
        shapeLAyer.lineCap = .round
        
        shapeLAyer.strokeEnd = 0

        
        view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handle)))
        
        view.layer.addSublayer(shapeLAyer)
    }
    
    @objc func handle(){
        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.toValue = 1
        
        basicAnimation.duration = 3
        
        shapeLAyer.add(basicAnimation, forKey: "urSoBasic")
        
        
    }

}

[![enter image description here][1]][1]

4
  • Your question is not clear and undertable. can you please clear more? May 1, 2021 at 10:06
  • above code: when I click the screen there is a circle progress bar that works. I want to reach the number 300. For this, I press the button as 0 -1-2-3 -... -300, starting from 0 in the circle in the label. I want the circle bar to move every time I press May 1, 2021 at 10:44
  • You mean if the total value is 300 and I pressed the 150 number button then half-circle is filled and when I pressed 100 then progress will be shown according to the number right? May 1, 2021 at 10:47
  • just like that:) but the numbers will increase one by one. May 1, 2021 at 11:03

1 Answer 1

0

You can achieve this type of progress by setting proper from value, to value and with the mode of CABasicAnimation

Here, I take two var one for total number (for total progress) and one for current progress number.

From these two var, I converted this value to between 0-1.

First, in your code UIBezierPath angle is wrong. Replace this line by

let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi/2, endAngle: 3*CGFloat.pi / 2, clockwise: true)
class ViewController: UIViewController {
    
    // Other code
    
    private let totalNumber: CGFloat = 300.0
    private var currentProgressNumber: CGFloat = 0
    private let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    
    // viewDidLoad code
    
    func playAnimation(){
        if currentProgressNumber > totalNumber || currentProgressNumber < 0 {
            return
        }
        basicAnimation.fromValue = basicAnimation.toValue
        basicAnimation.toValue = currentProgressNumber/totalNumber
        basicAnimation.isRemovedOnCompletion = false
        basicAnimation.duration = 3
        basicAnimation.fillMode = CAMediaTimingFillMode.both
        shapeLAyer.add(basicAnimation, forKey: "urSoBasic")
    }
    
    @IBAction func onIncrement(_ sender: UIButton) {
        currentProgressNumber += 15 //<-- Change your increment interval here
        playAnimation()
    }
    
    @IBAction func onDecrement(_ sender: UIButton) {
        currentProgressNumber -= 15 //<-- Change your increment interval here
        playAnimation()
    }
}

Note: Replace your animation function with playAnimation() and also change the increment-decrement value as per your requirement for testing I used 15.

enter image description here

4
  • the only problem is completing without 300. At 255, the flat was full. Thank you for your interest. If we solve this too, this is ok :) May 1, 2021 at 12:17
  • It’s not possible. Can you please attach SS? May 1, 2021 at 12:22
  • because I am not change 'endAngle: 3 * CGFloat.pi / 2' :(. I'm sorry. Raja thank you very much. you are good man. May 1, 2021 at 12:36
  • Yes. This one need to correct in your code May 1, 2021 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.