Fluidifier une animation en javascript
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:
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
