代码之家 › 专栏 › 技术社区 › aignetti

SpriteKit-带有BezierPath的进度条

bezier sprite-kit path swift ios

aignetti · 技术社区 · 8 年前

i使用以下函数创建路径:

func CreatePath(){
    let startpoint = CGPoint(x: self.frame.size.width / 6.8966, y: self.frame.size.height*0.5)
    let endpoint = CGPoint(x: self.frame.size.width - startpoint.x, y: self.frame.size.height*0.5)
    let controlpoint = CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height)
    curve.moveToPoint(startpoint)
    curve.addQuadCurveToPoint(endpoint, controlPoint: controlpoint)
}

看起来有点像这样:

我如何制作一个进度条,它从中间到外面沿着这条曲线。

因此,如果游戏的进度是100%,我会再添加2个BezierPaths。从中间开始,到起点(带有新的控制点)。另一个从中间开始,到达端点(使用新的Controlpoint)。这里没问题。

但是,我如何根据进度添加新的起点/终点?例如,如果游戏进度为50%,我的起点和终点离中间不远,我将需要新的曲线起点和终点。这是我的问题。

如何获得曲线的新起点/终点?

谢谢

1 回复 | 直到 8 年前

Alessandro Ornano 8 年前

你需要知道一个特定的点来自一个特定百分比。

您可以尝试此算法:

func quadBezierForPercent(t:Float, startPoint:Float, controlPoint:Float, endPoint:Float) ->Float {
    let mutablet = (1.0-t)
    let mutablett = mutablet*2
    let tt = t*2

    let start = startPoint * mutablett
    let middle = 2.0 * controlPoint * mutablet * t
    let end = endPoint * tt

    return start + middle + end
}

用法 :

let percentage = 25.0
let xPos = quadBezierForPercent(percentage, startpoint.x,controlPoint.x,endPoint.x)
let yPos = quadBezierForPercent(percentage, startpoint.y,controlPoint.y,endPoint.y)
let point = CGPointMake(xPos,yPos)