SVG一次完成反向動畫

Question

我已經創建了一個基本的svg動畫，每750ms循環一次，但是一旦它完成了一個動畫循環，它就跳回到開頭，給它一個難看的硬切面。

<animate attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" repeatCount="indefinite" /> 

是否有可能，一旦不透明度從0.99下降到0.20它的工作它的方式備份到0.99，而不是立即跳回到開始的變量？

Example fiddle

Answer 1

您可以使用animate上的values屬性指定多個值。使用這個，你可以指定回到原來的不透明度，甚至添加更多的不透明度值：

<animate attributeName="stop-opacity" values="0.99;0.20;0.99" dur="750ms" repeatCount="indefinite" /> 

Answer 2

Here是一個工作示例。沒有開箱即用的方法來讓動畫來回使用SMIL，但是您可以使用一種解決方法，在第一個是向後動畫之後開始第二個動畫。這將循環並給你的SVG淡入淡出效果。

<animate id="anim1"attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" begin="0s; anim2.end" fill="freeze"/> 
<animate id="anim2"attributeName="stop-opacity" from="0.20" to="0.99" dur="750ms" begin="anim1.end" fill="freeze"/> 

這些是我改變的兩條線。注意我有第二個動畫開始一旦第一個結束，第一個開始後第二個結束（在兩者之間循環）。