计算弹丸的轨迹弧

Question

我正在尝试以弧形在屏幕上移动图像...想想飞扬的小鸟发射器。图像从屏幕的左下方开始。当“启动”时，我希望它像启动一样在屏幕上以弧线移动/动画。

我可以以线性（向上和向右）轨迹为图像设置动画，但不知道如何使其弯曲并开始下降。

图像位于屏幕的左下方。

在每 0.01 秒运行一次的 setTimeout 方法中：

left += 10;
top -= 10;
$image.animate({left: '' + left + 'px', top: '' + top + 'px' });

Answer 1

跟踪速度和位置。

const GRAVITY = 2; // acceleration due to gravity, in pixels/tick
x = 0;
y = 0;
deltaX = 10;
deltaY = -10;

function tick() { // your setTimeout method
  x += deltaX;
  y += deltaY;
  deltaY += GRAVITY;
  $image.animate({left: `${x}px`, top: `${y}px` });
}