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 javascript lente


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut Animation javascript lente
    Bonjour, j'essai de faire une animation de l'échelle de 2 DIV en meme temps. J'ai crée une fonction qui marche mais c'est un peu lent je voudrai savoir si quelqu'un pouvait me donner son avis. Voici le code:

    Le HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="DIVA" style="width:636px;position:absolute;top:130px;left:250px;background-color:darkgray;-moz-transform:matrix(1,0,0,1,0,0);-webkit-transform:matrix(1,0,0,1,0,0);-ms-transform:matrix(1,0,0,1,0,0);-o-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);"></div>
    <div id="DIVB" style="width:636px;position:absolute;top:450px;left:250px;background-color:darkgray;-moz-transform:matrix(0.5,0,0,0.5,0,0);-webkit-transform:matrix(0.5,0,0,0.5,0,0);-ms-transform:matrix(0.5,0,0,0.5,0,0);-o-transform:matrix(0.5,0,0,0.5,0,0);transform:matrix(0.5,0,0,0.5,0,0);"></div>
    <div id="bouton" style="position:absolute;height:100px;width:75px;background-color:yellow; right:0px;top:0px;border:1px solid"></div>

    LE JAVASCRIPT

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    for (var i=1;i<50;i++) {
    	var t=document.createElement("DIV");
    	t.className="DIVAx";
    	t.innerHTML=i;
    	document.getElementById("DIVA").appendChild(t);
            document.getElementById("DIVB").appendChild(t);
    }
     
    var courbes = {
    	sin:function (s) {return Math.sin(Math.PI*s/2)}
    }
     
    var Q = {
            timers:[null,null],
            iD:function (t) {return document.getElementById(t);},
    }
     
    function retrieveScale(q,what) {
    	var elem=q.iD(what);      
            //switch fonction du navigateur enlevé pour gagner de la place
            if (elem.style.webkitTransform) {var sw=1;}
            if (parseFloat(elem.style.webkitTransform.substr(7,1))==0) {   //l'input est du type "matrix(X,0,0,Y,0,0)" si X est 0.5 ca va chercher le .5 sinon ça prend que X
    		var sinit=parseFloat(elem.style.webkitTransform.substr(7,3));
    	}
    	else {
    		var sinit=parseFloat(elem.style.webkitTransform.substr(7,1));
    	}
            return [sinit,sw];//renvoie la scale initiale et le type de navigateur (pour MozTransform,msTranform,webkitTransform.....)
    }
     
    function incDec(q,what,What) {
    	var sinitA=retrieveScale(q,what)[0];
    	var s=retrieveScale(q,What);
    	var sinitB=s[0];
    	var sw=s[1];
    	if (sinitA<1) {
    		change_scale(q,what,400,1,0,sw,sinitA);//le 0 pour définir le 1er timer de Q.timers
    		change_scale(q,What,600,0.5,1,sw,sinitB);//le 1 pour définir le 2er timer de Q.timers
    	}
    	else {
    		change_scale(q,what,400,0.5,0,sw,sinitA);
    		change_scale(q,What,600,1,1,sw,sinitB);
    	}
    }
     
    function change_scale(q,what,idur,sfinal,o,sw,sinit) {
    	var t0=new Date()*1;
    	var elem=q.iD(what);
    	var howmuch=sfinal-sinit;
    	var dlta=0;
    	if (!q.timers[o]) {
    		q.timers[o]=setInterval(
    			function () {
    				var tx=new Date()*1-t0;
    				if (tx<idur) {
    					var icur=courbes.sin(dlta);
    					dlta=dlta+13/idur;	
    					elem.style.webkitTransform="matrix("+(sinit+howmuch*icur)+",0,0,"+(sinit+howmuch*icur)+",0,0)";
                                            //switch fonction du navigateur supprimé pour gagner de la place
    				}
    				else {
    					elem.style.webkitTransform="matrix("+sfinal+",0,0,"+sfinal+",0,0)";
                                            //switch fonction du navigateur supprimé pour gagner de la place
    					clearInterval(q.timers[o]);
    					q.timers[o]=false;
    				}
    			},10);
    		}
    	}
     
            document.getElementById("bouton").onclick=function() {incDec(Q,"DIVA","DIVB");}

    Donc j'ai enlevé le détection de navigateur donc ça devrait marcher seulement sur chrome et safari.

    Voila je n'arrive pas à le rendre vraiment fluide, je ne sais pas si c'est à cause d'un PC trop lent ou si c'est un problème de réglage du setInterval. Est-ce que quelqu'un saurait m'aider à l'améliorer ??

    (EDIT: ça à l'air de marcher plutot bien avec MozTransform sur mozilla et msTransform sur IE10 mais chrome/safari reste assez saccadé...)

    Merci

  2. #2
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    J'ai voulu tester pour voir combien de fois la fonction est executé: j'ai créer un string que j'incrémente à chaque exécution et voila ce que ça donne:

    Avec IE10 ou mozilla

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    0.02 | 0.02 | 0.07 | 0.07 | 0.102 | 0.104 | 0.136 | 0.136 | 0.136 | 0.136 | 0.168 | 0.168 | 0.202 | 0.202 | 0.202 | 0.202 | 0.234 | 0.234 | 0.268 | 0.268 | 0.268 | 0.268 | 0.302 | 0.302 | 0.334 | 0.334 | 0.334 | 0.334 | 0.37 | 0.37 | 0.402 | 0.402 | 0.402 | 0.402 | 0.436 | 0.436 | 0.47 | 0.47 | 0.47 | 0.47 | 0.502 | 0.502 | 0.536 | 0.536 | 0.536 | 0.536 | 0.568 | 0.568 | 0.602 | 0.602 | 0.602 | 0.602 | 0.634 | 0.634 | 0.668 | 0.668 | 0.668 | 0.668 | 0.7 | 0.702 | 0.82 | 0.82 | 0.94 | 0.942 | 0.982 | 0.982 | 0.982 | 0.982 |
    Avec Chrome ou safari

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    0.048 | 0.048 | 0.098 | 0.098 | 0.146 | 0.146 | 0.488 | 0.488 |

    Donc en haut c'est plutot fluide, mais en bas ca avance pas du tout... en fait ça arrive a 50% et ca saute de suite à la taille finale car le temps limite est atteint

    Ya une grosse différence quand meme...

    Est-ce que c'est normal ??

    Merci

  3. #3
    Membre expérimenté

    Profil pro
    Inscrit en
    Juillet 2012
    Messages
    183
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 183
    Par défaut
    Jette ton setInterval TRES moche et utilise requestAnimationFrame, ça sera 100x mieux

    http://paulirish.com/2011/requestani...art-animating/

    Et suis les conseils du monsieur dans cet article ci-dessus. Voilà

    Déjà devrait déjà régler une partie de tes problèmes

  4. #4
    Membre très actif
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Par défaut
    Mais mis à part ça, le code étant testé par les deux navigateurs, on voit bien que c'est différent selon le navigateur, alors est-ce le fait que IE soit pas si proche que ça du standard ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    Citation Envoyé par dragonno Voir le message
    (...) alors est-ce le fait que IE soit pas si proche que ça du standard ?
    Citation Envoyé par aku84 Voir le message
    (EDIT: ça à l'air de marcher plutot bien avec MozTransform sur mozilla et msTransform sur IE10 mais chrome/safari reste assez saccadé...)


    plus sérieusement, et indépendamment de requestAnimationFrame, dans ton code le délai de rappel est peut être un peu faible
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    q.timers[o]=setInterval(
      function () {
        }
      },10);
    il faut peut être laisser le temps au moteur de rendu de bosser.

  6. #6
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    Salut, merci pour les réponses. Je connaissai pas requestanimationFrame je vais essayer mais j'ai regardé et apparemment ce n'est pas encore compatible avec beaucoup de navigateur..

    Sinon je sais que le code est très moche mais c'était un test et je pensai le nettoyer après

    J'ai résolu en partie le problème mais c'est quand meme bizarre: pour que l'animation sur webkit soit meilleure, il faut ajouter du code dans le CSS:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #DIVA {
    	-webkit-transition:all 0.2s linear;
    }
    #DIVB {
    	-webkit-transition:all 0.2s linear;
    	-moz-transition:all 0.2s linear;
    }
    c'est très bizarre surtout qu'en changeant la durée de transition dans le CSS ça change la durée du setInterval. Mais c'est devenu plus fluide

    J'ai refait les meme test mais en changeant les durée (durée 400ms avec un pas de 18ms) donc on peut pas comparer avec le post précédent mais on peu comparer le nombre d'exécution:

    CHROME

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    AVEC CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 0.43 | 0.43 | 0.47 | 0.47 | 0.52 | 0.52 | 0.57 | 0.57 | 0.62 | 0.62 | 0.66 | 0.66 | 0.71 | 0.71 | 0.76 | 0.76 | 0.81 | 0.81 |
     
    SANS CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 |
    SAFARI

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    AVEC CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 0.43 | 0.43 | 0.47 | 0.47 | 0.52 | 0.52 | 0.57 | 0.57 | 0.62 | 0.62 | 0.66 | 0.66 | 0.71 | 0.71 | 0.76 | 0.76 | 0.81 | 0.81 |
     
    SANS CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 |
    MOZILLA

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    AVEC CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 0.43 | 0.43 | 
     
    SANS CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 0.43 | 0.43 | 0.47 | 0.47 | 0.52 | 0.52 |

    IE10

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    AVEC CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 
     
    SANS CSS
    0 | 0 | 0.05 | 0.05 | 0.1 | 0.1 | 0.14 | 0.14 | 0.19 | 0.19 | 0.24 | 0.24 | 0.28 | 0.28 | 0.33 | 0.33 | 0.38 | 0.38 | 0.43 | 0.43 |
    DONC pour webkit en mettant 1 ligne CSS c'est vraiment mieux. Mais bon, du coup je crois que je vais laisser tomber l'animation de l'échelle car c'est quand meme trop de code pour un résultat trop moyen je trouve

    EDIT: j'ai refait le meme test en mettant durée du setInterval 10 ms avec un pas de 18 ms, donc la fonction s'execute 1 seul fois a t=0. Du coup le string que j'utilisait pour le test au dessus est vide, mais avec une transition css de 0.5s c'est fluide sur tous les navigateurs. Vraiment bizarre

  7. #7
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    Voici jsFiddle avec le dernier interval à 10ms et CSS:

    http://jsfiddle.net/2KRD5/

  8. #8
    Membre expérimenté

    Profil pro
    Inscrit en
    Juillet 2012
    Messages
    183
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 183
    Par défaut
    Il y a plus simple que les switch-case tu sais ?
    http://jsfiddle.net/2KRD5/2/

  9. #9
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    Non je ne connais pas très bien la syntaxe de la fonction que tu as rajouté donc je n'ai pas pensé à faire comme ça.

    D'ailleurs c'est pour ça que je postai ici parce que je trouvai le code un peu lourd.

    Et cette méthode est beaucoup mieux merci ! Par contre ton fiddle marchait pas car tu prenais en référence le body pour récupérer "transformproperty", or il faut déclarer une scale dans le HTML pour ne pas avoir "undefined" (c'est pour ça que il y a un gros paté de "style" dans le HTML de DIVA). Et l'argument "transformproperty" n'était pas passé dans les fonctions suivantes.

    Je l'ai corrigé: http://jsfiddle.net/2KRD5/3/

  10. #10
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    Salut, j'ai trouvé une alternative au setInterval en utilisant le CSS:

    J'ai aussi vu qu'on pouvait faire ça en CSS avec les liens hypertexte et la propriété target qui marche très bien mais je ne peut pas l'utiliser car cette méthode change le hash: elle rajoute un "#quelquechose" à la suite de l'url


    http://jsfiddle.net/SPh5b/

    si vous deviez utiliser ça vous utiliseriez quelle méthode ? le setInterval ou changement de classe CSS ?

    Merci

  11. #11
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    J'ai pu modifier le code pour ne plus avoir de hash en dehors de cette animation, du coup je peux utiliser des lien hypertexte avec href pour cibler les div. Voici l'exemple. C'est cette méthode qui prend le moins de code:

    http://jsfiddle.net/Uk5ER/

    Par contre la propriété css box-shadow appliquée à tous les éléments fais ramer IE10 et firefox, c'est beaucoup mieux sans mais moins joli :'(

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    J'ai aussi vu qu'on pouvait faire ça en CSS avec les liens hypertexte et la propriété target qui marche très bien mais je ne peut pas l'utiliser car cette méthode change le hash: elle rajoute un "#quelquechose" à la suite de l'url
    il faut regarder du coté de la pseudo-class :checked.

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

Discussions similaires

  1. insérer animation javascript
    Par perloutta dans le forum ASP.NET
    Réponses: 2
    Dernier message: 15/04/2009, 14h38
  2. [DOM] adapter une animation javascript au navigateur firefox
    Par nadiaflamingenierie dans le forum Général JavaScript
    Réponses: 26
    Dernier message: 04/03/2009, 10h52
  3. adapter une animation javascript au navigateur IE
    Par bouzakher dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/02/2009, 11h17
  4. Réponses: 3
    Dernier message: 05/06/2007, 17h01
  5. Réponses: 2
    Dernier message: 09/03/2007, 16h52

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