Animacja wyzwalająca SVG z wydarzeniem

Question

Animacja wyzwalająca SVG z wydarzeniem

Jak uruchomić element animate svg, aby rozpocząć animację za pomocą javascript z dowolnym zdarzeniem ? Wyobrażam sobie coś w stylu begin="mySpecialEvent", potem mogę wysłać mySpecialEvent i animacja się uruchomi (lub zacznie się od nowa, jeśli już została odtworzona).

32

javascript events animation svg

Author: WendiKidd, 2011-12-10

Source

2 answers

Uruchom animację SVG:

Bez javascript, używając typu "event-value" atrybutu begin = " id.event "(bez prefiksu "on") na elemencie animacji; lub

<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, "animacje SVG Poziom 2, szkic edytora", https://svgwg.org/specs/animations/), "atrybuty do kontroli czasu animacji"," begin "atrybut," event-value " typ wartości, https://svgwg.org/specs/animations/#TimingAttributes

Od w tym celu należy użyć javascript, ustawiając atrybut begin elementu animacji na "nieokreślony" ; i wywołując beginElement () ze skryptu;

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, "animacje SVG Poziom 2, szkic edytora", https://svgwg.org/specs/animations/), "atrybuty do kontroli czasu animacji"," atrybut begin"," nieokreślony " typ wartości, https://svgwg.org/specs/animations/#TimingAttributes

0

Author: John Bentley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-17 04:31:37

score 47 · Accepted Answer

Oto artykuł, który obejmuje to, co Ty need:
~~http://dev.opera.com/articles/view/advanced-svg-animation-techniques/~~

Edit: link jest usunięty. Zarchiwizowane kopie:

W skrócie:

Utwórz <animation> za pomocą begin="indefinite", aby nie traktować animacji jako zaczynającej się od ładowania dokumentu. Możesz to zrobić albo poprzez JavaScript lub raw SVG source.
Call beginElement() na instancji SVGAnimationElement (element <animate>), gdy będziesz gotowy do rozpoczęcia animacji. W przypadku użycia Użyj standardowego wywołania zwrotnego addEventListener(), aby wywołać tę metodę, gdy jesteś gotowy, np.]}
```
myAnimationElement.addEventListener('mySpecialEvent',function(){
  myAnimationElement.beginElement();
},false);
```