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 ?
Merci d'avance.
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>
Philippe
Partager