如何在矩形周围进行插值？

我想制作一个点围绕矩形移动的精美动画。我想一次找到该点的位置t。

矩形用给定的X，Y，Width和Height。

是否有一种算法？

我已经使用sin/ cos圈了。矩形的等效方法是什么？

我假设您的t从0变为1。（如果没有，请乘以适当缩放。）

找出什么比例（0 - 1）各侧的周长的。（边长/总周长）

要查找在时间t处“填充”了每一边的多少，请遍历各边，减去它们的比例，直到t耗尽为负值为止。最后一条边（导致t变为负数）由（边长+剩余）/边长的比例填充。其余的未填满。

要获得t处的准确矢量位置，请将每侧的矢量乘以该侧的比例，然后将它们相加。

这实际上适用于任何多边形！

t的正弦和余弦分别是圆上与x轴成角度t的点的y和x坐标。不需要在矩形中！矩形由四行组成。如果t从去0到1，它到达点(px,py)的t==0，并(qx,qy)在t==1与给定的行：

(l(x),l(y)) = (t*qx + (1-t)*px, t*qy + (1-t)*py)

如果不是0和1你的时间，从去t0到t1，你可以先正常化的时间，然后应用上面的公式。

(l(x),l(y)) = (  ((t-t0)/(t1-t0))*qx + ((t1-t)/(t1-t0))*px, ((t-t0)/(t1-t0))*qy + ((t1-t)/(t1-t0))*py  )

现在，对于您的矩形，将四种情况划分为一个if，每个覆盖一个时间跨度的边分别为，并进行直线移动。

请注意，如果矩形是轴对齐的，则x值或y值将始终为常数。例如，对于介于0和之间的t a/4（并假设（X，Y）在左下角），

(l(x),l(y)) = ((4*t/a)*(X+Width) + (1-4*t/a)*(X), Y+Height)

这也等于：

(l(x),l(y)) = (X + (1-4*t/a)*(Width), Y+Height)

我不知道是否有实际的算法，但是我自己做了一个（Java）：

int points = 4; // for a rectangle
double progress = 0.0; // 0.0 -> 1.0 (with 1.0 being 100%)
double pp = points * progress; // This calculation would otherwise be done multiple times

int p1 = Math.floor(pp);
int p2 = Math.ceil(pp);

while (p1 >= points) p1 -= points;
while (p2 >= points) p2 -= points;

double tmp = 2 * Math.PI / points;

int p1x = Math.cos(tmp * p1);
int p1y = Math.sin(tmp * p1);
int p2x = Math.cos(tmp * p2);
int p2y = Math.sin(tmp * p2);

double p = pp - Math.floor(pp);

int x = (1.0 - p) * p1x + p * p2x; // between -1.0 and 1.0
int y = (1.0 - p) * p2x + p * p2y; // between -1.0 and 1.0

if (p == 0.0) { // prevent a weird glitch when p = 0.0 (I think this is a glitch)
    x = p1x;
    y = p1y;
}

您应该转换x和y变量，以根据需要（通过乘以）和所需的位置（在x和y上添加/减去）来使动画变大或变小。

我尚未测试此代码，但我认为它应该可以工作。这也适用于具有任意数量点的任何多边形（您也可以使用一些代码来生成多边形）。

鉴于：

a=total time

perimeter = WIDTH *2 + HEIGTH * 2;

给定时间T1如何到达P周长（假设正位在0,0）？

T1=T1%a; //use mod to have T1<a

distT1 = (T1*Perimeter)/a; //distance traveled in time T1

现在一些简单的初级scool几何和数学（即希望你饶了我吧）获得P.x并P.y从distT1