Question

我正在尝试在地图上将点从一个点动画到另一个点。现在我有以下代码：

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);
}

Answer 2

你正在使用dojo，为什么不将它也用于动画？

假设你的点是一个具有绝对定位的浮动div，id是“point”，你可以这样做：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true, isDebug: true"></script> 
    <script type="text/javascript">
        function moveNodeByXY(movingNode, shiftX, shiftY) {
            var startPos = dojo.position(movingNode);
            var endX = startPos.x + shiftX;
            var endY = startPos.y + shiftY;
            console.debug("Point moving from (" + startPos.x + ", " + startPos.y + ") to (" + endX + ", " + endY + ")");
            dojo.fx.slideTo({ node: movingNode, left:endX, top:endY, units:"px" }).play()
        }

        dojo.addOnLoad(function() {
            dojo.require("dojo.fx");
        });
    </script>
    <style type="text/css">
        #point {
            position : absolute;
            z-index : 1000;
            height : 10px;
            width : 10px;
            left : 50px;
            top : 50px;
            background-color : #3C3C3C;
        }
    </style>
</head>
<body>
    <div id="point" onClick="moveNodeByXY(this, 5, 5);"></div>
</body>
</html>

Answer 3


  dojo.require("dojox.fx._Line"); // multidimensional curve support
  dojo.ready(function(){
    new dojo.Animation({
        curve: new dojox.fx._Line([ [startx, endx], [starty, endy] ]),
        onAnimate:function(currentx, currenty){
            graphic.setGeometry({ x: currentx, y: currenty });
            graphic.show();
        },
        duration:1000,
        rate:10 // framerate, aka: setInterval(..., rate)
    }).play();
  });

Answer 4

有些事情：

function animate(){
   ....;
}
var timer = setInterval(animate, 50);

//To stop
clearInterval(timer);

理想情况下，您希望测量动画调用之间传递的实时时间，并考虑该时间移动对象。但这应该是一个开始。 JavaScript定时器有点棘手，在JavaScript中间隔不准确。

两个很好的链接可以帮助您入门： One Two

这是关于这个主题的良好开端tutorial。

Answer 5

像

这样的东西

var currentPoint = oldLoc;
var i = 0;

function animate()
{
    i++;
    if ( i >= 1000 )
    {
        i = 0;
        clearInterval ( timeOutId );
    }
    else
    {
       currentPoint.y += 5;
       currentPoint.x += 5
       graphic.setGeometry(currentPoint); //sets the new point coordinates
       graphic.show(); //redraws the display
       dojo.byId("info").innerHTML += "testingcheck"; //print check          
    }  
}

var timeOutId = setInterval(animate, 20);

使用计时器在Javascript中使用参数进行动画制作

5 个答案: