计算两个 xy 点之间的四边形曲线
我有两个 (x,y) 点开始和结束。我想从头到尾制作动画,但我不想采用线性方式,而是想创建一条弯曲的路径。
我很确定我不是在寻找缓动,因为我不想影响动画速度,我只想计算弯曲路径。
我发现我需要某种控制点,如下图所示:
但我不知道如何实施。我很想创建一个采用以下参数的函数
function calculateXY(start, end, controlpoint, percentage);
,其中百分比是 0 - 100% 之间的数字,其中 0 将返回开始位置,100% 将返回结束位置。
该解决方案不需要采用 Objective-C,它可以采用任何编程语言。我只是无法理解数学:)
I have two (x,y) points start and end. I want to animate from start to end but instead of going a linear way I want to create a curved path.
I am quite sure I'm not looking for an easing because I don't want to affect the animation speed, I just want to calculate a curved path.
I figured out I needed some sort of control point, like shown in this image:
But I have no idea how to implement it. I would love to create a function that took the following parameters
function calculateXY(start, end, controlpoint, percentage);
Where percentage would be a number from 0 - 100% and where 0 would return the start position and 100% the end position.
The solution doesn't need to be in Objective-C, it could be in any programming language. I just can't get my head around the math :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
看看 Cocoa 的贝塞尔路径:(NSBezierPath) 。
看起来它可能不支持二次贝塞尔曲线,因此您需要 转换到立方体。
Look at Cocoa's bezier paths: (NSBezierPath).
It looks like it may not support quadratic bezier curves, so you'll need to convert to cubic.
我无法提供代码,但如果您想了解所涉及的数学,我可以解释它如何适用于四边形曲线。
首先了解控制点在数学上的影响。控制点和两个定义点定义了当前点和端点处绘制线的渐变。您可以使用 m = (y - y1)/(x - x1) 计算两条线的梯度。
从数学上讲,您接下来要解决的是 a、b、c 的这组方程:
ax^2 + bx + c 包含起点和终点
2ax + b 等于相应 x 值处的相应梯度。
此时,您就有了可用于绘制直线的二次方程。
I'm not in a position to give code but if you're after an understanding of the math involved I can explain how that works for the Quad curve.
First understand what the control point mathematically impacts. The control point and the two defined points define the gradients of the drawn line at the current point and the endpoint. You can calculate the gradient of both lines using m = (y - y1)/(x - x1).
Mathematically what your trying to solve next is this set of equations for a, b, c:
ax^2 + bx + c contains both start and end points
2ax + b equals the corresponding gradients at the corresponding x value.
At that point you have quadratic that can be used for drawing the line.
我在工作中看到了这个,想在家里尝试一下。查看 这个来自维基百科的示例后 一段时间以来,我想我明白了,该怎么做,下面你会找到一个例子,我现在将对此进行解释。
我将使用 0 到 1 之间的时间间隔。之间的任何数字都是动画的时间分数。您想要的是在给定的时间内获得“兴趣点”的位置。第一步是,您有由两条线连接的三个点
A
、B
、C
(g => [AB ]
,h => [BC]
)。对于每条线,您都必须计算在起始点和权重点P(g)
之间徘徊的点,分别在权重点和结束点P(h)
之间徘徊在给定的时间内。在这两个计算点(
P(g)
和P(h)
)之间绘制第三条线(我们称之为y
)。这条线上的某个地方就是您的“兴趣点”。但在哪里呢?同样,您必须计算从P(g)
到y
线上的点的位置(称为P(y)
)。代码>P(h)。P(y)
的位置就是您要寻找的位置。编辑
它归结为一个简单的函数。我将仅针对 x 值进行说明,但 y 的工作方式类似。
开始(x1|y1), 结束(x2|y2) , 控制点(x< sub>3|y3), f = 动画时间的一部分
要获取时间点 f 的 x 值,您可以:
x = (((x2-x3)*f+x3)-((x3-x 1)*f+x1))*f+((x3-x1)*f+ x1)
经过一些简化后,您得到:
x = f2(x1+x2-2x3)
+2f(x3-x1)+x1
I saw this at work and wanted to take a shot at it at home. After looking at this example from Wikipedia for some time I think I understood, what to do and below you will find an example, which I will explain now.
I will use a time interval between 0 and 1. Any number in between is the time fraction of the animation. What you want is to get the location of you "point of interest" at a given fraction of time. The first step is, that you have three points
A
,B
,C
connected by two lines (g => [AB]
,h => [BC]
). For each of these lines you will have to calulate points, that are wandering between the startPoint and the weightPointP(g)
respectively between the weightPoint and the endPointP(h)
at a given fraction of time.Between these two calculated points (
P(g)
andP(h)
) you draw a third line (let's call ity
). Somewhere on that line is your "point of interest". But where? Again you have to calculate the position of a point on the liney
(calledP(y)
) travelling fromP(g)
toP(h)
.The position of your
P(y)
is what you're looking for.EDIT
It boils down to one simple function. I will only illustrate it for the x values, but y works analogous.
start(x1|y1), end(x2|y2) , controlpoint(x3|y3), f = fraction of time of the animation
To get the x value at a point in time f you have:
x = (((x2-x3)*f+x3)-((x3-x1)*f+x1))*f+((x3-x1)*f+x1)
After a few simplifications you come out with:
x = f2(x1+x2-2x3)
+2f(x3-x1)+x1