How to create a circular progress bar for a countdown timer
I am trying to add a countdown to my application and I am having animation problems. The look I'm going for is similar to the iPad countdown shown below, with the red bar increasing as the clock counts down.
I originally created an image atlas with an individual image for every half second of the countdown, but this seems to take a lot of memory to start up and hence crash the application, so now I need to find an alternative.
I was looking for a coloring book here https://developer.apple.com/library/prerelease/ios/documentation/GraphicsAnimation/Conceptual/SpriteKit_PG/Sprites/Sprites.html#//apple_ref/doc/uid/TP40013043-CH9 but can't see a way coloring the sprite section, it looks like the whole sprite will be changed.
Does anyone know if coloring could be an option here, or is there a way to reduce the memory used by the image atlas?
thank
source to share
You can do this using CAShapeLayer and animate the end of a stroke like this:
Xcode 9 update • Swift 4
determine the remaining time
let timeLeftShapeLayer = CAShapeLayer()
let bgShapeLayer = CAShapeLayer()
var timeLeft: TimeInterval = 60
var endTime: Date?
var timeLabel = UILabel()
var timer = Timer()
// here you create your basic animation object to animate the strokeEnd
let strokeIt = CABasicAnimation(keyPath: "strokeEnd")
define a way to create UIBezierPath
startAngle at -90 ˚ and endAngle 270
func drawBgShape() {
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer.strokeColor = UIColor.white.cgColor
bgShapeLayer.fillColor = UIColor.clear.cgColor
bgShapeLayer.lineWidth = 15
view.layer.addSublayer(bgShapeLayer)
}
func drawTimeLeftShape() {
timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer.strokeColor = UIColor.red.cgColor
timeLeftShapeLayer.fillColor = UIColor.clear.cgColor
timeLeftShapeLayer.lineWidth = 15
view.layer.addSublayer(timeLeftShapeLayer)
}
add your label
func addTimeLabel() {
timeLabel = UILabel(frame: CGRect(x: view.frame.midX-50 ,y: view.frame.midY-25, width: 100, height: 50))
timeLabel.textAlignment = .center
timeLabel.text = timeLeft.time
view.addSubview(timeLabel)
}
in viewDidload set endTime and add CAShapeLayer to your view:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(white: 0.94, alpha: 1.0)
drawBgShape()
drawTimeLeftShape()
addTimeLabel()
// here you define the fromValue, toValue and duration of your animation
strokeIt.fromValue = 0
strokeIt.toValue = 1
strokeIt.duration = timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
endTime = Date().addingTimeInterval(timeLeft)
timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
}
when updating time
@objc func updateTime() {
if timeLeft > 0 {
timeLeft = endTime?.timeIntervalSinceNow ?? 0
timeLabel.text = timeLeft.time
} else {
timeLabel.text = "00:00"
timer.invalidate()
}
}
you can use this extension to convert degrees to radians and display time
extension TimeInterval {
var time: String {
return String(format:"%02d:%02d", Int(self/60), Int(ceil(truncatingRemainder(dividingBy: 60))) )
}
}
extension Int {
var degreesToRadians : CGFloat {
return CGFloat(self) * .pi / 180
}
}
source to share
Great piece of code and answer! Just thought I was suggesting the following. I was getting the time showing as 1:00 and then 0:60 which I think might be related to the "ceil" part of the code.
I changed it to the following (also wanting times less than 60 to display differently) and it seems to have removed the overlap of times.
What is it for ...
extension NSTimeInterval {
var time:String {
if self < 60 {
return String(format: "%02d", Int(floor(self%60)))
} else
{
return String(format: "%01d:%02d", Int(self/60), Int(floor(self%60)))
}
}
}
source to share
In my case, Leo Dabus's answer didn't work, so I used this library instead of https://github.com/rsrbk/SRCountdownTimer which worked great.
source to share