Question

我正在尝试在我的WatchOS应用程序中重新创建Apple Workout Rings。我正在使用SpriteKit和GameScene来制作动画。但是，我无法理解如何实现重叠环并包含渐变。

我尝试使用SKShader来结合渐变效果。但是，当SKShader存在时，SKShapeNode会忽略行上限，因此我无法获得圆角。

我还研究了其他方法，例如：Circle Progress View like activity app

但是，我不知道如何将这种方法用于watchOS，因为SpriteKit处理节点的概念，这种方法处理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

GitHub上有很多精确排序的Spritekit实现

这是一个看起来特别好的。

https://github.com/HarshilShah/ActivityRings

Apple Workout Rings SpriteKit动画

1 个答案: