Animating with parameters in Javascript using a timer_问答_开发者

Animating with parameters in Javascript using a timer

开发者 https://www.devze.com 2022-12-22 12:13 出处：网络

I\'m trying to animate a dot from one point to another on a map. Right now I have the following code:

I'm trying to animate a dot from one point to another on a map. Right now I have the following code:

function a开发者_Go百科nimate(){

            //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
            }
        }

When I run the code right now, the dot does move, but it "jumps" from the beginning location to the final location. It seems like the show() doesn't execute until the entire loop has been run through.

I know I need something that looks like setTimeOut(animate(), 20), but I don't know how to incorporate it into my code (do I make a new function?) and how to specify when to stop the animation. Any insight would be much appreciated. Thanks in advance!

You could also easily replace your for loop for a setInterval call, e.g.:

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

You are using dojo, so why not using it also for animation ?

Suppose your point is a floating div with an absolute positioning, which id is "point", you could do :

<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>


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

Something along the lines of:

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

//To stop
clearInterval(timer);

Ideally you want to measure the real time which has passed between the animate calls and move the object taking in account that time. But this should be a start. JavaScript timers are little bit tricky, intervals aren't that accurate in JavaScript.

Two good links to get you started: One Two

And here's a good starting tutorial on the topic.

Something like

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