iOS：通过单击按钮增加动画

Question

我有以下动画，我需要实现一个代码，通过点击一个按钮动画增加一，直到我想要达到它的值。

我尝试以下代码：

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

当点击按钮时：

     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
}

我怎样才能做到这一点？

Answer 1

您不需要使用显式动画来实现这一点。

对于CALayer 的某些属性，Core Animation 会为你添加一个隐式动画。 strokeEnd 属性就是其中之一。

这意味着 Core Animation 将自动为层的strokeEnd 属性的任何更改设置动画。您无需创建动画对象并自行添加。

您需要对实现进行一些修改才能使其正常工作。

1) 为了看起来像您发布的图片，背景圆圈应该在您的drawBgShape 函数中包含一个灰色的strokeColor：

bgShapeLayer.strokeColor = UIColor.lightGray.cgColor

2) timeLeftShapeLayer 的 strokeEnd 应设置为 0.0 作为其在 drawTimeLeftShape 函数中的起始值。

 timeLeftShapeLayer.strokeEnd = 0.0

3) 从你的类中移除 strokeIt 动画属性，你不需要它。

4) 更新您的 click 函数以直接缓慢增加 timeLeftShapeLayer 的 strokeEnd 属性。这是一行简单的代码：

timeLeftShapeLayer.strokeEnd += 0.1

这是一个示例实现：

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
    }


}