Fluidifier une animation en javascript

**filtep** · 03/05/2014, 17h24

Bonjour � tous,

j'ai fait un petit bout de code pour ins�rer une animation sur un site que je r�alise. Malheureusement l'animation est saccad�e ce qui est plut�t d�sagr�able.
J'ai bien essay� dans le <style> de mettre une transition: pas mieux...
Quelqu'un aurait-il une id�e pour am�liorer tout �a ou suis-je carr�ment sur la mauvaise piste et dans ce cas comment faire autrement ?

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
<!DOCTYPE html>
<html>
<head>
<script>
i=0;
 
function cercle(){
if(i>=2){i=0;
return;}
 
i+=0.03333;  //30 images secondes pdt 2 sec. soit 60 images pour passer de 0 à 2PI => 2/60=0.0333
angle=i*Math.PI;
x=200+(100*Math.cos(angle));
y=200+(100*Math.sin(angle));
document.getElementById('point').style.left=x+"px";
document.getElementById('point').style.top=y+"px";
 
setTimeout('cercle()',33);  // 60 * 33ms <> 2 sec.
}
</script>
<style>
<!-- -moz-transition-property:all;
-moz-transition-duration:33ms;
-webkit-transition-property:all;
-webkit-transition-duration:33ms;
-o-transition-property:all;
-o-transition-duration:33ms;
-ms-transition-property:all;
-ms-transition-duration:33ms;
transition-property:all;
transition-duration:33ms; -->
</style>
</head>
<body>
<img alt="" src="point.png" id="point" style="position:absolute; left:300px; top:200px;" />
<p style="cursor:pointer;" onclick="cercle();">Lancer l'animation</p>
</body>
</html>

Merci d'avance.
Philippe

**SylvainPV** · 03/05/2014, 18h08

Bonjour,

Les transitions CSS vont faire pire que mieux, car tu calcules des interpolations toutes les 33ms... Tout d'abord utilises requestAnimationFrame au lieu de setTimeout : https://developer.mozilla.org/fr/doc...AnimationFrame

Ensuite mets en m�moire � l'ext�rieur de la fonction d'animation tout ce que tu peux : ton �l�ment #point par exemple.

Enfin quand tu assignes left puis top, l'�l�ment doit �tre redessin� deux fois. Fais les deux assignements en une seule �tape, avec setAttribute("style") par exemple.

**filtep** · 03/05/2014, 18h42

Merci Sylvain,
je vais regarder ton lien
pour setAttribute, je dois �crire

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

im=document.getElementById('point')  // en dehors de la fonction

puis dans la fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

im.setAttribute("style.top","y+'px' ") et im.setAttribute("style.left","x+'px' ")

?
Dans ce cas l'attribution prend �galement 2 �tapes non?

A+
philippe

**Watilin** · 03/05/2014, 19h53

Salut,

tu te m�langes les pinceaux. Les transitions CSS servent � faire tout le travail d'animation � ta place. Si tu veux qu'un objet aille d'un point A � un point B, tout ce que tu as � faire dans le code JavaScript c'est de lui donner un point B (par exemple monObjet.style.left = "200px";). Les �tapes de transition se font toutes seules.

Dans le code que tu as donn�, tu donnes un nouveau point B toutes les 33 ms. Au lieu d'avoir, comme tu le penses, une seule transition qui g�re tous ces points B, tu as en r�alit� une transition diff�rente � chaque fois. Le fait que toutes ces transitions se suivent dans des d�lais de temps aussi courts est peut-�tre la raison des saccades.

Une autre cause possible des saccades c'est ce qu'on appelle l'easing. Il s'agit d'un � adoucissement � de la vitesse de d�placement vers le d�but et la fin de la transition. � cause de cet easing, la vitesse de mouvement n'est pas r�guli�re. Tu peux corriger �a en sp�cifiant transition-timing-function: linear. Pour mieux comprendre les diff�rents types d'easing, vois la page d'exemples du MDN.

La fluidit� d�pend aussi, bien s�r, de la puissance de ton ordinateur. Il faut savoir que setTimeout ne garantit pas l'exactitude du d�lai demand�. Si tu demandes un d�lai de 33 ms, le d�clenchement du timer se fera dans au moins 33 ms. JavaScript �tant historiquement monothread, les appels de timers se font sur le m�me thread que le code � principal � et les �v�nements de l'interface utilisateur. Si le thread est occup� au moment pr�vu (par exemple par un gestionnaire d'�v�nement onclick ou onmousemove ou autre), le d�clenchement est repouss� jusqu'� ce que le thread soit libre. �videmment, si ton processeur est moins puissant, le thread met plus de temps � faire son travail, et il y a plus de chances que le timer tombe sur un moment o� le thread est occup�. John Resig a �crit un article qui explique bien �a (je n'ai pas trouv� de version fran�aise, d�sol�).

Avec les transitions, �a d�pend aussi de la puissance, mais il y a quelques avantages. Le nombre d'images par secondes est ajust� en fonction de la charge du processeur, ou du GPU si l'acc�l�ration mat�rielle est activ�e. Utiliser les transitions (ou animations) CSS est plus int�ressant que du pur JS car la solution JS ne tire pas parti de la puissance graphique. Dans le cas pr�sent, �a risque d'�tre assez compliqu� si tu veux garder tes deux propri�t�s top et left, car elles varient de fa�on synchronis�e mais diff�rente. Je te donne une piste : tu peux y arriver en utilisant rotate.

Si tu d�cides d'opter pour une solution pur JS, je te sugg�re d'utiliser la fonction requestAnimationFrame. En pratique, elle fonctionne un peu comme setTimeout, sauf qu'elle choisit elle-m�me le d�lai adapt� � une animation visuelle tout en s'ajustant � la charge du processeur. L'inconv�nient dans ce cas, c'est que tu ne peux plus contr�ler la dur�e totale de l'animation.

Edit: je n'avais pas vu la r�ponse de Sylvain

Le setAttribute n'est pas utile car les modifications CSS sont toutes prises en compte d'un seul bloc dans le repaint suivant.

**filtep** · 03/05/2014, 20h03

Merci Watilin pour tes explications compl�tes et d�taill�es.

Alors voil� o� j'en suis, sauf que l'animation ne se fait pas (apparemment j'ai un probl�me avec mon setAttribute...)

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
<!DOCTYPE html>
<html>
<head>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
i=0;
 
function cercle(){
if(i>=2){i=0;
return;}
 
i+=0.03333;  //30 images secondes pdt 2 sec. soit 60 images pour passer de 0 à 2PI => 2/60=0.0333
angle=i*Math.PI;
x=Math.round(200+(100*Math.cos(angle)));
y=Math.round(200+(100*Math.sin(angle)));
att="left:"+x+"px; top:"+y+"px;";
//alert(att);
im.setAttribute("style",att);
 
requestAnimationFrame(cercle); 
}
</script>
 
</head>
<body>
<img alt="" src="point.png" id="point" style="position:absolute; 
left:300px; top:200px;" />
<p style="cursor:pointer;" onclick="cercle();">Lancer l'animation</p>
<script type="text/javascript">im=document.getElementById('point');</script>
</body>
</html>

pourtant l'affichage de la variable att semble montrer que ma concat�nation est correcte...

je veux bien encore un peu d'aide SVP

Philippe

**filtep** · 03/05/2014, 20h17

J'ajoute ceci apr�s avoir vu l'edit de Watilin:

Si je n'utilise plus le SetAttribute, �a donne ceci

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
<!DOCTYPE html>
<html>
<head>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
i=0;
 
function cercle(){
if(i>=2){i=0;
return;}
 
i+=0.03333;  //30 images secondes pdt 2 sec. soit 60 images pour passer de 0 à 2PI => 2/60=0.0333
angle=i*Math.PI;
x=200+(100*Math.cos(angle));
y=200+(100*Math.sin(angle));
//att="left:"+x+"px; top:"+y+"px;";
//alert(att);
//im.setAttribute("style",att);
im.left=x+"px";
im.top=y+"px";
requestAnimationFrame(cercle);  // 60 * 33ms <> 2 sec.
}
</script>
 
</head>
<body>
<img alt="" src="point.png" id="point" style="position:absolute; 
left:300px; top:200px;" />
<p style="cursor:pointer;" onclick="cercle();">Lancer l'animation</p>
<script type="text/javascript">im=document.getElementById('point').style;</script>
</body>
</html>

L� l'animation fonctionne, c'est beaucoup plus fluide qu'au d�but mais avec une image c'est pas encore terrible, il n'y a pas un moyen de se synchroniser � la fr�quence de rafraichissement de l'�cran ?

Pour "rotate" je crois que �a va plut�t faire tourner l'image sur elle m�me non ?

philippe

**Watilin** · 03/05/2014, 20h44

Envoy� par filtep

L� l'animation fonctionne, c'est beaucoup plus fluide qu'au d�but mais avec une image c'est pas encore terrible, il n'y a pas un moyen de se synchroniser � la fr�quence de rafraichissement de l'�cran ?

H�las non, du moins pas � ma connaissance.

Envoy� par filtep

Pour "rotate" je crois que �a va plut�t faire tourner l'image sur elle m�me non ?

�a d�pend o� tu places le point transform-origin

Bien que tu aies corrig� le probl�me du setAttribute, je pense que l'explication te para�tra utile : le probl�me venait du fait que tu as d�fini tous les styles de l'image dans son attribut style plut�t que dans une balise <style> ou une feuille de style externe. Du coup, en utilisant setAttribute("style", ...) tu red�finis enti�rement les styles de l'image. Sa r�gle position est �cras�e, et elle se retrouve avec un positionnement par d�faut (static).

D�finir des styles sur les attributs HTML est en g�n�ral consid�r� comme une mauvaise pratique, � cause de ce probl�me et aussi parce que �a complique la maintenance du code. C'est plus pratique d'avoir les codes HTML, JS et CSS bien s�par�s, si possible dans des fichiers distincts.

En parlant de bonnes pratiques, je constate que tu ne d�clares pas tes variables et que ton indentation laisse � d�sirer. Pour l'indentation, �a ne tient qu'� toi� Pour les variables, je te conseille de passer en mode strict, il te donnera pas mal de bonnes habitudes. Apprends aussi � te servir de la console de ton navigateur (touche F12) : tu peux utiliser console.log � la place de alert, tu verras que c'est beaucoup plus agr�able.

**filtep** · 03/05/2014, 23h59

Merci beaucoup pour ces conseils que je vais appliquer d�s aujourd'hui

je progresse pas � pas gr�ce � vous tous.
Merci encore et bonne nuit.

A bient�t
Philippe

**SylvainPV** · 04/05/2014, 12h37

Envoy� par Watilin

Le setAttribute n'est pas utile car les modifications CSS sont toutes prises en compte d'un seul bloc dans le repaint suivant.

Tu es s�r que �a vaut pour tous les navigateurs �a Watilin ? J'avais en t�te que setter les propri�t�s de style en inline une � une �tait une mauvaise pratique.

**Watilin** · 04/05/2014, 16h48

Pour r�pondre simplement � ta question, non je ne suis pas s�r. Mais �a me para�t �vident du point de vue des performances, � la fois du moteur JavaScript et du moteur de rendu.

Cela dit, il y a certaines instructions JavaScript (par exemple un appel � getComputedStyle ou un acc�s � une propri�t� offsetLeft) qui n�cessitent un reflow imm�diat. Dans ce cas, le script est suspendu le temps que le reflow se fasse. Il me semblait avoir lu une page sur le MDN qui expliquait �a mais je ne la trouve plus�

**Bovino** · 05/05/2014, 08h18

Personnellement, j'ai tendance � ne jamais utiliser setAttribute().
Tout d'abord parce que s�mantiquement, cette fonction agit sur le HTML (voire le XML) alors qu'en JavaScript, on travaille sur les objets issus du DOM. Il semble donc pr�f�rable d'utiliser les propri�t�s correspondantes des objets DOM.
Pour ce qui est des styles, effectivement, on peut consid�rer que multiplier les affectations sur HTMLElement.style est une mauvaise id�e, notamment niveau performances puisque chaque affectation force un repaint, mais on oublie trop souvent la propri�t� cssText qui permet d'affecter plusieurs styles en m�me temps.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
HTMLElement.style.cssText = 'prop1:val1; prop2: val2; ...';
HTMLElement.style.cssText += ';prop1:val1; prop2: val2; ...';

Notez l'astuce lorsque vous ajoutez des styles au lieu d'affecter avec le point-virgule au d�but. C'est d� au fait qu'IE renvoie la chaine sans point-virgule final ce qui fait que la concat�nation avec la chaine suppl�mentaire provoquera une erreur d'interpr�tation. Sur les autres navigateurs, on aura un point-virgule doubl�, mais �a, ce n'est pas probl�matique.

**SylvainPV** · 05/05/2014, 09h45

Exact j'oublie toujours cssText, merci Bovino

Fluidifier une animation en javascript

JavaScript

Discussions similaires

Partager

Partager