SVG动画延迟

Question

要求：我在为每个动画设置延迟时遇到了一些问题。

演示：https://codepen.io/anon/pen/OxJXvZ

但逻辑不同。每一行必须用蓝色，一一填充。

如果我设置了 begin 属性，它会完全破坏任何动画规则

这是我的代码：

<linearGradient id="first">
<stop offset="0" stop-color="#4caddb">
    <animate id="anima1" begin="anima2.end" dur="1s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
</stop>
<stop offset="0" stop-color="#E1E1E1">
    <animate dur="1s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
</stop>
</linearGradient>

和

<linearGradient id="third">
<stop offset="0" stop-color="#E1E1E1">
    <animate id="anima2" dur="1s" begin="anima1.end" attributeName="offset" fill="freeze" from="1" to="0" repeatCount="indefinite" />
</stop>
<stop offset="0" stop-color="#4caddb">
    <animate dur="1s" attributeName="offset" fill="freeze" from="1" to="0" repeatCount="indefinite" />
</stop>
</linearGradient>

我错过了什么？

Answer 1

repeatCount="indefinite" 的动画没有结束，因此您的引用动画永远不会开始。请改用begin="anima1.repeat"。每次引用的动画重新开始时都会引发此事件。