javascript - 动画完成时球停止

Question

我有基本的想法，一个球正在弹跳，在所有弹跳之后它应该在舞台动画完成时停止。

问题-

球反弹很好，动画是我想要的。但是当动画完成时它仍然没有停止，它会超出框架。

我不兼容的解决方案-

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

但是球在振动。

我想-

球应平稳停止。

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

Answer 1

您需要清除绘制动画的间隔。

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

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

  return interval = setInterval(draw,10);
}

然后在 if 上：

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

在这个小提琴上检查它