Java 计算两个xy点之间的四次曲线

我有两（x，y）个起点和终点。我想从开始到结束设置动画，但不是以线性方式，而是创建一条曲线路径

我很确定我不是在寻找一个缓和，因为我不想影响动画的速度，我只想计算一个弯曲的路径

我发现我需要某种控制点，如图所示：

但我不知道如何实施它。我想创建一个采用以下参数的函数

function calculateXY(start, end, controlpoint, percentage);

其中百分比为0-100%之间的数字，其中0返回起始位置，100%返回结束位置

解决方案不需要使用Objective-C，它可以使用任何编程语言。我就是不懂数学：）

看

看起来它可能不支持二次贝塞尔曲线，所以您需要这样做

解决方案不需要使用Objective-C，它可以使用任何编程语言。我就是不懂数学

我不能给出代码，但如果你理解了所涉及的数学知识，我可以解释这对四次曲线是如何起作用的

首先从数学上理解控制点的影响。控制点和两个定义的点定义了绘制线在当前点和端点处的渐变。可以使用m=（y-y1）/（x-x1）计算两条线的梯度

从数学上讲，你接下来要解决的是a，b，c的方程组：

ax^2+bx+c包含起点和终点

2ax+b等于相应x值处的相应梯度

---

在这一点上，你可以用二次曲线来画这条线。

我在工作中看到了这一点，想在家里试一试。在看了一段时间后，我想我明白了，该做什么，下面你会发现一个例子，我现在将解释

我将使用介于0和1之间的时间间隔。介于两者之间的任何数字都是动画的时间分数。你想要的是在给定的时间内得到你“兴趣点”的位置。第一步是，你有三个点，

A

，

B

，

C

通过两条线连接（

g=>[AB]

，

h=>[BC]

）。对于这些线中的每一条，您必须计算在给定时间段内分别在起始点和权重点

P（g）

之间、权重点和端点

P（h）

之间徘徊的点

在这两个计算点（

p（g）

和

p（h）

）之间画第三条线（我们称之为

y

）。在这条线上的某个地方是你的“兴趣点”。但是在哪里呢？同样，您必须计算线

y

（称为

P（y）

）上从

P（g）

移动到

P（h）

的点的位置

你的

p（y）

的位置就是你要找的

函数设置（）{
createCanvas（400400）；
分数=0；
drawnPoints=[]；
}
函数绘图（）{
背景（100）；
让开始=新点（30,50,5）；
让端点=新点（300、170、5）；
让重量=新点（200、300、5）；
让lineStartWeight=新线（起点、重量）；
让lineStartWeightPoint=lineStartWeight.getPointAt（分数）；
让lineWeightEnd=新行（重量，结束）；
让lineWeightEndPoint=lineWeightEnd.getPointAt（分数）；
设drawingLine=新线（LineStartWightPoint、lineWeightEndPoint）；
开始。绘制（“红色”）；
结束。绘制（“蓝色”）；
重量。绘图（'0f0'）；
lineStartWeight.draw（“#ff0”）；
lineWeightEnd.draw（'0ff'）；
直线起点到终点。绘制（“#000”）；
lineWeightEndPoint.draw（“#fff”）
drawingLine.draw（“#f66”）；
push（drawingLine.getPointAt（分数））；
drawnPoints.forEach（p=>p.draw（“”））；
分数+=0.01
如果（分数>1）{
分数=0；
drawnPoints=[]；
}
}
类点{
构造函数（x，y，size=1）{
这个.x=x；
这个。y=y；
这个。大小=大小；
}
绘制（颜色）{
填充（颜色）；
仰泳（）；
椭圆（this.x，this.y，this.size，this.size）；
}
}
班级线{
构造函数（点开始、点结束）{
this.pointStart=pointStart；
this.pointEnd=pointEnd；
}
绘制（颜色）{
笔画（颜色）；
行（this.pointStart.x，this.pointStart.y，this.pointEnd.x，this.pointEnd.y）；
}
getPointAt（分数）{
设xCoord=（this.pointEnd.x-this.pointStart.x）*分数+this.pointStart.x；
让yCoord=（this.pointEnd.y-this.pointStart.y）*分数+this.pointStart.y；
返回新点（xCoord，yCoord，5）；
}
}

html，正文{
保证金：0；
填充：0；
}