CODEWITHSUNDEEP
javascriptsvg
ivarec
ivarec

Reputation: 2612

How to get current time/position of a SVG animation?

Suppose I'm making an animation in SVG like this:

    <animate begin="click" attributeName="opacity"
     from="1" to="0.5"
     dur="5s" fill="freeze" />

If I use this together with Javascript event handlers, is there a way to get the current time/position of this animation so I can say if it's about to end? I'm looking for something similar to using elem.getAttribute().

Note: my intention is to reverse the animation without CSS support, but anyway the question is interesting by itself.

Upvotes: 1

Views: 1879

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

The outer SVG element has a getCurrentTime method that can be used to find how far along the animation timeline you are.

Once you know that you can work out how far along your animation is from the attributes it has and whether it's about to end.

There is also an end that's sent when an animation ends which you can use if you want. E.g. elem.setAttribute("onend", "alert('done')");

I'm not sure whether webkit supports begin/end events yet but Firefox does.

Upvotes: 2

Related Questions