完成后反向 SVG 动画答案

【问题标题】：SVG Animate in reverse once complete完成后反向 SVG 动画
【发布时间】：2017-06-08 10:57:14
【问题描述】：

我创建了一个基本的 svg 动画，它每 750 毫秒循环一次，但是一旦它完成了一个动画循环，它就会跳回到开头，让它看起来很难看。

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

是否有可能一旦不透明度从0.99 下降到0.20，它会恢复到0.99，而不是立即跳回开始变量？

Example fiddle

【问题讨论】：

标签： javascript css animation svg

【解决方案1】：

您可以使用animate 上的values 属性指定多个值。使用它，您可以指定返回到原始不透明度，甚至添加更多不透明度值：

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

【讨论】：

啊哈！我是 svg 动画的新手，这正是我想要的谢谢

【解决方案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"/>

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

【讨论】：