javascript - 使用计时器在 Javascript 中使用参数设置动画

Question

我正在尝试为 map 上的一个点设置动画。现在我有以下代码:

function animate(){

            //animation
            var pt = oldLoc;
            for(i = 0; i < 1000; i++){
                pt.y += 5
                pt.x += 5
                graphic.setGeometry(pt); //sets the new point coordinates
                graphic.show(); //redraws the display
                dojo.byId("info").innerHTML += "testingcheck"; //print check
            }
        }

当我现在运行代码时，点确实移动了，但它从开始位置“跳”到最终位置。似乎 show() 在整个循环运行完毕后才执行。

我知道我需要一些类似于 setTimeOut(animate(), 20) 的东西，但我不知道如何将它合并到我的代码中(我要创建一个新函数吗？)以及如何指定何时停止动画片。任何见解将不胜感激。提前致谢!

Answer 1

您还可以轻松地将 for 循环替换为 setInterval 调用，例如:

function animate(){
  var pt = oldLoc, i = 0, timer; // no global variables declared...

  timer = setInterval(function () {
    pt.y += 5;
    pt.x += 5;
    graphic.setGeometry(pt);
    graphic.show();
    dojo.byId("info").innerHTML += "testingcheck";

    if (i >= 1000) { // stop condition
      clearInterval(timer);
    }

    i++;
  }, 100);
}