SVG棘手的keyTimes行爲

我正在製作一個動畫SVG圓環圖。我目前的最佳嘗試是here。但這不完全是我想要的。我希望元素在開始時出現，然後在另一個元素出現在屏幕上之前淡出，然後等待所有其他元素出現並淡出，然後再從第一個元素開始該循環。如您所見，現在元素一起淡入/淡出，只有他們的動畫開始時間不同。我嘗試了another try中的values/keyTimes屬性。但是動畫在我知道的任何瀏覽器中都不起作用。SVG棘手的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％（我有五個要素淡出）。但它不起作用。

嘗試重新排序屬性，使用from和to與兩個值keyTimes和長dur沒有任何效果。這裏一定有一些狡猾的伎倆......

P.S. This幾乎是我想要的，但我需要動畫重複。

來源

2012-07-03 madhead

問題是逗號keyTimes和value屬性 - 需要使用分號和讀文檔兩次。

來源

2012-07-05 05:59:13 madhead

SVG棘手的keyTimes行爲

回答

相關問題