Sam*_*Sam 4 javascript css animation svg
我已经创建了一个基本的svg动画,它每750毫秒循环一次,但是一旦完成一个动画循环,它就会跳回到开头,给它一个难看的硬切外观.
<animate attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" repeatCount="indefinite" />
是否有可能一旦不透明度从0.99下降到0.20它将会恢复原状0.99而不是立即跳回到起始变量？
tre*_*zko 12
您可以使用values属性on 指定多个值animate.使用此功能,您可以指定返回原始不透明度,甚至添加更多不透明度值:
<animate attributeName="stop-opacity" values="0.99;0.20;0.99" dur="750ms" repeatCount="indefinite" />
这是一个工作示例。没有开箱即用的方法来使用 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"/>
那是我改变的两行。注意我有第二个动画在第一个结束后开始，第一个在第二个结束后开始（在两者之间循环）。