Impossible d'arrêter une animation

**axolotl_1** · 29/05/2023, 12h07

Je programme un jeu pour enfants où des crocodiles se baladent en bas de l'écran: ils rentrent et ressortent par les bords droit et gauche.

pour avoir le contrôle et mettre en pause ou reprendre l'animation à volonté, il y aurait 2 moyens==>
Ajouter un CSS par

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
      .paused-animation {
  animation-play-state: paused !important;
}

et dans le script

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function pauseAnimation() {
  animationPaused = true;
  crocodile2.classList.add("paused-animation");
 
  setTimeout(function() {
    animationPaused = false;
    crocodile2.classList.remove("paused-animation");
    currentPosition += 1;
  }, 2000);
}

Normalement la fonction setTimeout attend 2000 msec avant de reprendre l'animation
Pour reprendre et updater avec currentPosition mesurant la position du crocodile et targetPosition l'endroit où il doit s'arrêter==>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function updateAnimation() {
  if (!animationPaused) {
    // Mettre à jour la position de l'animation
    // ...
        if (Math.abs(currentPosition) >= Math.abs(targetPosition) - 10) {
      pauseAnimation();
    } else {
// Vérifier si l'animation doit être mise en pause
currentPosition+=3;
  }
  }
requestAnimationFrame(updateAnimation);
}

Ça ne marche pas!! L'autre méthode consisterait à jouer sur les instances==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
crocodile2.style.animationPlayState = "paused";
//...
crocodile2.style.animationPlayState = "running";

Ça ne marche pas non plus: jusqu'ici j'ai été incapable de trouver le moyen optimum d'arrêter puis reprendre une animation là où elle était.
Si vous avez des idées....

**ASCIIDEFOND** · 29/05/2023, 16h07

Salut axolotl_1,

Et comme ça ?

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
crocodile2.style.cssText  = "animation-play-state: paused;"
crocodile2.style.cssText  = "animation-play-state: running;"

**axolotl_1** · 29/05/2023, 17h57

J'ai essayé ces 4 instructions censées plus ou moins arrêter l'animation==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (currentPosition >= targetPosition) {
  isMovingLeft = false;
  cancelAnimationFrame(crocodile1AnimationId); // Utilisez l'identifiant de l'animation pour l'annuler
  crocodile1.style.transitionDuration = "2s"; // Ajoutez une transition de 2 secondes pour la fluidité
  crocodile1.style.animationPlayState = 'paused';
  crocodile1.style.animation = "none";
  crocodile1.style.animation_play_state = 'paused';
  crocodile1.style.right = currentPosition + "px";
 
 
    setTimeout(function() {
    console.log("Je passe dans setTimeout après 2 secondes");
    crocodile1.style.transitionDuration = ""; // Réinitialisez la durée de transition à sa valeur par défaut
}, 2000);

Ceci devrait immobiliser l'animation pendant 2 secondes mais aucune ne marche visiblement.
À moins qu'ailleurs dans mon programme il y ait une interférence mais la console marque bien "Je passe dans setTimeout après 2 secondes".
Ou alors comme je suis sur un MacBook 2014 avec Mojave, la version de Javascript date un peu trop, la version de Safari étant trop ancienne ?
Normalement il devrait exécuter ces instructions séquentiellement donc arrêter le croco pendant 2 secondes ce qu'il ne fait pas.
aucune de toutes ces instructions n'arrive à le stopper.