循环上的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>

这将从不透明度0动画到不透明度1(100%),然后在1秒的过程中再次回到0.

Answer 2

你有两个独立的动画 - 一个用于增加不透明度,一个用于减少.每个都在另一个结束时开始,但第一个也从0开始.这是一个rect的例子:

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