Watch OS：创建循环进度条答案

【问题标题】：Watch OS: Creating a Circular Progress BarWatch OS：创建循环进度条
【发布时间】：2019-07-26 11:42:55
【问题描述】：

有没有办法在 Watch 上创建一个动画圆形进度条？

我不想使用多个加载图像来创建这种效果。也许使用游戏场景？

【问题讨论】：

标签： swift animation progress-bar watchkit

【解决方案1】：

我想通了。使用了 SKScene。使用 UIBezierPath 创建了一个圆形路径。并将其附加到 SKShapeNode。最后，使用 SKAction 为路径设置动画。

希望这对某人有所帮助。


class RestScene: SKScene {


    override func sceneDidLoad() {


        addCircle()
    }


    func addCircle() {

        let path = getCirclePath(ofRadius: 50, withPercent: 1)

        let shapeNode = SKShapeNode(path: path)
        shapeNode.strokeColor = .blue
        shapeNode.fillColor = .clear
        shapeNode.lineWidth = 4
        shapeNode.lineCap = .round
        shapeNode.position = CGPoint(x: 0, y: 0)
        shapeNode.zRotation =  CGFloat.pi * 0.5

        self.addChild(shapeNode)


        animateStrokeEnd(circle: shapeNode, duration: 5){
            shapeNode.path = nil
            print("Done")
        }
    }

    func getCirclePath(ofRadius radius :CGFloat, withPercent percent:CGFloat) -> CGPath {
       return  UIBezierPath(arcCenter: .zero,
                     radius: radius,
                     startAngle: 0,
                     endAngle: 2 * .pi * percent,
                     clockwise: true).cgPath



    }

    func animateStrokeEnd(circle:SKShapeNode, duration:TimeInterval, completion:@escaping ()->Void)  {
        guard let path = circle.path else {
            return
        }
        let radius = path.boundingBox.width/2
        let animationAction = SKAction.customAction(withDuration: duration) { (node, elpasedTime) in
            let percent =  elpasedTime/CGFloat(duration)
            (node as! SKShapeNode).path = self.getCirclePath(ofRadius: radius, withPercent: 1 - percent)
        }

        circle.run(animationAction) {
            completion()
        }


    }

}

【讨论】：

必须将位置设置为一半宽度和一半高度以使其位于手表屏幕的中心

【解决方案2】：

嗨@aledap，您可以使用第三方库来实现这一点。将此库添加到您的 pod 文件中。

See this library this will helps you

circleStrokeSpin 是你想要的加载器，看看里面有没有。

快乐编码

【讨论】：

我认为这对我没有帮助，这是一个动画。我想相应地运行一个计时器来增加圆圈路径的填充。