[resolu] Stopper un setInterval à la fin d'un animate()

Salut tout le monde,

Je suis entrain de chercher un palliatif à l'utilisation (fort moche) d'un gif animé. L'idée est simplement d'avoir mon personnage entrain de marcher (animation) quand il se déplace.

Individuellement, tout marche bien, je parviens à déplacer mon personnage, via la fonction animate() en changeant sa place par rapport à la fenêtre (top, left).
Je parviens aussi à créer une boucle d'animation grâce à setInterval pour voir mes différents "calques".

Je suis même parvenue à faire les deux à la fois...

Mais je bloque complètement sur le clearInterval() qui me permettrait d'achever mon animation une fois que mon bonhomme a atteint sa nouvelle case.

Pour le code, un petit jsfiddle (avec en exclu la nouvelle tête de mes skins d'assassin) : http://jsfiddle.net/pVnw9/


Merci d'avance ^^
Modifié par Lothindil (11 Jun 2014 - 14:59)

Bonjour,

La variable anim est locale à ta fonction animPJ(). C'est pour ça que ton clearInterval ne peut pas fonctionner.

Modifie la fonction animPJ() en rajoutant à sa fin un return anim; et lors de l'appel à cette fonction, récupère la valeur de anim via un anim=animPJ();.

EDIT : je n'ai pas cherché à déboguer le reste du code. Il se peut donc que ça ne marche toujours pas.

Amicalement,
Modifié par parsimonhi (05 Jun 2014 - 20:33)

Bonjour,

Voici une version complète qui semble marcher (il faut penser à activer jQuery dans jsfiddle). J'ai modifié la visibilité de certaines variables et l'appel au setInterval de fin en l'encapsulant dans un setTimeout se déclenchant au bout d'un temps qu'on connait vu que c'est la durée de l'animation.

function inTheSetInterval(hauteur,nbimages)
{
	var position=-k*hauteur;
	$('#PJ img').css("margin-top",position);
	k++;
	if (k==nbimages) {k=0;}     
}

function animPJ()
{
	var hauteur=42;
	var nbimages=4;
	var anim=setInterval(function(){inTheSetInterval(hauteur,nbimages);},200);
	return anim;
}

var X=0;
var Y=5;
var k=0;var ml=0;var mt=0;
var anim;

ml=X*42;mt=Y*42;
anim=animPJ();

$('#PJ').animate(
	{
		top:mt+'px',
		left:ml+'px',
	},3500);

setTimeout("clearInterval("+anim+")",3500);

Amicalement,
Modifié par parsimonhi (05 Jun 2014 - 22:18)

Je teste ça dès que j'ai un peu de temps et je reviens ^^ (le temps que je dessine mon assassin dans les 3 autres directions quoi)