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会添加一个implicit动画for你。 strokeEnd 属性就是其中之一。

这意味着 Core Animation 将自动对层的 strokeEnd 属性的任何更改进行动画处理。不需要创建动画对象，自己添加。

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

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

bgShapeLayer.strokeColor = UIColor.lightGray.cgColor

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

 timeLeftShapeLayer.strokeEnd = 0.0

3) 从你的 class 中删除 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
    }


}

iOS:点击按钮增加动画

iOS: Increase animation by click a button

animation

cabasicanimation

ios

swift4