Discussion :

[axolotl_1]

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