如何获取 SVG 动画的当前 time/position?
How to get current time/position of a SVG animation?
假设我在 SVG 中制作这样的动画:
<animate begin="click" attributeName="opacity"
from="1" to="0.5"
dur="5s" fill="freeze" />
如果我将它与 Javascript 事件处理程序一起使用,是否有办法获取此动画的当前 time/position,以便我可以判断它是否即将结束?我正在寻找类似于使用 elem.getAttribute().
的东西
注意:我的意图是在没有 CSS 支持的情况下反转动画,但无论如何这个问题本身很有趣。
外部 SVG 元素有一个 getCurrentTime 方法,可用于查找您在动画时间轴上的距离。
一旦你知道你可以算出你的动画距离它所拥有的属性还有多远,以及它是否即将结束。
还有一个在动画结束时发送的结束,您可以根据需要使用。例如。 elem.setAttribute("onend", "alert('done')");
我不确定 webkit 是否支持 begin/end 事件,但 Firefox 支持。
假设我在 SVG 中制作这样的动画:
<animate begin="click" attributeName="opacity"
from="1" to="0.5"
dur="5s" fill="freeze" />
如果我将它与 Javascript 事件处理程序一起使用,是否有办法获取此动画的当前 time/position,以便我可以判断它是否即将结束?我正在寻找类似于使用 elem.getAttribute().
的东西注意:我的意图是在没有 CSS 支持的情况下反转动画,但无论如何这个问题本身很有趣。
外部 SVG 元素有一个 getCurrentTime 方法,可用于查找您在动画时间轴上的距离。
一旦你知道你可以算出你的动画距离它所拥有的属性还有多远,以及它是否即将结束。
还有一个在动画结束时发送的结束,您可以根据需要使用。例如。 elem.setAttribute("onend", "alert('done')");
我不确定 webkit 是否支持 begin/end 事件,但 Firefox 支持。