SpriteKit - 带有 BezierPath 的进度条

Question

我使用以下函数创建路径：

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。一个从中间开始并到达起点（带有一个新的控制点）。另一个从中间开始并到达端点（使用新的控制点）。这里没问题。

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

如何获得新的start/endpoint曲线？

谢谢！

Answer 1

您需要知道特定的点数来自特定的百分比。

你可以试试这个算法：

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)

SpriteKit - 带有 BezierPath 的进度条

SpriteKit - Progress bar with BezierPath

bezier

path

ios

sprite-kit

swift