Impossible d'arrêter une animation
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:
1
2
3
| .paused-animation {
animation-play-state: paused !important;
} |
et dans le script
Code:
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:
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:
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....
