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

这些是我改变的两条线。注意我有第二个动画开始一旦第一个结束，第一个开始后第二个结束（在两者之间循环）。