[JS] animations
Atropa
Messages postés
1940
Date d'inscription
Statut
Membre
Dernière intervention
-
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai fait quelques animations en javascript.
Quand je les lance sur une page vierge elle sont fluide et ça ne pose aucun problème
mais une fois intégré à un site elles se mettent a saccader, les fonctions passée à setInterval ne s'exécutent que tout les 50 à 100 ms alors que la fréquence passé en argument à setInterval et en générale de 10ms.
pour une animation lente ce n'est pas vraiment grave mais quand l'animation doit durée 250ms ça devient très ennuyeux. au lieu de boucler 10 à 15 fois ça ne le fait que 4 ou 5 et avec des blocages.
Je voudrais savoir de quoi peut venir ces ralentissements. et quels moyens peuvent être mis en place pour les prévenir
Merci d'avance
J'ai fait quelques animations en javascript.
Quand je les lance sur une page vierge elle sont fluide et ça ne pose aucun problème
mais une fois intégré à un site elles se mettent a saccader, les fonctions passée à setInterval ne s'exécutent que tout les 50 à 100 ms alors que la fréquence passé en argument à setInterval et en générale de 10ms.
pour une animation lente ce n'est pas vraiment grave mais quand l'animation doit durée 250ms ça devient très ennuyeux. au lieu de boucler 10 à 15 fois ça ne le fait que 4 ou 5 et avec des blocages.
Je voudrais savoir de quoi peut venir ces ralentissements. et quels moyens peuvent être mis en place pour les prévenir
Merci d'avance
A voir également:
- [JS] animations
- Convertir powerpoint en pdf avec animations ✓ - Forum PDF
- Arrondi js - Forum Javascript
- Voici une présentation avec des animations. quand on lance le diaporama, quels fruits descendent du haut de l’écran ? ✓ - Forum LibreOffice / OpenOffice
- Js arrondir - Forum Webmastering
- Animations qui s'enchainent toutes seule - Forum Powerpoint
4 réponses
Il y a probablement d'autres animations qui entrent en concurrence et qui limitent les ressources CPU disponibles. Ca peut être d'autres Javascripts, du Flash, etc. Il faut peut-être aussi regarder les performances de ton script, il est peut être possible de l'optimiser.
merci pour cette réponse.
il n'y a pas d'autre scripts ni de flash qui se lance en mêmes temps.
pour ce qui est de l'optimisation de ce code j'ai fait de mon mieux...
je viens de découvrir ça : https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
mais j'ai testé en déplaçant des images avec cette fonction et setInterval sur une page vierge et je ne remarque pas vraiment de différence significative au niveau de la fluidité et des ressources utilisé.
il s'agit d'une galerie d'image assez simple.
les données sont récupéré en json par un xhr synchrone et les miniatures sont disposé sous forme de dalle en background dans des div. sur c'est div il y a un transition css au passage de la souris sur la propriété box-shadow (qui n'est pas tres fluide non plus)
ensuite au clique sur une de c'est image la fonction qui pose probleme:
ca crée une light box en js et ca la fait passer d'un scale 0 au position du curseur à un scale 1 au centre de l'écran ainsi que l'opacité de 0 à 1 en 250ms. (4 à 6 étapes dans le site contre 10 à 16 sur une page vierge)
à la fermeture le la box il n'y a pas de problème, mais là je fais juste passer la box de scale 1 à 0 et l'opacité de 1 à 0 également et les 2 fonctions sont quasiment identique.
en fait il y a aussi les transitions css qui sont lentes et le scroll vertical sur certaines pages
mes pages n'ont aucunes erreurs ni avertissement au test w3c et le css est également valide.
il n'y a pas d'autre scripts ni de flash qui se lance en mêmes temps.
pour ce qui est de l'optimisation de ce code j'ai fait de mon mieux...
je viens de découvrir ça : https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
mais j'ai testé en déplaçant des images avec cette fonction et setInterval sur une page vierge et je ne remarque pas vraiment de différence significative au niveau de la fluidité et des ressources utilisé.
il s'agit d'une galerie d'image assez simple.
les données sont récupéré en json par un xhr synchrone et les miniatures sont disposé sous forme de dalle en background dans des div. sur c'est div il y a un transition css au passage de la souris sur la propriété box-shadow (qui n'est pas tres fluide non plus)
ensuite au clique sur une de c'est image la fonction qui pose probleme:
ca crée une light box en js et ca la fait passer d'un scale 0 au position du curseur à un scale 1 au centre de l'écran ainsi que l'opacité de 0 à 1 en 250ms. (4 à 6 étapes dans le site contre 10 à 16 sur une page vierge)
à la fermeture le la box il n'y a pas de problème, mais là je fais juste passer la box de scale 1 à 0 et l'opacité de 1 à 0 également et les 2 fonctions sont quasiment identique.
en fait il y a aussi les transitions css qui sont lentes et le scroll vertical sur certaines pages
mes pages n'ont aucunes erreurs ni avertissement au test w3c et le css est également valide.
sur différent navigateur mais pas différentes versions de chaques
sur ie je n'ai pas le problème, c'est sur firefox et chrome que je le rencontre.
je viens de regarder sur safari et c'est pire que tout. 2 à 3 boucle et ce n'est pas la seule fonction d'animation qui pose problème...
Après ce site n'as pas besoin d'être compatible avec les anciens navigateurs. un message invite les visiteurs a mettre à jour leur navigateur si il est ancien et c'est très bien comme ça.
mes fonctions ressemblent à ça :
sur ie je n'ai pas le problème, c'est sur firefox et chrome que je le rencontre.
je viens de regarder sur safari et c'est pire que tout. 2 à 3 boucle et ce n'est pas la seule fonction d'animation qui pose problème...
Après ce site n'as pas besoin d'être compatible avec les anciens navigateurs. un message invite les visiteurs a mettre à jour leur navigateur si il est ancien et c'est très bien comme ça.
mes fonctions ressemblent à ça :
function anim() {
var o = document.getElementById('id');
var timeS = Date.now();
var duration = 250;
var ind;
var inter = setInterval(function() {
ind = (Date.now - timeS) / duration;
if(ind > 1) ind = 1;
/* --------
Animation de l'élement o par exemple
o.style.opacity = ind;
------ */
if(ind == 1) {
clearInterval(inter);
}
},10);
}
Je suis d'accord ^^
Version, c'est pour savoir si elels étaient bien à jours, c'est sur qu'on ne teste pas toutes les version :p
Pour ton problème je ne sais pas vraiment, avec firefox, un CTRL + MAJ + K permet d'obtenir un outils plutot sympa qui donne les temps de chagement de pas mal de truc:)
essaie de voir par la meme occasion si y'a des erreurs
je peux pas t'en dire plus, mais bonne chance !
Version, c'est pour savoir si elels étaient bien à jours, c'est sur qu'on ne teste pas toutes les version :p
Pour ton problème je ne sais pas vraiment, avec firefox, un CTRL + MAJ + K permet d'obtenir un outils plutot sympa qui donne les temps de chagement de pas mal de truc:)
essaie de voir par la meme occasion si y'a des erreurs
je peux pas t'en dire plus, mais bonne chance !
