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
