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

【问题标题】：How to animate SVG polygon points?如何为 SVG 多边形点设置动画？
【发布时间】：2017-08-22 18:52:47
【问题描述】：

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

我希望所有点都从 X 轴开始动画，完成动画后，结果如下图所示。

通过我所做的谷歌搜索，似乎没有简单的方法可以实现这一点。任何提示将不胜感激，谢谢。

【问题讨论】：

标签： javascript animation svg polygon

【解决方案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>

此示例使用原始的 SVG SMIL 动画。您还可以使用多种 SVG 图形或动画库之一。

【讨论】：

请注意，Internet Explorer 不支持，Edge 也不支持（2019 年 3 月）。
我们没有更简单的方法吗？喜欢通过x 或y 属性移动整个多边形？

【解决方案2】：

这个效果可以通过transform:scaley关键帧动画轻松实现：

（followind sn-p中的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;
}

【讨论】：

很好的答案。使用 JS 解决 SVG 问题对我来说很有趣。

【解决方案3】：

我过去做过一些事情，但是这是使用 SVG 贝塞尔曲线的单个控制点。但是我认为您可以应用相同的原则。我认为您需要执行以下步骤

用曲线的 y 值创建一个数组
为每个 y 值创建一个带有 step 方法的 jQuery animate 函数 [jquery animate1

动画示例

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

【讨论】：