每次重复的 SVG 动画延迟

Question

我想为 SVG 动画循环的每次迭代添加延迟。这是一个简单的例子。

 <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

使用 begin 只会延迟第一次迭代，那么，有没有办法延迟 每次 迭代？

原文由 Ben Murden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 SMIL 动画元素的 end 事件添加到 begin 属性。

此外，您可以添加多个值，由 ; 分隔到这个 begin 属性：

 <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" begin="3s;op.end+3s" />
  </circle>
</svg>

原文由 Kaiido 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

定义虚拟循环并设置相对开始时间。请参阅 如何制作 SVG 循环动画？

 <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin"
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s"
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

原文由 Danjiro Daiwa 发布，翻译遵循 CC BY-SA 3.0 许可协议