Swift 倒计时的圆形进度条

Question

圆形进度条内有一个不断变化的数字（如250、300、1000）。每当我点击时，数字会减少，圆圈进度条会移动。我用计时器做到了。但我想用我的控制来做。所以当我点击按钮时它会移动，如果我不点击它就不会移动。我的代码：

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")
        
        
    }

}

[![在此处输入图片描述][1]][1]

Answer 1

你可以通过设置适当的from value, to value和CABasicAnimation

的模式来实现这种进度

在这里，我取两个变量，一个是总数（总进度），另一个是当前进度。

从这两个变量，我把这个值转换到0-1之间。

首先，在你的代码中UIBezierPath角度是错误的。将此行替换为

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()
    }
}

注意：将您的动画功能替换为 playAnimation() 并根据您的测试要求更改增减值我使用 15.

Swift 倒计时的圆形进度条

Circle Progress Bar for Swift Count down

progress-bar

swift