[JS] animations Fermé

Question

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

productif · Answer

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.

Atropa · Answer

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.

Freedomsoul · Answer

Question bête mais as-tu fait les testes sur différents navigateurs ?
Versions ?

Atropa · Answer

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 :

	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);
	}

[JS] animations

4 réponses

Discussions similaires