Animation avec des paramètres en Javascript en utilisant une minuterie

J'essaye d'animer un point d'un point à un autre sur une carte. En ce moment, je le code suivant:Animation avec des paramètres en Javascript en utilisant une minuterie

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

Quand je lance le code en ce moment, le point ne bouge, mais il « saute » de l'emplacement en commençant à l'emplacement final. Il semble que le show() ne s'exécute pas tant que la boucle entière n'a pas été exécutée.

Je sais que j'ai besoin de quelque chose qui ressemble à setTimeOut (animate(), 20), mais je ne sais pas comment l'intégrer dans mon code (dois-je faire une nouvelle fonction?) Et comment spécifier quand arrêter l'animation. Toute opinion serait très appréciée. Merci d'avance!

Source

2010-03-05 Mel

Vous pouvez remplacer facilement votre boucle for pour un appel setInterval, .: par exemple

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

Source

2010-03-05 07:08:25 CMS

Merci! Travaillé comme un charme. – Mel

Quelque chose comme

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

Source

2010-03-05 06:51:55 rahul

Ne serait-ce que faire 1 appel Animer? Je pense que vous confondez timeout avec intervalle. –

... et 'setTimeout' devrait être avec un petit" o ", sinon c'est une erreur js –

Mis à jour ma réponse. – rahul

Quelque chose le long des lignes de:

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

//To stop 
clearInterval(timer);

Idéalement vous voulez mesurer le temps réel qui est passé entre les appels animés et déplacez l'objet de prendre en compte le temps . Mais cela devrait être un début. Les temporisateurs JavaScript sont un peu compliqués, les intervalles ne sont pas aussi précis en JavaScript.

Deux bons liens pour vous aider à démarrer: One Two

Et voici un bon départ tutorial sur le sujet.

Source

2010-03-05 06:53:34

Vous utilisez dojo, alors pourquoi ne pas l'utiliser aussi pour l'animation?

Supposons que votre point est un div flottant avec un positionnement absolu, qui est id "point", vous pouvez le faire:

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

Source

2010-03-05 10:45:25 Philippe


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

Source

2010-03-16 14:28:06 dante

Animation avec des paramètres en Javascript en utilisant une minuterie

Répondre

Questions connexes