I have sequence of animationTransform
:
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>
If it possible to loop this sequence without using script?
I can set individual animation to loop by using repeatCount="indefinite"
by I want to loop the whole sequence in order.
Figured it out already. Solution for those who are interested:
<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>
You can also just loop within a single animateTransform
by providing a values
attribute with a semi-colon separated list:
<animateTransform attributeName="transform" type="rotate"
values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
repeatCount="indefinite" />
Here's an example (checked in Firefox 4.0 and Chrome).
Ingmar de Lange
it's also possible to add/subtract (milli)seconds:
begin="anim2.end-500ms"
来源:https://stackoverflow.com/questions/3629987/how-to-loop-svg-animation-sequence