IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Animation pause et stop


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre expérimenté
    Avatar de crozet.magenta
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2012
    Messages
    208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2012
    Messages : 208
    Par défaut Animation pause et stop
    Bonjour,
    J'ai une fonction anime qui produit une animation en s'appelant elle même
    de cette forme :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function anime(){
     diverses commandes;
     anime();
    }

    est-il possible de faire une fonction pour stopper l'animation (sortir de la "boucle") et une autre pour la mettre en pause à l'endroit où elle en est puis reprendre à l'appui sur une touche du clavier ?

    Merci d'avance pour vos réponses

  2. #2
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    Si tu codes de cette manière, tout ton CPU va passer dans animate. Outre que cela risque de fortement ennuyer l'utilisateur (et le navigateur), c'est inutile puisque ta boucle d'animation sera exécutée bien plus souvent que nécessaire.
    En général, un résultat de 60 frames/secondes est un bon résultat, sans saccade. Ce qui veut dire que tu veux exécuter ta fonction anime() 1000/60 fois par seconde. Pour cela, tu peux demander, à la fin de ta fonction anime(), à ce qu'elle soit exécutée à nouveau passé un certain délai:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function anime(){
     diverses commandes;
     setTimeout(
      function (e) {
       anime();          
      }, 1000 / 60);
    }
    Pour gérer les pauses, le principe est de gérer un booléen qui t'indique si ton jeu est en pause ou non, et de ne pas exécuter la fonction anime() si c'est le cas.

    Note:
    Je n'entre pas dans le détail de requestAnimationFrame(), une nouveauté HTML5 qui permet de gérer plus finement l'exécution de la boucle d'animation

  3. #3
    Membre expérimenté
    Avatar de crozet.magenta
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2012
    Messages
    208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2012
    Messages : 208
    Par défaut
    Merci pour ta réponse très rapide
    je note ton conseil pour le framerate et je vais essayer de m'en souvenir

    concernant la pause, si j'ai bien compris ça donnerait un truc dans ce genre
    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 pause_switch(){
        if(pause == false) pause = true;
        else pause = false;
    }
     
    function anime(){
        diverses commandes;
        while(pause);
        setTimeout(
          function (e) {
           anime();          
        }, 1000 / 60);
    }

    et pour le stop je mets
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    if(stop) setTimout(function(e) {anime();},1000/60);
    ou il existe un moyen de stopper l'exécution d'une fonction ?

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Je suis toujours ému quand je vois une boucle infinie !

    Plus sérieusement, une animation ne se gère en aucun cas avec des boucles mais avec des timers.
    Quelques mots clé : requestAnimationFrame, setTimeout, clearTimeout, setInterval, clearInterval.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    Quand l'utilisateur demande une pause, tu peux attendre la prochaine exécution de ta boucle d'animation pour mettre en oeuvre la pause, vu que c'est fait n fois par seconde.
    Donc tu auras un écouteur d’évènement clavier qui va juste inverser ton booléen (donc appeler pause_switch()) et ta boucle d'animation n’appellera le setTimeout() que si l'on n'est pas en pause.
    En tous cas ça me parait une bonne piste de départ.

  6. #6
    Membre expérimenté
    Avatar de crozet.magenta
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2012
    Messages
    208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2012
    Messages : 208
    Par défaut
    ok donc si j'ai bien compris ça donnerait un truc du genre de ça dans la fonction pause_switch :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function pause_switch(){
        if(pause == false) {
          pause = true;
          time = 10000000;
        }
        else {
          pause = false;
          time = 1000/60;
        }
    }

    et la variable time est utilisée dans la fonction setTimeout

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Euh... non, tu n'as rien compris...

    Tu n'as pas besoin de modifier time, juste de donner la bonne valeur à pause :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function pause_switch(){
        pause = !pause;
        if(!pause){
            anim();
        }
    }
    puis dans anim(), appeler ou non setTimeout() selon la valeur de pause !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [openAL] Comment faire pause et stop ?
    Par Electroniktor dans le forum Bibliothèques
    Réponses: 2
    Dernier message: 01/07/2009, 11h29
  2. Animation rejouée malgré stop()
    Par lemilig dans le forum Flash
    Réponses: 10
    Dernier message: 15/06/2007, 09h45
  3. Créer une barre de progression avec "stop/pause"
    Par davos56 dans le forum Delphi
    Réponses: 7
    Dernier message: 22/05/2007, 17h59
  4. Réponses: 5
    Dernier message: 19/07/2006, 19h36
  5. [FLASH MX] Faire une pause dans l'animation
    Par transistor49 dans le forum Flash
    Réponses: 9
    Dernier message: 13/06/2006, 18h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo