Как поменять рисованную анимацию на круг?

Question

Я создал анимацию рисования круга.Когда пользователь нажимает на сенсорную кнопку, анимация достигает 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%)

Answer 1

Вы можете использовать эту функцию для создания обратной анимации, она будет рисовать анимацию от 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")
    }

При удержании или возобновлении логики вы можете играть с этими кодами.