как я могу вызвать элемент svg animate, чтобы начать анимацию через javascript с произвольным событием? Я представляю что-то вроде begin="mySpecialEvent"
, а затем я могу отправить mySpecialEvent
, и анимация начнется (или начнется снова, если она уже сыграна).
SVG триггерная анимация с событием
Ответ 1
Вот статья, которая охватывает то, что вам нужно: http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
Изменить: ссылка удалена. Архивные копии:
- https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html
- http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques
Короче:
-
Создайте
<animation>
с помощьюbegin="indefinite"
, чтобы он не воспринимал анимацию как начало загрузки документа. Вы можете сделать это через JavaScript или исходный источник SVG. -
Вызов
beginElement()
в экземпляреSVGAnimationElement
(элемент<animate>
), когда вы будете готовы к анимации начать. Для вашего варианта использования используйте стандартный обратный вызовaddEventListener()
для вызова этого метода, когда вы будете готовы, например.myAnimationElement.addEventListener('mySpecialEvent',function(){ myAnimationElement.beginElement(); },false);
Ответ 2
Начните анимацию SVG:
Без javascript, используя тип "event-value" атрибута begin = "id.event" (без префикса "on") в элементе анимации; или же
<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, Editors Draft", https://svgwg.org/specs/animations/), "Атрибуты для управления временем анимации", атрибут "начать", значение "значение события" type, https://svgwg.org/specs/animations/#TimingAttributes
Из javascript, устанавливая атрибут begin элемента анимации на "undefined"; и вызов 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, Editors Draft", https://svgwg.org/specs/animations/), "Атрибуты для управления временем анимации", атрибут "начать", "undefined" тип значения, https://svgwg.org/specs/animations/#TimingAttributes