如何暂停和恢复动画 - KDCircularProgress 圆形条

Question

我修改了从 https://github.com/kaandedeoglu/KDCircularProgress

中提取的一些代码

我有一个小的 UIView，代表圆形进度计时器。我已经引用它并将它实例化为 KDCircularProgress class.

我已经设法实现了启动和重置计时器进度圆形条的方法。

但是当我暂停动画时重新启动循环进度条时遇到问题。

我的代码序言：

import UIKit

class SomeTableViewController: UITableViewController {

//Circular progress vars
var currentCount = 1.0
let maxCount = 60.0

//Reference selected UIView & instantiate
@IBOutlet weak var circularProgressView: KDCircularProgress!

开始动画 - 60 秒动画：

 if currentCount != maxCount {
    currentCount += 1
    circularProgressView.animateToAngle(360, duration: 60, completion: nil)
    }

要停止并重置动画：

currentCount = 0
circularProgressView.animateFromAngle(circularProgressView.angle, toAngle: 0, duration: 0.5, completion: nil)

暂停动画：

circularProgressView.pauseAnimation()

如何设置在暂停状态后重新启动动画的方法？

非常感谢您的澄清。这是我的第一个动画，我试图自己解决这个问题，但似乎找不到任何适用于我的特定情况的语法。

更新的解决方案：

感谢@Duncan C 让我走上了正确的道路。

我按如下方式解决了我的问题...

自从我使用 currentCount += 1 启动计数器的进度后，我想我会尝试使用以下方法暂停计数器：

if currentCount != maxCount {
currentCount -= 1
circularProgressView.animateToAngle(360, duration: 60, completion: nil)
}

我认为这会对计数器产生 'net' 影响（扣除 counter +=1 和 counter -=1）以有效停止计数器。理论上这应该是计数器归零的进度，但它继续倒计时。

所以我恢复到 circularProgressView.pauseAnimation() 以暂停循环计数器动画。

要在暂停后重新启动动画，我必须修改持续时间以表示 更新的 持续时间 - 即动画暂停的时间。

我在这里使用了一些小技巧，包括了一个 NSTimer - 无论如何我的代码中都有它。

要在暂停时重新开始动画：

    if currentCount != maxCount {
        currentCount += 1

        circularProgressView.animateToAngle(360, duration: NSTimeInterval(swiftCounter), completion: nil)
    }

我不知道如何更新动画圆形条的持续时间，但知道如何更新使用 NSTimer 传递的时间 - 具有相同持续时间和倒计时速度的计时器。所以我标记了对更新计时器值的引用。问题已解决 ;)

我的代码：

import UIKit

class SomeFunkyTableViewController: UITableViewController {

//Circular progress variables
var currentCount = 0.0
let maxCount = 60.0

@IBOutlet weak var circularProgressView: KDCircularProgress!


//Timer countdown vars
var swiftTimer = NSTimer()
var swiftCounter = 60



@IBOutlet weak var startButton: UIButton!
@IBOutlet weak var timerView: UIView!

@IBOutlet weak var timerLabel: UILabel!

@IBOutlet weak var startView: UIView!

override func viewDidLoad() {

    circularProgressView.angle = 0

    timerLabel.text = String(swiftCounter)


        super.viewDidLoad()


override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


@IBAction func startButton(sender: AnyObject) {


    pauseBtn.alpha = 1.0

    playBtn.alpha = 1.0

    stopBtn.alpha = 1.0

    circularProgressView.hidden = false


    if currentCount != maxCount {
        currentCount += 1

        circularProgressView.animateToAngle(360, duration: 60, completion: nil)
    }

    startView.hidden = true
    timerView.hidden = false


    swiftTimer = NSTimer.scheduledTimerWithTimeInterval(1, target:self, selector: #selector(SomeFunkyTableViewController.updateCounter), userInfo: nil, repeats: true)



}


@IBOutlet weak var pauseBtn: UIButton!
@IBAction func pauseButton(sender: AnyObject) {

  circularProgressView.pauseAnimation()



    swiftTimer.invalidate()

    pauseBtn.alpha = 0.5

    playBtn.alpha = 1.0

    stopBtn.alpha = 1.0
}


@IBOutlet weak var playBtn: UIButton!
@IBAction func playButton(sender: AnyObject) {




    if currentCount != maxCount {
        currentCount += 1

        circularProgressView.animateToAngle(360, duration: NSTimeInterval(swiftCounter), completion: nil)
    }




    if !swiftTimer.valid {
        swiftTimer = NSTimer.scheduledTimerWithTimeInterval(1, target:self, selector: #selector(SomeFunkyTableViewController.updateCounter), userInfo: nil, repeats: true)
    }


    if swiftCounter == 0 {
        swiftTimer.invalidate()
    }


    pauseBtn.alpha = 1.0

    playBtn.alpha = 0.5

    stopBtn.alpha = 1.0

}


@IBOutlet weak var stopBtn: UIButton!
@IBAction func stopButton(sender: AnyObject) {

    currentCount = 0
    circularProgressView.animateFromAngle(circularProgressView.angle, toAngle: 0, duration: 0.5, completion: nil)

    circularProgressView.hidden = true

    timerView.hidden = true
    startView.hidden = false



    swiftTimer.invalidate()
    swiftCounter = 60
    timerLabel.text = String(swiftCounter)


    pauseBtn.alpha = 1.0

    playBtn.alpha = 1.0

    stopBtn.alpha = 0.5
}

func updateCounter() {

    swiftCounter -= 1
    timerLabel.text = String(swiftCounter)

    if swiftCounter == 0 {
        swiftTimer.invalidate()
    }
}


}

旁注：我有两个重叠的视图 - StartView 和 TimerView。一个在视图加载时隐藏，因此 hide/unhide 引用。我在按下按钮时使按钮变暗 - play/pause/stop.

Answer 1

暂停和恢复动画需要特殊代码。如果不修改您正在使用的库，您可能无法做到这一点。

诀窍是将托管动画的父层上的动画速度设置为 0，并记录动画的时间偏移。

以下是我的一个项目中用于暂停和恢复动画的几个方法（用 Objective-C 编写）：

- (void) pauseLayer: (CALayer *) theLayer
{
  CFTimeInterval mediaTime = CACurrentMediaTime();
  CFTimeInterval pausedTime = [theLayer convertTime: mediaTime fromLayer: nil];
  theLayer.speed = 0.0;
  theLayer.timeOffset = pausedTime;
}

//-----------------------------------------------------------------------------

- (void) removePauseForLayer: (CALayer *) theLayer;
{
  theLayer.speed = 1.0;
  theLayer.timeOffset = 0.0;
  theLayer.beginTime = 0.0;
}

//-----------------------------------------------------------------------------

- (void) resumeLayer: (CALayer *) theLayer;
{
  CFTimeInterval pausedTime = [theLayer timeOffset];
  [self removePauseForLayer: theLayer];
  CFTimeInterval mediaTime = CACurrentMediaTime();
  CFTimeInterval timeSincePause = 
    [theLayer convertTime: mediaTime fromLayer: nil] - pausedTime;
  theLayer.beginTime = timeSincePause;
}

Answer 2

请注意，从 iOS 10 开始，有一种更新、更好的暂停和恢复 UIView 动画的方法：UIViewPropertyAnimator。

我在 Github 上有一个示例项目（用 Swift 编写）演示了这个新的 UIViewPropertyAnimator class。这是 link：UIViewPropertyAnimator-test

以下是该项目自述文件的摘录：

UIViewPropertyAnimator 允许您轻松创建基于 UIView 的动画，这些动画可以暂停、反转和来回滑动。

A UIViewPropertyAnimator 对象采用动画块，非常类似于旧的 animate(withDuration:animations:) 系列 UIView class 方法。但是，UIViewPropertyAnimator 可用于运行多个动画块。

通过在动画器上设置 fractionComplete 属性内置了对擦除动画的支持。但是，没有自动机制来观察动画进度。

您可以通过设置 isReversed 属性来反转 UIViewPropertyAnimator 动画，但是有一些怪癖。如果您将运行ning 动画师的 isReversed 属性从 false 更改为 true，则动画会反转，但您无法将 isReversed 属性从当动画运行ning 时从 true 变为 false，并让它从反向切换到正向 "live"。你必须先暂停动画，切换 isReversed 标志，然后重新启动动画。（用汽车类比，你可以在移动时从前进切换到倒车，但你必须完全停下来才能从倒车切换回驱动。）

如何暂停和恢复动画 - KDCircularProgress 圆形条

How To Pause & Resume Animation - KDCircularProgress Circular Bar

animation

timer

ios

progress-bar

swift