How To Pause & Resume Animation - KDCircularProgress Circular Bar

Question

I have amended some code I pulled from https://github.com/kaandedeoglu/KDCircularProgress

I have a small UIView which represents the circle progress timer. I have referenced it and also instantiated it to KDCircularProgress class.

I have managed to implement methods to start and reset the timer progress circular bar.

But I am having trouble restarting the circular progress bar when I pause the animation.

My code preamble:

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!

Start animation - 60 second animation:

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

To stop and reset the animation:

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

To pause the animation:

circularProgressView.pauseAnimation()

How would I set up a method to restart the animation after the paused state?

Many thanks in advance for any clarification. It's my first animation, I have tried to resolve the matter myself, but cannot seem to find any syntax applicable to my particular case.

UPDATED SOLUTION:

Thanks to @Duncan C for putting me on the right path.

I solved my problem as follows ...

Since I initiated the counter's progress using currentCount += 1 I thought I would try to pause the counter with:

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

which I thought would have a 'net' effect on the counter (netting off counter +=1 and counter -=1) to effectively stop the counter. In theory this should being the counter's progress to zero, but it continued to count down.

So I reverted back to circularProgressView.pauseAnimation() to pause the circular counter animation.

To restart the animation after being paused, I had to amend the duration to represent the updated duration - i.e. the time at which the animation was paused.

I used a bit of a trick here and included a NSTimer - which I happened to have in my code anyway.

To restart the animation at the time of pause:

    if currentCount != maxCount {
        currentCount += 1

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

I couldn't figure out how to update my duration for the animated circular bar, but did know how to update time passed using an NSTimer - timer with the same duration and countdown speed. So I tagged the reference to the updated timer's value. Issue resolved ;)

My Code:

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()
    }
}


}

Side Note : I have two overlapping views - StartView and TimerView. One is hidden on view load, hence the hide/unhide references. And I dim buttons on press - play/pause/stop.

after pausing animation.. what does circularProgressView.angle logs ? — Shubhank
@katherine-jenkins the library author here. Please make sure to open a Github issue in the future, this way we can improve the library together if need be. If I'm understanding the problem correctly, make sure you try settings the relativeDuration option to false in the animate methods. That should help get rid of the timers and increment/decrements. — Kaan Dedeoglu

Duncan C Duncan C · Accepted Answer · 2016-04-29T11:21:19

Pausing and resuming an animation takes special code. You might not be able to do it without modifying the library you are using.

The trick is to set the speed on the animation on the parent layer that's hosting the animation to 0 and record the time offset of the animation.

Here are a couple of methods (written in Objective-C) from one of my projects that pause and resume an animation:

- (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;
}

How To Pause & Resume Animation - KDCircularProgress Circular Bar

2 Answers