Comment animer des points polygones SVG?

Question

J'ai créé un graphique linéaire avec des SVG (points de polygone) que j'aimerais animer. Je voudrais que les points commencent à animer à partir de l'axe X, et une fois l'animation terminée, le résultat ressemble à l'image suivante.

Il semble qu'il n'y ait pas de moyen simple d'y parvenir, avec le googling que j'ai fait. Tous les conseils seraient très appréciés, merci.

Answer 1

J'ai fait quelque chose dans le passé, ce fut cependant avec un seul point de contrôle d'une courbe de Bézier SVG. Cependant, je pense que vous pouvez appliquer le même principe. Je pense que vous devez faire ce qui suit les étapes

1. Créer un tableau avec des valeurs y des courbes
2. Créer une fonction animate jQuery avec une méthode étape pour chaque valeur y [jquery animer 1

exemple animé

$({ n: 0 }).animate({ n: 40}, { 
     duration: 1000, 
     step: function(calculatedYValue, fx) { 
      //update graphs with calculatedYValue 
      console.log(parseInt(calculatedYValue), 10); 
     } 
    });  

Answer 2

Que voulez-vous dire par "animer à partir de l'axe X" exactement? Voulez-vous dire commencer à plat et grandir vers le haut à cette forme?

Si c'est le cas, c'est en fait très facile.

<svg viewBox="0 0 2040 352"> 
 
    <defs> 
 
    </defs> 
 
    
 
    <polygon points="" fill="red"> 
 
    <animate attributeName="points" dur="1s" fill="freeze" 
 
       from="0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352, 
 
        2040,352,0,352" 
 
       to="0,292, 550,232, 1240,258, 1592,158, 1880,168, 2040,0, 
 
        2040,352,0,352"/> 
 
    </polygon> 
 
</svg>

Cet exemple utilise des animations SVG vanille SMIL. Vous pouvez également utiliser l'une des nombreuses bibliothèques graphiques ou d'animation SVG.