[英]SVG trigger animation with event
how do I trigger an svg animate element to begin animating via javascript with an arbitrary event ? 如何触发svg animate元素开始通过javascript与任意事件动画? I'm imagining something like begin="mySpecialEvent"
, then later I can send mySpecialEvent
and the animation will start (or start again if it has already played). 我正在想象像begin="mySpecialEvent"
类的东西,后来我可以发送mySpecialEvent
并且动画将开始(或者如果它已经播放则再次开始)。
Here's an article that covers what you need: 这是一篇涵盖您需要的文章:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
Edit: link is removed. 编辑:链接已删除。 Archived copies: 存档副本:
In short: 简而言之:
Create the <animation>
with begin="indefinite"
so that it won't treat the animation as starting on document load. 使用begin="indefinite"
创建<animation>
,这样它就不会将动画视为从文档加载开始。 You can do this either via JavaScript or raw SVG source. 您可以通过JavaScript或原始SVG源执行此操作。
Call beginElement()
on the SVGAnimationElement
instance (the <animate>
element) when you're ready for the animation to start. 准备动画启动时,在SVGAnimationElement
实例( <animate>
元素beginElement()
上调用beginElement()
。 For your use case, use a standard addEventListener()
callback to invoke this method when you're ready, eg 对于您的用例,使用标准的addEventListener()
回调来在您准备好时调用此方法,例如
myAnimationElement.addEventListener('mySpecialEvent',function(){ myAnimationElement.beginElement(); },false);
Start an SVG animation: 启动SVG动画:
Without javascript, using the "event-value" type of the begin attribute="id.event" (without an "on" prefix) on an animation element; 没有javascript,在动画元素上使用begin attribute =“id.event”(没有“on”前缀)的“event-value”类型; or 要么
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
<rect x="10" y="10" width="100" height="100">
<animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" />
</rect>
</svg>
<button id="go">Go</button>
(W3C 2018, "SVG Animations Level 2, Editor's Draft", https://svgwg.org/specs/animations/ ), " Attributes to control the timing of the animation", "begin" attribute, "event-value" value type, https://svgwg.org/specs/animations/#TimingAttributes (W3C 2018,“SVG Animations Level 2,Editor's Draft”, https://svgwg.org/specs/animations/ ),“控制动画时间的属性”,“开始”属性,“事件 - 值”值type, https://svgwg.org/specs/animations/#TimingAttributes
From javascript, by setting an animation element's begin attribute to "indefinite"; 从javascript,通过将动画元素的begin属性设置为“indefinite”; and calling beginElement() from script; 并从脚本中调用beginElement();
function go () {
var elements = document.getElementsByTagName("animate");
for (var i = 0; i < elements.length; i++) {
elements[i].beginElement();
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
<rect x="10" y="10" width="100" height="100">
<!-- begin="indefinite" allows us to start the animation from script -->
<animate attributeName="x" begin="indefinite" dur="2s" from="10" to="300" fill="freeze" />
</rect>
</svg>
<button onclick="go();">Go</button>
(W3C 2018, "SVG Animations Level 2, Editor's Draft", https://svgwg.org/specs/animations/ ), " Attributes to control the timing of the animation", "begin" attribute, "indefinite" value type, https://svgwg.org/specs/animations/#TimingAttributes (W3C 2018,“SVG Animations Level 2,Editor's Draft”, https://svgwg.org/specs/animations/ ),“控制动画时间的属性”,“开始”属性,“无限期”值类型, https://svgwg.org/specs/animations/#TimingAttributes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.