一尘不染

迅捷的Sprite Kit游戏:圆圈以顺时针方向消失了吗?在计时器上?

swift

好吧,所以我不知道它的名字,但是我有一个Sprite Kit游戏(
亚军游戏),当游戏结束时,将有一个“ Save me”按钮
和一个计时器,该计时器将相应地用完。计时器用完后,您将无法
再单击按钮并保存字符。

但是,我不想以文本形式显示此计时器-
如果您愿意,我希望有一个圆圈“自动展开”,并以计时器用完的速度消失
。即,当计时器达到0时,圆圈已完全消失。该
圆在按照顺时针运动消失由度度
定时器。


阅读 245

收藏
2020-07-07

共1个答案

一尘不染

通过以固定间隔更改的path属性SKShapeNode,可以创建逐帧动画序列。要创建动画,设置该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
    }

2020-07-07