SVGポリゴンポイントをアニメーション化する方法は？

Question

アニメーション化したいSVG（ポリゴンポイント）の線グラフを作成しました。

ポイントはすべてX軸からアニメーションを開始し、アニメーションを終了すると、次の画像のようになります。

これを達成するための簡単な方法はありませんが、私が行ったGoogle検索ではそうです。すべてのヒントは、ありがとう、ありがとう。

Answer 1

私は、これはSVGベジェ曲線の単一の制御点をただした、過去に何かを行っています。しかし、私はあなたも同じ原則を適用できると思います。私は[jqueryの1

をアニメーションあなたは以下の

1. 各y値のためのステップの方法で機能をアニメーションのjQueryを作成
2. 曲線のyの値を持つ配列を作成する手順を行う必要があると思いますアニメーションの例

   $({ 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グラフやアニメーションライブラリの1つを使用することもできます。