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
    }


}