2

我有一个 CAShapelayer 圆圈，我将它作为一个进度圆圈动画，CABasicAnimation 从 0 度回到 360 度，同时在状态机中使用具有重置、播放、暂停和完成状态的倒数计时器。

现在，我可以播放或暂停和恢复，直到计时器结束并且动画完成并且模型恢复到其原始值，然后选择另一个倒计时计时器值以开始动画。

但是，如果我播放然后在动画完成之前的任何时间重置，它会取消，但是当我再次播放时，动画不再起作用。我注意到由于某种原因在动画完成之前我重置后，我的 strokeEnd 不再从 0.0 开始，而是得到一个看似任意的小数点值。我认为这是我的问题的根本原因，但我不知道为什么 strokeEnd 值是这些随机数。这是 strokeEnd 值的屏幕截图 - https://imgur.com/a/YXmNkaK

这是我到目前为止所拥有的：

//draws CAShapelayer 
func drawCircle() {}

//CAShapeLayer animation
func progressCircleAnimation(transitionDuration: TimeInterval, speed: Double, strokeEnd: Double) {
    let fillLineAnimation = CABasicAnimation(keyPath: "strokeEnd")
    fillLineAnimation.duration = transitionDuration
    fillLineAnimation.fromValue = 0
    fillLineAnimation.toValue = 1.0
    fillLineAnimation.speed = Float(speed)
    circleWithProgressBorderLayer.strokeEnd = CGFloat(strokeEnd)
    circleWithProgressBorderLayer.add(fillLineAnimation, forKey: "lineFill")
}

//Mark: Pause animation 
func pauseLayer(layer : CALayer) {
    let pausedTime : CFTimeInterval = circleWithProgressBorderLayer.convertTime(CACurrentMediaTime(), from: nil)
    circleWithProgressBorderLayer.speed = 0.0
    circleWithProgressBorderLayer.timeOffset = pausedTime
}

//Mark: Resume CABasic Animation on CAShaperLayer at pause offset
func resumeLayer(layer : CALayer) {
    let pausedTime = circleWithProgressBorderLayer.timeOffset
    circleWithProgressBorderLayer.speed = 1.0;
    circleWithProgressBorderLayer.timeOffset = 0.0;
    circleWithProgressBorderLayer.beginTime = 0.0;
    let timeSincePause = circleWithProgressBorderLayer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
    circleWithProgressBorderLayer.beginTime = timeSincePause;
}

//Mark: Tried to removeAnimation
func resetLayer(layer : CALayer) {
    layer.removeAnimation(forKey: "lineFill")
    circleWithProgressBorderLayer.strokeEnd = 0.0
}

这是我在状态机中设置它的方式，以防错误与此有关：

@objc func timerIsReset() {
    resetTimer()
    let currentRow = timePickerView.selectedRow(inComponent: 0)
    self.counter = self.Times[currentRow].amount
}

//Mark: action for RunningTimerState
@objc func timerIsStarted() {
    runTimer()
}

//Mark: action for PausedTimerState
@objc func timerIsPaused() {

    pauseTimer()
}

//Mark: action for TimerTimeRunOutState
func timerTimeRunOut() {

    resetTimer()
}

func runTimer() {
    if isPaused == true {
        finishTime = Date().addingTimeInterval(-remainingTime)
        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)

        resumeLayer(layer: circleWithProgressBorderLayer)

    } else if isPaused == false {
        finishTime = Date().addingTimeInterval(counter)
        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)

        progressCircleAnimation(transitionDuration: counter, speed: 1.0, strokeEnd: self.completionPercentage)
    }
}

//Mark: Pause Timer and pause CABasic Animation
func pauseTimer() {
    timer.invalidate()
    isPaused = true
    remainingTime = -finishTime.timeIntervalSinceNow
    completionPercentage = (counter + remainingTime) / counter

    pauseLayer(layer: circleWithProgressBorderLayer)
}

func resetTimer() {
    timer.invalidate()
    isPaused = false
    resetLayer(layer: circleWithProgressBorderLayer)
}
4

1 回答 1

0

假设您的动画看起来像这样......

func runTimerMaskAnimation(duration: CFTimeInterval, fromValue : Double){

       ...
             let path = UIBezierPath(roundedRect: circleBounds, cornerRadius: 
             circleBounds.size.width * 0.5)
             maskLayer?.path = path.reversing().cgPath
             maskLayer?.strokeEnd = 0
    
             parentCALayer.mask = maskLayer
    
             let animation = CABasicAnimation(keyPath: "strokeEnd")
             animation.duration = duration
             animation.fromValue = fromValue
             animation.toValue = 0.0
             maskLayer?.add(animation!, forKey: "strokeEnd")
}

如果我想在动画完成之前将计时器重新启动到原始位置，我会删除动画，删除 maskLayer，然后再次运行动画。

 maskLayer?.removeAnimation(forKey: "strokeEnd")
 maskLayer?.removeFromSuperlayer()
 runTimerMaskAnimation(duration: 15, fromValue : 1)
于 2020-10-11T02:05:37.750 回答