Question

我试图制作一个脉动SVG动画。你可以在这里看到它：

<g transform="translate(0,0)">
    <polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="9.5,9.583 24.5,36 39.5,9.75"/>

    <animateMotion path="M 0,0 0,10 z" fill="freeze" dur="1s" repeatCount="indefinite"></animateMotion>
</g>

<g>
    <polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="0,48.5 24.75,48.5 50,48.5 " >

        <animate 
        id="animation1"
        attributeName="points"
        from="0,48.5 24.75,48.5 50,48.5" 
        to="20,48.5 24.75,48.5 30,48.5"
        dur="0.5s"
        />

        <animate 
        id="animation2"
        attributeName="points"
        from="20,48.5 24.75,48.5 30,48.5"
        to="0,48.5 24.75,48.5 50,48.5" 
        begin="animation1.end"
        dur="0.5s"
        />

        <animate 
        id="animation3"
        attributeName="points"
        from="0,48.5 24.75,48.5 50,48.5" 
        to="20,48.5 24.75,48.5 30,48.5"
        begin="animation2.end"
        dur="0.5s"
        />

    </polyline>


</g>

正如你所看到的，它现在只有一次脉动。我希望底部线条的移动重复。但似乎无法找到一种方法来做到这一点。例如，是否可以添加多个阶段。喜欢从，到，等等？

希望我这次能以正确的方式问道。

问候！

Answer 1

喜欢这样吗？

    <animate 
        id="animation1"
        attributeName="points"
        from="0,48.5 24.75,48.5 50,48.5" 
        to="20,48.5 24.75,48.5 30,48.5"
        begin="0s;animation3.end;"
        dur="0.5s"
    />

初始动画由时间开始和最后一个动画完成触发，因此全部重复。

svg动画点脉冲

1 个答案: