animation - 循环上的 SVG 动画不透明度

Question

我想让 svg 路径的不透明度在连续循环中从 0 到 100 回到 0 和 100。

到目前为止，我可以让它从 0 动画到 100 但不能再回来，

有任何想法吗？

谢谢

Answer 1

values您可以使用该属性为任意数量的值设置动画，如下所示：

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

这将在 1 秒内从不透明度 0 动画到不透明度 1 (100%)，然后再次回到 0。

Answer 2

您有两个单独的动画 - 一个用于增加不透明度，一个用于降低不透明度。每个都在另一个结束时开始，但第一个也从 0 开始。这是一个矩形的例子：

<rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>