在具有平滑边缘的三角形中移动的X/Y坐标获取函数

Question

5

我想要在JavaScript中制作动画，让一个物体沿着路径移动。为此，我需要编写一个函数，它可以在给定的时间返回路径上的X/Y坐标。这个路径应该是带有柔和边缘的三角形。

在动画开始时，它应该缓慢地移动到三角形路径上 - 但这可能可以在另一个函数中解决..对我来说更重要的是能够返回在三角形上移动的X/Y坐标的函数。

然后，动画应该无限循环在三角形路径上。

是否有（在线）工具可以为这样的动画创建坐标？有人能帮我写这个函数吗？

- Benjamin Beck

我会尝试使用“追踪曲线”（pursuit curve），让你的绘图光标跟随一个不可见的点，该点沿着一条硬三角形路径移动一定距离，从而平滑边缘。这也可以使得过渡到三角形更加容易。 - Thies Heidecke

我建议使用贝塞尔循环来解决问题，它们有很好的文档说明并且易于实现，您可以随时获取精确位置。然而，它们有一个令人讨厌的特性，即沿着路径不保持恒定速度，在圆形端点处动画会比边缘慢得多。 - Lyth

一个a=3的超级公式可能会有所帮助。 - Bergi

嗯，这道题让我获得的分数比我的整个声誉还要多，太棒了！请问有人可以把它分配到我的账户中吗？ - Benjamin

@Benjamin：我猜你需要将你的两个StackExchange账户链接起来。 - Bergi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bergi · Accepted Answer

我建议使用类似于sqrt(x²+y²)=2.5+sin(atan2(y,x)*3)/5 - 极坐标: ρ(θ)=2.5+sin(3θ)/5。这是一个简单的极坐标系统，并在圆上添加了一个压缩正弦波（每转3个周期）：

θ(t) = t // angle
ρ(t) = 2.5 + 0.2 * sin (t * 3) // radius
// of course, you can play with the parameters :-)

起始动画从中心移动到路径上，需要额外的函数。然而，可以使用相同的机制来完成它 - 忽略圆形部分：ρ(θ)=2.5*sin(3θ)。