Swift, sprite kit game: Have circle disappear in clockwise manner? On timer? -
alright, don't know name have sprite kit game (a runner game) that, when it's game over, going have "save me" button , timer runs out accordingly. when timer runs out, can no longer click button , save character.
i don't want display timer in text however- want circle "unwinds itself," if will, , disappears @ rate timer runs out. i.e. when timer reaches 0, circle has disappeared. circle disappears degree degree in clockwise motion in accordance timer.
here pictures explain i'm talking about.
how this?
by changing path
property of skshapenode
@ fixed interval, can create frame-by-frame animation sequence. create animation, set path
property sequence of shapes starts circle , ends nothing. can use uibezierpath, wrapper cgpath
, create shapes animation using following steps:
- move path's "pen" center of circle
- add arc path addarcwithcenter
startangle
endangle
- add line path point on circle corresponding ending angle center
- change
endangle
fixed amount - repeat steps 1-4
here's implementation of above steps:
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 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 cgpath in shape of pie 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 }
and video clip:
Comments
Post a Comment