ansaurus

Question

Animating with parameters in Javascript using a timer

Answer 1

A:

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

rahul 2010-03-05 06:51:55

Wouldn't this only make 1 animate call? I think you're confusing timeout with interval.

Maiku Mori 2010-03-05 06:54:57

... and `setTimeout` should be with a small "o", otherwise it's a js error

Alexander Gyoshev 2010-03-05 06:58:50

Updated my answer.

rahul 2010-03-05 07:07:25

Answer 2

+1 A:

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.

Maiku Mori 2010-03-05 06:53:34

Answer 3

+3 A:

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

CMS 2010-03-05 07:08:25

Thanks! Worked like a charm.

Alice 2010-03-05 07:41:50

Answer 4

+3 A:

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>

Philippe 2010-03-05 10:45:25

Answer 5

+1 A:


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

dante 2010-03-16 14:28:06

ansaurus

tags:

views:

answers:

Animating with parameters in Javascript using a timer

related questions