Swift，sprite kit 游戏 : Have circle disappear in clockwise manner? 定时器？

Question

好吧，所以我不知道它的名字，但我有一个 sprite kit 游戏(跑酷游戏)，当游戏结束时，会有一个“拯救我”按钮和一个用完的计时器因此。当计时器用完时，您将无法再单击按钮来保存角色。

不过，我不想在文本中显示此计时器 - 我想要一个“自行展开”的圆圈，如果您愿意的话，它会以计时器用完的速度消失。 IE。当计时器到达 0 时，圆圈已完全消失。根据计时器，圆圈以顺时针运动的方式逐渐消失。

这里有一些图片来解释我在说什么。

我该怎么做？

Answer 1

通过以固定间隔更改 SKShapeNode 的 path 属性，您可以创建逐帧动画序列。要创建动画，请将 path 属性设置为一系列形状，这些形状以圆圈开始，什么都没有结束。您可以使用 UIBezierPath ，CGPath 的包装器，使用以下步骤为动画创建形状:

1. 将路径的“笔”移到圆心
2. 用 addArcWithCenter 向路径添加弧线从 startAngle 到 endAngle
3. 在路径上添加一条线，从圆上对应终止角的点到圆心
4. 将 endAngle 改变一个固定的量
5. 重复步骤 1-4

下面是上述步骤的实现:

override func didMove(to:SKView) {

    let circle = SKShapeNode(circleOfRadius: 50)
    circle.fillColor = SKColor.blue
    circle.strokeColor = SKColor.clear
    circle.zRotation = CGFloat.pi / 2
    addChild(circle)

    countdown(circle: circle, steps: 20, duration: 5) {
        print("done")
    }
}

// Creates an animated countdown timer
func countdown(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 incr = 1 / CGFloat(steps)
    var percent = CGFloat(1.0)

    let animate = SKAction.run {
        percent -= incr
        circle.path = self.circle(radius: radius, percent:percent)
    }
    let wait = SKAction.wait(forDuration:timeInterval)
    let action = SKAction.sequence([wait, animate])

    run(SKAction.repeat(action,count:steps-1)) {
        self.run(SKAction.wait(forDuration:timeInterval)) {
            circle.path = nil
            completion()
        }
    }
}

// Creates a CGPath in the shape of a pie with slices missing
func circle(radius:CGFloat, percent:CGFloat) -> CGPath {
    let start:CGFloat = 0
    let end = CGFloat.pi * 2 * percent
    let center = CGPoint.zero
    let bezierPath = UIBezierPath()
    bezierPath.move(to:center)
    bezierPath.addArc(withCenter:center, radius: radius, startAngle: start, endAngle: end, clockwise: true)
    bezierPath.addLine(to:center)
    return bezierPath.cgPath
}

和一段视频: