Question

我觉得解决方案非常简单，但老实说我在高中时多次失败，所以我现在几乎都没有掌握基本概念。

这个想法很简单..我希望有一堆图形对象从300x300px div的一侧到另一侧的动画沿着随机曲线路径，好像它们被从左上角扔到或掉到了右下角（反之亦然，来回）。

我知道我需要使用某种形式的三角函数来解决这个问题（sin，cos，tan ??）。我也已经知道如何获得我的两个点（随机化Y点，然后随机将x点放在300px宽度的正面或负面）。但是我必须实际计算曲线上的步数的部分超出了我的范围。

这是一个糟糕的图表，基本上是我尝试的内容。我搜索了Google，但所有示例都过于复杂或过于抽象。我只是想学习如何在两点之间形成一条曲线。那就是它！

这么简单的问题：如何使用vanilla JavaScript（不要使用JQuery）随机化两点之间的曲线动画（或绘制曲线点）。

Answer 1

实际上，你只需要非常简单的三角学（正弦和余弦）。如果你从一个点（X0，Y0）扔东西，运动方程更像是抛物线轨迹。

来自维基百科：

抛物线投掷的位移和坐标

在任何时间t，射弹的水平和垂直位移   是：
x = X0 + v0 * t * cos(theta)
y = Y0 + v0 * t * sin(theta) − 0.5 * g * t * t

所以你去，每个t时间步的坐标（以像素为单位）。您可以将theta和v0定义为常量，也可以将其定义为随机值，以使动画更加混乱和生动。使用g的值（在地球上它是9.8 m /s²），因为可能在缩放到像素/s²时可能会超调。此外，您可能希望为X0和Y0赋予负值，以拦截轨迹的下降部分，使得升序离开div。

Answer 2

首先，如果您想快速浏览JavaScript动画的数学，可以考虑访问此link