Discussion :

[skatospag]

Bonjour à tous,

J'ai intégré un script JQuery sur un site qui génère une animation sur un SVG : lien (en dessous du titre : le nouveau process comptable).
J'aimerai faire en sorte qu'il se ré-exécute en permanence pour relancer l'animation mais je n'ai pas la moindre idée de si c'est réalisable et comment.

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
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
<script>
    jQuery(window).scroll(function() {
        if (checkVisible(jQuery('#SvgjsSvg1000')) && !document.querySelector('.path1').style.strokeWidth.length) {
            simulatePathDrawing('.path1');
            setTimeout("addEllipse(document.getElementById('SvgjsSvg1000'), 15, 15, 50, 110, \"#ffffff\", \"#DB7272\", 3)",0);
            setTimeout("addText(document.getElementById('SvgjsSvg1000'), 0, 80, \"Raleway\", \"16px\", \"#DB7272\", \"R\351ception de vos pi\350ces comptables\")",0);
            setTimeout("simulatePathDrawing('.path2')",1000);
            setTimeout("addEllipse(document.getElementById('SvgjsSvg1000'), 15, 15, 360, 110, \"#ffffff\", \"#DB7272\", 3)",900);
            setTimeout("addText(document.getElementById('SvgjsSvg1000'), 290, 80, \"Raleway\", \"16px\", \"#DB7272\", \"sous quelques jours\")",900);
            setTimeout("simulatePathDrawing('.path3')",2000);
            setTimeout("addEllipse(document.getElementById('SvgjsSvg1000'), 15, 15, 610, 110, \"#ffffff\", \"#DB7272\", 3)",1900);
            setTimeout("addText(document.getElementById('SvgjsSvg1000'), 560, 80, \"Raleway\", \"16px\", \"#DB7272\", \"chaque mois\")",1900);
            setTimeout("simulatePathDrawing('.path4')",3000);
            setTimeout("addEllipse(document.getElementById('SvgjsSvg1000'), 15, 15, 900, 110, \"#ffffff\", \"#DB7272\", 3)",2900);
            setTimeout("addText(document.getElementById('SvgjsSvg1000'), 800, 80, \"Raleway\", \"16px\", \"#DB7272\", \"excellence \046 croissance\")",2900);
            }
        });
 
        function addEllipse(svg, rx, ry, cx, cy, fill, stroke, strokeWidth){
            var xmlns = "http://www.w3.org/2000/svg";
            var C = document.createElementNS(xmlns,"ellipse");
            C.setAttributeNS(null, "rx", rx);
            C.setAttributeNS(null, "ry", ry);
            C.setAttributeNS(null, "cx", cx);
            C.setAttributeNS(null, "cy", cy);
            C.setAttributeNS(null, "fill", fill);
            C.setAttributeNS(null, "stroke", stroke);
            C.setAttributeNS(null, "stroke-width", strokeWidth);
 
            svg.appendChild(C);
        }
 
        function addText(svg, x, y, fontFamily, fontSize, fill, content){
            var xmlns = "http://www.w3.org/2000/svg";
            var C = document.createElementNS(xmlns,"text");
            C.setAttributeNS(null, "x", x);
            C.setAttributeNS(null, "y", y);
            C.setAttributeNS(null, "font-family", fontFamily);
            C.setAttributeNS(null, "font-size", fontSize);
            C.setAttributeNS(null, "fill", fill);
            C.textContent=content;
 
            svg.appendChild(C);
        }
 
        function simulatePathDrawing(path) {
          var path = document.querySelector(path);
          var length = path.getTotalLength();
          // Clear any previous transition
          path.style.transition = path.style.WebkitTransition =
          'none';
          // Set up the starting positions
          path.style.strokeDasharray = length + ' ' + length;
          path.style.strokeDashoffset = length;
          // Trigger a layout so styles are calculated & the browser
          // picks up the starting position before animating
          path.getBoundingClientRect();
          // Define our transition
          path.style.transition = path.style.WebkitTransition =
          'stroke-dashoffset 1s ease-in-out';
          // Go!
          path.style.strokeDashoffset = '0';
          path.style.strokeWidth = '3px';
        }
 
        function checkVisible( elm, evalType ) {
            evalType = evalType || "visible";
 
            var vpH = jQuery(window).height(), // Viewport Height
                st = jQuery(window).scrollTop(), // Scroll Top
                y = jQuery(elm).offset().top,
                elementHeight = jQuery(elm).height();
 
            if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
            if (evalType === "above") return ((y < (vpH + st)));
        }
    </script>

Une idée ?
Merci pour votre aide!

[Watilin]

Salut,

ce bout de script vérifie deux conditions lors des évènements scroll :

• le svg est visible ;
• le path n’a pas encore de strokeWidth défini.

Le strokeWith est défini dans la fonction simulateDrawingPath :

Code :

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

path.style.strokeWidth = '3px';

Pour « réamorcer » le script il faudra supprimer cette valeur. Et pour savoir à quel moment réamorcer, il faut utiliser à nouveau checkVisible, mais cette fois en inversant la condition, autrement dit agir lorsque le svg n’est pas visible.

Lors du réamorçage du script, pense à supprimer les éléments svg rajoutés pour rendre au dessin son apparence initiale.

[NoSmoking]

Bonjour,
ne serait-il pas possible de gérer cela directement en animation SVG ?