观看 OS：创建循环进度条

Question

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

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

Answer 1

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

See this library this will helps you

circleStrokeSpin 是你想要的加载程序，看看它。

快乐编码

Answer 2

我明白了。使用了 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()
        }


    }

}

观看 OS：创建循环进度条

Watch OS: Creating a Circular Progress Bar

animation

progress-bar

swift

watchkit