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 倒计时的圆形进度条

1 个答案: