1

我正在制作动画 SVG 甜甜圈图。我目前最好的尝试就在这里。但这并不是我想要的。我希望元素出现在开始，然后在另一个元素出现在屏幕上之前淡出，然后等待所有其他元素出现并淡出，然后从第一个元素再次开始这个循环。如您所见，现在元素一起淡入/淡出，只是它们的动画开始时间不同。我在另一次尝试中尝试了 values/keyTimes 属性。但是动画在我知道的任何浏览器中都不起作用。

这是第一个 SVG 中的问题代码：

<animate
    attributeName="opacity"
    begin="0ms" //This is for the first element, for anothers it differs
    //I wish there is `pause` attribute, to pause animation repiting...
    dur="3000ms"
    from="0.7"
    to="0"
    repeatCount="indefinite"/>

这是另一个代码示例

<animate
    attributeName="opacity"
    begin="0ms"
    keyTimes="0,0.2,1"
    values="0.7,0,0"
    dur="15000ms"
    repeatCount="indefinite"/>

如您所见，我尝试增加动画持续时间，但这次以 20% 的速度结束元素的淡出（我有五个元素要淡出）。但它不起作用。

尝试重新排序属性，使用fromandto与二值keyTimes和 longdur无效。这里一定有什么诡计……

PS这几乎是我想要的，但我需要动画来重复。

4

1 回答 1

2

问题是逗号keyTimes和value属性 - 需要使用分号并阅读文档两次。

于 2012-07-05T05:59:13.717 回答