2

我有一个 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>
4

2 回答 2

2

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

来自MDN 网络文档：

<syncbase-value>
描述一个同步库和从该同步库的可选偏移量。元素的动画开始时间是相对于另一个动画的开始或活动结束定义的。同步库由对另一个动画元素的 ID 引用组成，后跟 .begin 或 .end 以标识是否与所引用动画元素的开始或活动结束同步。

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

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

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

于 2017-10-06T19:57:03.737 回答
-1

你可以试试这个：

<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"/>
于 2014-05-08T15:59:49.647 回答