Apple Workout Rings SpriteKit Animation - ios

Question

I am trying to re-create the Apple Workout Rings in my WatchOS App. I am making use of SpriteKit and GameScene for the animation. However, I am not able to understand how to implement the overlapping rings and include a gradient.
Workout Rings
I tried using SKShader in order to incorporate the gradient effect. However, SKShapeNode ignores the line cap when SKShader is present so I'm not able to get the rounded edges.
I have also looked at other approaches like : Circle Progress View like activity app
However, I don't know how to use this approach for the watchOS as SpriteKit works on the concept of nodes and this approach deals with CGContext.
class GameScene: SKScene {
func circle(radius:CGFloat, percent:CGFloat) -> CGPath {
let start:CGFloat = 0
let end = ((CGFloat.pi * 2)) * percent
let center = CGPoint.zero
let corePath = CGMutablePath()
corePath.addArc(center: center, radius: radius, startAngle: start, endAngle: end, clockwise: true)
return corePath
}
// Animated Timer for Progress Circle
func countdownCircle(circle:SKShapeNode, steps:Int, duration:TimeInterval, completion:#escaping ()->Void) {
guard let path = circle.path else {
return
}
let radius = path.boundingBox.width/2
let timeInterval = duration/TimeInterval(steps)
let increment = 1 / CGFloat(steps)
var percent = CGFloat(1.0)
let animate = SKAction.run {
percent -= increment
circle.path = self.circle(radius: radius, percent:percent)
}
let wait = SKAction.wait(forDuration:timeInterval)
let action = SKAction.sequence([wait, animate])
run(SKAction.repeatForever(action)) {
self.run(SKAction.wait(forDuration:timeInterval/2)) {
circle.path = nil
completion()
}
//(action,count:steps-1)
}
}
// Animated Timer for Shadow Circle
func countdownShadow(circle:SKShapeNode, steps:Int, duration:TimeInterval, completion:#escaping ()->Void) {
guard let path = circle.path else {
return
}
let radius = path.boundingBox.width/2
let timeInterval = duration/TimeInterval(steps)
let increment = 1 / CGFloat(steps)
var percent = CGFloat(1.0)
let animate = SKAction.run {
percent -= increment
circle.path = self.circle(radius: radius, percent:percent)
}
let wait = SKAction.wait(forDuration:timeInterval)
let action = SKAction.sequence([wait, animate])
run(SKAction.repeatForever(action)) {
self.run(SKAction.wait(forDuration:timeInterval)) {
circle.path = nil
completion()
}
}
}
//(action,count:steps-1)
override func sceneDidLoad() {
let pathForCircle = CGMutablePath()
pathForCircle.addArc(center: CGPoint.zero, radius: 100, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
// This is the circle that indicates the progress.
let progressCircle = SKShapeNode()
progressCircle.lineCap = .round
progressCircle.position = CGPoint(x: 0, y: 15)
progressCircle.strokeColor = SKColor.green
progressCircle.lineWidth = 20
progressCircle.path = pathForCircle
progressCircle.zPosition = 4
self.addChild(progressCircle)
countdownCircle(circle: progressCircle, steps: 400, duration: 5){
print("Done")
}
// This is the circle that gives the ring the shadow effect.
let shadowCircle = SKShapeNode()
shadowCircle.lineCap = .round
shadowCircle.position = CGPoint(x: 0, y: 15)
shadowCircle.strokeColor = SKColor.black
shadowCircle.glowWidth = 30
shadowCircle.zPosition = 3
shadowCircle.path = pathForCircle
self.addChild(shadowCircle)
countdownShadow(circle: shadowCircle, steps: 400, duration: 5){
print("Done")
}
// This is the bottommost circle.
let bottommostCircle = SKShapeNode()
bottommostCircle.position = CGPoint(x: 0, y: 15)
bottommostCircle.lineCap = .butt
bottommostCircle.strokeColor = SKColor.green
bottommostCircle.alpha = 0.2
bottommostCircle.lineWidth = 20
bottommostCircle.path = pathForCircle
bottommostCircle.zPosition = 0
self.addChild(bottommostCircle)
}
override func update(_ currentTime: TimeInterval) {
// Called before each frame is rendered
}
}

Answer 1

there are plenty of Spritekit implementations of this exact sort on GitHub
Here is one that looks particularly good.
https://github.com/HarshilShah/ActivityRings