CODEWITHSUNDEEP
animationsvgrotationanglesmil
Diginate
Diginate

Reputation: 17

How to loop a specifically timed SVG animation sequence?

So I'm looking to loop my svg animation sequence indefinitely. Heres my code:

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>

After a quick google I discovered what I thought I was looking for in this SO answer, alas it was close but didn't fulfil what I needed totally.

See the difference with problem and theres is that I have specific times I want the animation to take effect (4750ms, 8000ms, 9750ms and 13000ms), whereas in the SO answer there was only a set time.

Another google brought me to this answer but it seemed the OP wasn't fussed about timings.

Upvotes: 0

Views: 980

Answers (2)

Danjiro Daiwa
Danjiro Daiwa

Reputation: 51

How about this? How to make SVG Loop Animation?

Sample code:

<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124179

Sounds like you want some values and key times for those values. E.g.

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>

Upvotes: 1

Related Questions