如何動畫SVG多邊形點？

Question

我創建了一個帶有SVG（多邊形點）的折線圖，我想動畫。

我希望所有的點都從X軸開始動畫，當完成動畫時，結果看起來像下面的圖像。

似乎沒有簡單的方法來實現這一點，與我做的谷歌搜索。任何提示將不勝感激，謝謝。

Answer 1

我已經做了，在過去的東西，這可是用SVG貝塞爾曲線的單一控制點。不過，我認爲你可以應用相同的原則。我想你需要執行以下步驟

1. 創建具有曲線的y值的陣列
2. 創建一個jQuery動畫函數與每個y值的步驟的方法[jquery的動畫1

動畫示例

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

Answer 2

什麼意思是「從X軸動畫」到底是什麼意思？你的意思是開始平坦並向上成長爲這種形狀？

如果是這樣，那實際上很簡單。

<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>

此示例使用香草SVG SMIL動畫。您也可以使用多種SVG圖形或動畫庫中的一種。