动画完成后停球

Question

我有一个基本的想法，一个球弹跳，毕竟弹跳它应该停止在舞台动画完成。

问题 -

球反弹很好，动画就是我想要的。但是，当动画完成时，它仍然没有停止，它会逐渐失控。

我不兼容的解决方案 -

if(y>=300)
{
x=110;
y=300;
}

但是球在振动。

我想 -

球应该顺利停止。

小提琴链接 - http://jsfiddle.net/stackmanoz/xWvEU/

Answer 1

您需要clear the interval绘制动画。

在您的代码中，我做了以下更改：

function init()
{
  var ctx=document.getElementById("canvas").getContext("2d");

  return interval = setInterval(draw,10);
}

然后在if：

if(y>=300)
{
    clearInterval(interval);
}

在fiddle

上查看