Question

我有一个17秒长的第二个动画，有多个部分。一旦完成，我怎么能重复整个序列？我在每个repeatCount = "indefinite"上尝试了<animate>属性，但这让事情变得奇怪。这是我想要重复的动画，供参考或其他。

<rect x="185" y="300" width="300" height="400" fill="#666666">
    <animate
            attributeName="x"
            from="185" to="145"
            begin="5s"
            dur="2s"
            fill="freeze"
            />
    <animate
            attributeName="x"
            from="145" to="185"
            begin="9s"
            dur="2s"
            fill="freeze"
            />

    <animate
            attributeName="y"
            from="300" to="340"
            begin="11s"
            dur="2s"
            fill="freeze"
            />
        <animate
            attributeName="y"
            from="340" to="300"
            begin="15s"
            dur="2s"
            fill="freeze"
            />
</rect>

Answer 1

除了动画begin值是基于时钟的时间间隔外，它们也可以是基于同步的值，用于引用其他动画。

来自MDN Web Docs：

＆lt; syncbase-value＆gt;
描述同步库和该同步库的可选偏移量。元素的动画开始时间是相对于另一个动画的开始或活动结束定义的。 syncbase包含对另一个动画元素的ID引用，后跟.begin或.end，以标识是否与引用的动画元素的开头或活动结束同步。

这意味着您可以通过引用彼此来将动画链接在一起＆＃39; ID为begin值。

基本上，您希望在上一个动画结束后开始动画。当最后一个动画结束时，它应该触发第一个动画再次开始。动画begin属性接受多个值，因此您可以为第一个动画指定两个值：5s延迟和最后一个动画的结束。

＆＃13;

<svg viewBox="0 0 400 500" width="50%" height="50%">
  <rect x="50" y="10" width="300" height="400" fill="#666666">
    <animate
            id="anim1"
            attributeName="x"
            from="50" to="10"
            begin="5s;anim4.end"
            dur="2s"
            fill="freeze"
            />
    <animate
            id="anim2"
            attributeName="x"
            from="10" to="50"
            begin="anim1.end"
            dur="2s"
            fill="freeze"
            />
    <animate
            id="anim3"
            attributeName="y"
            from="10" to="50"
            begin="anim2.end"
            dur="2s"
            fill="freeze"
            />
    <animate
            id="anim4"
            attributeName="y"
            from="50" to="10"
            begin="anim3.end"
            dur="2s"
            fill="freeze"
            />
  </rect>
</svg>

＆＃13;

Answer 2

你可以试试这个：

<animate attributeName="x" values="185; 145; 185" begin="5s" dur="4s" fill="freeze"/>
<animate attributeName="y" values="300; 340; 300" begin="11s" dur="4s" fill="freeze"/>

重复SVG动画序列

2 个答案: