[Snap.svg] Optimisation animation

**Archimède** · 14/03/2021, 12h31

Salut, voilà, j'ai besoin d'un petit conseil. Je me suis lancé dans des aminations et je trouve que c'est un peu poussif dans la fluidité (surtout sur ff). Ici, j'ai commencé à reprendre un truc que j'avais fait en delphi, il y a une bonne dizaine d'années...
Le but est de faire un lâcher de balle à vélo et de tracer la trajectoire de la balle (entre autres)... Donc il va falloir que je rajoute un tableau des positions de la balle et faire un polyline pour le tracé qui va encore bien faire plomber l'animation...
Sur une précédente animation, j'avais précalculé mes positions avant d'animer et je faisais un polyline à chaque frame avec un slice sur mon tableau pour ne retenir que les positions correspondantes.
ça n'a pas amélioré outre mesure la fluidité de l'animation...

Je me demande si j'utilise la bonne méthode pour animer. Faut-il que j'utilise la fonction intégrée animate() sur mes objets plutôt que de procéder comme ci-dessous...
animate fait une animation sur une durée précise et on fixe le point d'arrivée... ce qui n'est pas très pratique (d'autant plus qu'il faut faire recommencer l'animation à chaque fois)

Code HTML :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
     <style>
    html, body {margin: 0;padding: 0;background: Skyblue;  }
     
     #stage{
         background :#101010;
     }
    </style>
   <script src="snap.svg-min.js"></script>
</head>
<body>
 <svg width="100%" height="auto" viewBox="0 0 1000 350"  id="stage"></svg>
<script>
    var paper= Snap("#stage");
    
    class Roue{
        constructor(cx,cy,R){ 
          this.cx = cx || 0;
          this.cy = cy || 0;
          this.R = R || 100;
          this.snapgroup = this.createRoue();
        }
        
        createRoue(){
            let group=paper.g();
            let cercle=paper.circle(this.cx,this.cy,this.R).attr({
                'stroke-width' :3,
                 stroke: '#00FF00',
                 fill:'none'});
            group.add(cercle);
            let rayon=[];
            for (let i=0;i<=8;i++) {
                rayon.push(paper.line(this.cx,this.cy,this.cx+this.R,this.cy).attr({'stroke-width' :2,stroke: 'white'}) );
                rayon[i].transform('r'+(45*i)+','+(this.cx)+','+(this.cy)  );
                group.add(rayon[i]);
            }  
            return group;  
        } 
    }
    var rouearriere = new Roue(52,236,50);
    var roueavant = new Roue(218,236,50);
    var velo=paper.image('cadre.svg',15,10,204,255);
    let sol=paper.line(0,288,1000,288).attr( {'stroke-width' :3, stroke: 'white'} ); 
    var balle= paper.circle(225,25,15).attr({
       fill:'yellow'
    });
    var bicycle=paper.g(roueavant.snapgroup,rouearriere.snapgroup,velo,balle);
  
    const f=0.25;  //tr/s
    const ftp=60; //images/s
    const deg=180/Math.PI;
    
     var tau=1/ftp;
     var omega=2*Math.PI*f;
     var theta=0,frame=-1;
   
    
    function anime(){
        frame++;
        if (roueavant.R*theta>1000) frame=0;
        theta=omega*tau*frame;
        bicycle.transform('t'+ ( roueavant.R*theta) );
        roueavant.snapgroup.transform('r'+(theta*deg)+','+ 218 +','+ 236 );
        rouearriere.snapgroup.transform('r'+(theta*deg)+','+ 52 +','+ 236 );
  
        window.requestAnimFrame(anime);
     }
    window.requestAnimFrame = (function(){
    return window.requestAnimationFrame       || 
           window.webkitRequestAnimationFrame || 
           window.mozRequestAnimationFrame    || 
           window.oRequestAnimationFrame      || 
           window.msRequestAnimationFrame     || 
 
           function(callback){                 
              window.setTimeout(callback, 1000*tau);
           };
     })();      
     anime();      
</script>
 
</body>

[Snap.svg] Optimisation animation

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager