Stop animation at a certain point and start up from that point again - swift

Question

Background
Hi all! I am creating a timer feature for my application.
Part of this timer includes a progress ring around the actual countdown numbers that fills as the timer progresses.
I added the image below in case my explanation was not easy to understand.
My goal is for the green stroke to stop animating when the "pause" button is tapped, and to continue animating when the "continue" button is tapped.
So far, the green stroke only animates correctly after pressing a start button.
To provide more background on how my code works, I added the content below.
To make the circle, I create a CAShapeLayer Object (shapeLayer) whose .path is equal to a circular UIBezierPath .CGPath
let center = view.center
let circularPath = UIBezierPath(arcCenter: center, radius: view.bounds.width/2.5, startAngle: -CGFloat.pi/2, endAngle: 2*CGFloat.pi, clockwise: true)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.systemGreen.cgColor
shapeLayer.lineCap = .round
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 7
shapeLayer.strokeEnd = 0
view.layer.addSublayer(shapeLayer)
Next, I animate the outside stroke using a CABasicAnimaton Object "basicAnimation". I do all my animation in the doAnimate() function detailed below.
func doAnimate(n: Int){
if n == 1{ //if n is 1, start from zero
basicAnimation.toValue = 0.80 // my circles start point is 0, and the endpoint at the top is .8 not 1
}//end of if
if n == 2{ //if n is 2, the timer was already started and the pause button has been pressed
//stop the animation where it is at
}//end of if
if n == 3{//if n is 3, the continue button has been pressed
// continue the animation from where it was stopped
}//end of if
basicAnimation.duration = CFTimeInterval(1500) //this is a set 25 minute timer which is why the duration is 1500
basicAnimation.fillMode = .forwards
basicAnimation.isRemovedOnCompletion = false
shapeLayer.add(basicAnimation, forKey: "urSoBasic")
}//end of func
Problem
In all of my IBOUtlet button functions, I call the doAnimate function with an integer n passed in.
The purpose of my integer 'n' is to decide where the stroke should be on the progress bar.
If n == 1, the stroke will start from 0.
If n == 2, that would mean the user has pressed the pause button, and I need the stroke to stop and hold where it is.
If n == 3, then the user pressed the continue button and I need the stroke to continue again.
I cannot get my animated stroke to pause when I press the pause button.
Similarly, I cannot get it to continue when I press the continue button.
I have been researching all day for code to fix this issue, and I cannot find any.
Question
I need the stroke to stop animating and stay where it is at after pressing the pause button.
I need the stroke to continue animating if the continue button is pressed.
How do I stop an animation and then make it pick back up from that point later?

Answer 1

You asked:
I need the stroke to stop animating and stay where it is at after pressing the pause button.
You can use presentation() to retrieve “a copy of the presentation layer object that represents the state of the layer as it currently appears onscreen”, i.e., the state of the layer mid-animation. Use that to set the strokeEnd before you remove the animation:
if let presentationLayer = progressShapeLayer.presentation() {
progressShapeLayer.strokeEnd = presentationLayer.strokeEnd
}
progressShapeLayer.removeAnimation(forKey: animationKey)
I need the stroke to continue animating if the continue button is pressed.
Use this strokeEnd value for your fromValue when you restart the animation.
For example:
#IBDesignable
public class CircularProgressView: UIView {
#IBInspectable var duration: CFTimeInterval = 10
#IBInspectable var lineWidth: CGFloat = 1 { didSet { updatePaths() } }
private(set) var isRunning = false
private var elapsed: CFTimeInterval = 0
private var startTime: CFTimeInterval!
private let animationKey = Bundle.main.bundleIdentifier! + ".strokeEnd"
private let backgroundShapeLayer: CAShapeLayer = {
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1).cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
return shapeLayer
}()
private let progressShapeLayer: CAShapeLayer = {
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = #colorLiteral(red: 0.2319213939, green: 0.5, blue: 0.224438305, alpha: 1).cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = .round
shapeLayer.strokeEnd = 0
return shapeLayer
}()
override init(frame: CGRect = .zero) {
super.init(frame: frame)
configure()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
configure()
}
public override func layoutSubviews() {
super.layoutSubviews()
updatePaths()
}
public override func prepareForInterfaceBuilder() {
progressShapeLayer.strokeEnd = 1 / 3
}
}
// MARK: - Public interface
public extension CircularProgressView {
func start(duration: CFTimeInterval) {
self.duration = duration
reset()
resume()
}
func pause() {
guard
isRunning,
let presentation = progressShapeLayer.presentation()
else {
return
}
elapsed += CACurrentMediaTime() - startTime
progressShapeLayer.strokeEnd = presentation.strokeEnd
progressShapeLayer.removeAnimation(forKey: animationKey)
}
func resume() {
guard !isRunning else { return }
isRunning = true
startTime = CACurrentMediaTime()
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = elapsed / duration
animation.toValue = 1
animation.duration = duration - elapsed
animation.delegate = self
progressShapeLayer.strokeEnd = 1
progressShapeLayer.add(animation, forKey: animationKey)
}
func reset() {
isRunning = false
progressShapeLayer.removeAnimation(forKey: animationKey)
progressShapeLayer.strokeEnd = 0
elapsed = 0
}
}
extension CircularProgressView: CAAnimationDelegate {
public func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
isRunning = false
}
}
// MARK: - Utility
private extension CircularProgressView {
func configure() {
layer.addSublayer(backgroundShapeLayer)
layer.addSublayer(progressShapeLayer)
}
func updatePaths() {
let radius = (min(bounds.width, bounds.height) - lineWidth) / 2
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: -.pi / 2, endAngle: 3 * .pi / 2, clockwise: true)
backgroundShapeLayer.lineWidth = lineWidth
progressShapeLayer.lineWidth = lineWidth
backgroundShapeLayer.path = path.cgPath
progressShapeLayer.path = path.cgPath
}
}
Yielding: