当计时器达到5秒swift ios时用不同的颜色填充CALayer

Question

在我的应用程序中，我正在使用第三方库，它可以像在 appstore 应用程序下载动画中一样执行循环动画。 我正在使用我放置在我的项目中的外部文件。 它可以工作，但是当计时器达到 5 秒时，填充颜色应该是红色。 目前全层红色适用，我只想应用它已经取得进展的部分。 我附上视频和第三方文件。 请任何人都可以帮我解决这个问题，我应该对库文件进行哪些更改，或者有更好的解决方案

相同的视频链接，以防谷歌驱动器链接不起作用

我正在使用的外部库链接

视频链接

外部第三文件文件

我尝试过的代码片段：

func startGamePlayTimer(color: UIColor)
    {
        if !isCardLiftedUp {
            self.circleTimerView.isHidden = false
            self.circleTimerView.timerFillColor = color
            Constants.totalGamePlayTime = 30
            self.circleTimerView.startTimer(duration: CFTimeInterval(Constants.totalGamePlayTime))
        }
       
        if self.gamePlayTimer == nil
        {
            self.gamePlayTimer?.invalidate()
         
            let timer = Timer.scheduledTimer(timeInterval: 1.0,
                                                   target: self,
                                                   selector: #selector(updateGamePlayTime),
                                                   userInfo: nil,
                                                   repeats: true)
            timer.tolerance = 0.05
            RunLoop.current.add(timer, forMode: .common)
            self.gamePlayTimer = timer
        }
    }
    
    @objc func updateGamePlayTime()
    {
        if Constants.totalGamePlayTime > 0
        {
            Constants.totalGamePlayTime -= 1
            
            if Constants.totalGamePlayTime < 5
            {
                SoundService.playSound(sound: .turn_timeout)
                self.circleTimerView.timerFillColor = UIColor.red.withAlphaComponent(0.7)
            }
        }
        else
        {
            self.stopGamePlayTimer()
        }
    }

其中 circleTimerView 是随着时间的推移而动画的视图

Answer 1

您可以使用CAKeyframeAnimation上的StrokePath来实现。

我已经更新了CircleTimer视图中的代码，如下所示。 您可以根据需要修改填充颜色和时间。

 @objc func updateGamePlayTime()
    {
        if Constants.totalGamePlayTime > 0
        {
            Constants.totalGamePlayTime -= 1
            
            if Constants.totalGamePlayTime < 5
            {
                SoundService.playSound(sound: .turn_timeout)
                // self.circleTimerView.timerFillColor = UIColor.red.withAlphaComponent(0.7) // <- Comment this line 
            }
        }
        else
        {
            self.stopGamePlayTimer()
        }
    }

---

open func drawFilled(duration: CFTimeInterval = 5.0) {
    clear()
    if filledLayer == nil {
        let parentLayer = self.layer
        let circleLayer = CAShapeLayer()
        circleLayer.bounds = parentLayer.bounds
        circleLayer.position = CGPoint(x: parentLayer.bounds.midX, y: parentLayer.bounds.midY)
        let circleRadius = timerFillDiameter * 0.5
        let circleBounds = CGRect(x: parentLayer.bounds.midX - circleRadius, y: parentLayer.bounds.midY - circleRadius, width: timerFillDiameter, height: timerFillDiameter)
        circleLayer.fillColor = timerFillColor.cgColor
        circleLayer.path = UIBezierPath(ovalIn: circleBounds).cgPath
        
        // CAKeyframeAnimation: Changing Fill Color on when timer reaches 80% of total time

        let strokeAnimation = CAKeyframeAnimation(keyPath: "fillColor")
        strokeAnimation.keyTimes = [0, 0.25, 0.75, 0.80]
        strokeAnimation.values = [timerFillColor.cgColor, timerFillColor.cgColor, timerFillColor.cgColor, UIColor.red.withAlphaComponent(0.7).cgColor]
        strokeAnimation.duration = duration;
        circleLayer.add(strokeAnimation, forKey: "fillColor")
        
        parentLayer.addSublayer(circleLayer)
        filledLayer = circleLayer
    }
}

---

open func startTimer(duration: CFTimeInterval) {
    drawFilled(duration: duration) // <- Need to pass duration here  
    if useMask {
        runMaskAnimation(duration: duration)
    } else {
        runDrawAnimation(duration: duration)
    }
}

更新：

CAKeyframe动画：

• 您可以使用values和keyTimes属性指定关键帧值。

例如：

let colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")

colorKeyframeAnimation.values = [UIColor.red.cgColor,
                                 UIColor.green.cgColor,
                                 UIColor.blue.cgColor]
colorKeyframeAnimation.keyTimes = [0, 0.5, 1]
colorKeyframeAnimation.duration = 2

此动画将运行2.0持续时间。

• 在这个例子中，我们有 3 个值和 3 个 keyTimes。
• 0 是起始点，1 是最后一个点。
• 它显示了在动画期间在特定间隔 [keyTimes] 将反映哪些关联值。

IE：

KeyTime 0.5 -> (2 * 0.5) -> At 1 sec during animation -> UIColor.green.cgColor将显示。

现在从评论中回答您的问题，假设我们有 25 秒的计时器，并且我们想显示最后 10 秒的一些值，我们可以这样做：

        strokeAnimation.keyTimes = [0, 0.25, 0.50, 0.60]
        strokeAnimation.values = [timerFillColor.cgColor,timerFillColor.cgColor, timerFillColor.cgColor, timerFillColor.cgColor, UIColor.red.withAlphaComponent(0.7).cgColor]
strokeAnimation.duration = 25.0 // Let's assume duration is 25.0