如何为SVG多边形点设置动画？

Question

我创建了一个带有SVG（多边形点）的折线图，我想要动画。

我希望所有点都从X轴开始制作动画，并在完成动画制作后，结果看起来像下图。

似乎没有简单的方法来实现这一点，我用谷歌搜索做了。任何提示都将非常感谢，谢谢。

Answer 1

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

此示例使用vanilla SVG SMIL动画。您还可以使用许多SVG图形或动画库中的一个。

Answer 2

使用transform:scaley关键帧动画可以轻松实现这种效果：

（followind代码段中的javascript代码仅用于生成随机的svg多边形）

let n = 5, w = innerWidth - 20, h = innerHeight - 20;
let pts = Array(n).fill(0).map((_, i) => [(1+i)*(w/(n+1)), -Math.random()* h]);

document.body.innerHTML += `<svg width=${w} height=${h} viewbox=0,${-h},${w},${h} >
  <polygon points=0,0,${pts},${w},0 /></svg>`;
  

@keyframes grow {
  0%   {transform: scaley(0)}
  100% {transform: scaley(1)}
}

polygon {
  fill: #e45;
  animation: grow 0.5s forwards;
}

Answer 3

我过去做过一些事情，但这只是一个SVG Bezier曲线的控制点。但是我认为你可以应用同样的原则。我认为您需要执行以下步骤

1. 使用曲线的y值创建一个数组
2. 使用每个y值的步骤方法创建一个jQuery动画函数[jquery animate 1

动画示例

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