[Snap.svg] Utiliser mina.bounce

**Archimède** · 08/04/2021, 18h21

En regardant télé matin un autre jour, j'avais voulu me faire une petite horloge svg...
Le problème est qu' à 270° pour la trotteuse soit (45 s), ma transition plante comme si l'angle balayé était grand...Or par rapport à la position précédente, il n'est qu'à 6°...
J'ai l'impression que la fonction fin soit anime() ici-->(fonction récursive) dans animate démarre avant la fin de la transition... et il doit y avoir une valeur non définie pour l'angle à balayer qui devient très grand...d'où l'effet observé...
Plutôt que de long discours, voilà le problème :

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
 
<!DOCTYPE html>
 
<html>
<head>
    <title>horloge</title>
    <style>
         html, body {margin: 0;padding: 0;background: #87CEEB;}
     
     #horloge{
          position:absolute;
          top:50%;
          left:50%;
          width:40%;
          height:auto;
          transform:translate(-50%, -50%);
      }
    </style>
    <script src="snap.svg-min.js"></script>
</head>
<body>
   <svg viewBox="0 0 100 100" id="horloge"></svg>
   <script>
     var paper= Snap("#horloge");
     var seconde,minute,heure;
     var s,mn,h;
     
     
     function now(){
      let date = new Date();
       s = date.getSeconds();
       mn = date.getMinutes();
       h = date.getHours()%12; 
     }
     
     function calage_h_min(){
       minute.transform(`r${6*mn+s/10},50,50`);
       heure.transform(`r${30*h+mn/2+s/120},50,50`);
     }
     
     function initHorloge(){
           let attribute={'stroke-width' :2,stroke: 'white'};
           paper.circle(50,50,45).attr({
             'stroke-width' :3,
              stroke: 'white',
              fill:'none'
           });
        
           minute= paper.line(50,20,50,50).attr(attribute);
           heure=paper.line(50,26,50,50).attr(attribute);
           now();
           calage_h_min();
           paper.circle(50,50,3).attr('fill','white');
           seconde=paper.line(50,15,50,50).attr({
            'stroke-width' :1,
             stroke: 'red'
           }).transform(`r${6*s},50,50`);
           paper.circle(50,50,1.5).attr('fill','red');
    
         let grad=paper.g();
         for (let i=0 ; i<4 ;i++){
           grad.add( paper.circle(50,10,2).transform(`r${90*i},50,50`) );
         }
         
         for (let j=0 ; j<14 ;j++){
           grad.add( paper.circle(50,10,1).transform(`r${30*j},50,50`) );
         }
         grad.attr('fill','white');
         anime();
     }
 
     function anime(){
      now();
      calage_h_min();
      seconde.animate({transform:`r${6*s},50,50`},1000,mina.bounce,anime);//Pour 270°, ça plante
     }
    window.addEventListener('load',initHorloge);
   </script>
</body>
</html>

Mon but n'est pas de faire ça en pur CSS mais avec snap svg... et mina.bounce.

Merci pour vos lumières.

Remarque: je viens de faire un essai sans la transition mina.bounce, j'ai le même problème...donc rien à voir mais la fonction anime() doit tout de même redémarrer avant la fin de la rotation pour engendrer ce bug...

En fait, il faudrait que je sois synchro entre le démarrage de l'animation et le début d'une nouvelle seconde et de plus, que les 1000 ms de animate soient équivalentes à la seconde de now. Ce n'est pas gagné...

**mathieu** · 08/04/2021, 20h36

d'après ce que j'ai trouvé, c'est un bug de la version 0.5.1 et qui a été corrigé dans la version 0.5.2
https://github.com/adobe-webplatform...svg/issues/603

le souci c'est que la version 0.5.2 et marquée "en cours de développement" depuis plus de 4 ans donc c'est possible qu'en l'utilisant vous allez rencontrer d'autre soucis qui sont en cours de correction :
https://github.com/adobe-webplatform.../tree/dev/dist

**Archimède** · 08/04/2021, 20h49

Bien vu...
Je teste, ce n'est pas cool...

Merci pour votre réponse :

**Archimède** · 08/04/2021, 21h55

le souci c'est que la version 0.5.2 et marquée "en cours de développement" depuis plus de 4 ans donc c'est possible qu'en l'utilisant vous allez rencontrer d'autre soucis qui sont en cours de correction

En effet, je n'ai plus de souci sur 270° mais à 0°, l'aiguille retourne à 360° dans le sens trigo et repart de nouveau à 0° dans le sens normal...
Dommage, je l'aimais bien cette bibliothèque... Je comprends mieux pourquoi ça saccade un peu sur ma roue dans un ancien post...

**mathieu** · 08/04/2021, 22h36

ah oui c'est encore pire.

avec la version 0.5.1, j'ai trouvé un bricolage qui fait que l'aiguille de 45 secondes se place un tout petit peu avant donc il n'y a pas le bug d'animation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
			let r = 6 * s;
 
			if (270 === r) {
				r -= 0.0000001;
			}
 
			seconde.animate({"transform" : `r${r},50,50`}, 1000, mina.bounce, anime);

**Archimède** · 08/04/2021, 23h02

Merci, on est obligé de bidouiller... Moi, je me suis dit qu'il fallait que je continue au delà de 360° pour éviter le bug sur la nouvelle version pour le retour à 0°... donc j'ai bidoullé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

r${6*s+360*mn}

A chaque minute supplémentaire, on a le retour à 0 donc l'astuce est de rajouter un multiple de 360 fonction de mn comme ça je contourne le problème et ça marche aussi.
Je regarde ta proposition demain... Merci pour ta réponse.

**Archimède** · 09/04/2021, 09h09

Merci, en effet ta bidouille fonctionne parfaitement... Pour la mienne, hier soir, je n'avais pas pensé au changement d'heure qui fait retomber les minutes à zéro... après il y a toujours une solution... mais il serait peut-être préférable de contacter l'auteur pour lui exposer le problème, car il n'avait sans doute pas pensé qu'une réinitialisation de l'angle causerait ce type de bug...Il est vrai qu'avec une augmentation continuelle de celui-ci, son correctif fonctionne...
Ceci dit mon animation n'est pas satisfaisante sans synchronisation de l'intervalle animate avec les secondes de now. Il faudrait se passer de animate mais c'est aussi se passer de la transition mina.bounce et le faire en CSS...

[Snap.svg] Utiliser mina.bounce

JavaScript

Discussions similaires

Partager

Partager