Ios 如何为圆反向绘制动画？

我已经创建了画圈动画。 当用户点击触地按钮时，动画变为100%，但当用户移开手指时，动画暂停。 我现在要做的是使这个动画变为0%（开始值），而不是暂停

var shapeLayer = CAShapeLayer()
var cabAnim = CABasicAnimation()
var firstAnimation = true

 override func viewDidLoad() {
    super.viewDidLoad()

    let button = UIButton(frame: CGRect(x: 100, y: 200, width: 100, height: 50))
    button.backgroundColor = .blue
    button.setTitle("123", for: .normal)
    button.addTarget(self, action: #selector(startCircleAnimation), for: .touchDown)
    button.addTarget(self, action: #selector(endCircleAnimation), for: .touchUpInside)
    self.view.addSubview(button)

    let circlePath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: CGFloat(50), startAngle: -CGFloat(Double.pi/2), endAngle: CGFloat(Double.pi * 3/2), clockwise: true)
    shapeLayer.path = circlePath.cgPath
    shapeLayer.position = CGPoint(x: self.view.frame.midX, y: self.view.frame.midY)

    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 3.0
    shapeLayer.strokeEnd = 0.0

    self.view.layer.addSublayer(shapeLayer)
}

 @objc func startCircleAnimation() {
    if (firstAnimation) {
        firstAnimation = false
        circleAnimation()
    } else {
        resumeAnimation(layer: shapeLayer)
    }
}
 @objc func endCircleAnimation() {
   pauseAnimation(layer: shapeLayer)
}

func circleAnimation() {
    cabAnim = CABasicAnimation(keyPath: "strokeEnd")
    cabAnim.duration = 1.5
    cabAnim.repeatCount = 1
    cabAnim.fromValue = 0.0
    cabAnim.toValue = 1.0
    let cam = CAMediaTimingFunctionName.linear
    cabAnim.timingFunction = CAMediaTimingFunction(name: cam)
    shapeLayer.strokeEnd = 1.0
    shapeLayer.add(cabAnim, forKey: "animateCircle")
}


func pauseAnimation(layer: CALayer) {
    let pausedTime: CFTimeInterval = layer.convertTime(CACurrentMediaTime(), from: nil)
    layer.speed = 0.0
    layer.timeOffset = pausedTime
}

func resumeAnimation(layer: CALayer) {
    let resAnimation = CABasicAnimation(keyPath: "strokeEnd")
    let pausedTime: CFTimeInterval = layer.timeOffset
    layer.speed = 1.0
    layer.timeOffset = 0.0
    layer.beginTime = 0.0
    let timeSincePause: CFTimeInterval = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
    layer.beginTime = timeSincePause
}

如何使值变为0而不是暂停

编辑：

---

我希望它从currentValue移动到0（例如，我按住按钮动画变为50%，然后我从按钮上移除手指，动画变为0%）

您可以使用此功能创建反向动画，它将从100到0绘制动画。我已经添加了整个项目，你可以看一看

@IBAction func backward(_ sender: Any) {

        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.fromValue = 1
        basicAnimation.toValue = 0
        basicAnimation.duration = 2
        basicAnimation.fillMode = kCAFillModeBackwards
        basicAnimation.isRemovedOnCompletion = false

        // Callback function
        CATransaction.setCompletionBlock {
           print("end animation")
        }

        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

创建ShapeLayer

in most cases, you can call creating shape layer on `ViewDidLoad`

func createShape() {
        // let's start by drawing a circle somehow
        let center = view.center
        let trackLayer = CAShapeLayer()

        let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
        trackLayer.path = circularPath.cgPath

        trackLayer.strokeColor = UIColor.lightGray.cgColor
        trackLayer.lineWidth = 10
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.lineCap = kCALineCapRound
        view.layer.addSublayer(trackLayer)

        shapeLayer.path = circularPath.cgPath
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.lineWidth = 10
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = kCALineCapRound
        shapeLayer.strokeEnd = 0

        view.layer.addSublayer(shapeLayer)
    }

向前行动

@IBAction func forward(_ sender: Any) {

        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")        
        basicAnimation.toValue = 1
        basicAnimation.duration = 2
        basicAnimation.fillMode = kCAFillModeForwards
        basicAnimation.isRemovedOnCompletion = false
        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

@IBAction func backward(_ sender: Any) {

        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.fromValue = 1
        basicAnimation.toValue = 0
        basicAnimation.duration = 2
        basicAnimation.fillMode = kCAFillModeBackwards
        basicAnimation.isRemovedOnCompletion = false
        // Callback function
        CATransaction.setCompletionBlock {
           print("end animation")
        }
        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

后退动作

@IBAction func forward(_ sender: Any) {

        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")        
        basicAnimation.toValue = 1
        basicAnimation.duration = 2
        basicAnimation.fillMode = kCAFillModeForwards
        basicAnimation.isRemovedOnCompletion = false
        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

@IBAction func backward(_ sender: Any) {

        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.fromValue = 1
        basicAnimation.toValue = 0
        basicAnimation.duration = 2
        basicAnimation.fillMode = kCAFillModeBackwards
        basicAnimation.isRemovedOnCompletion = false
        // Callback function
        CATransaction.setCompletionBlock {
           print("end animation")
        }
        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

---

保持或恢复逻辑，您可以使用这些代码

谢谢，我现在能弄明白了。还有一个问题：如果更多的圆是100%，我应该把代码放在哪里？内部动画功能？@ShadeToD我不明白你的问题。你能说得更详细一点吗？我有一个按钮，用户可以按下它，这个红色的圆圈出现了。如果圆已满（100%），我希望视图移动到下一个视图控制器（因此我希望它执行检查（：））。我需要测量圆是满的。所以我在寻找我应该测量它的地方和方法。也许你知道吗？例如（circle==100%）{performsgue}else{return}@ShadeToD我已经更新了这个问题，你可以在backward操作中检查回调函数。动画结束后将调用该块。这意味着达到100%