首页 文章

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

提问于
浏览 次
2

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

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

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

enter image description here

javascript animation svg polygon

2 回答

  • 4

    “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图形或动画库中的一个 .

    回复于
  • 0

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

    • 创建一个包含曲线y值的数组

    • 为每个y值创建一个jQuery animate函数和一个step方法[jquery animate 1

    动画的例子

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

相关问题