Reaktywacja animacji SVG za pomocą JavaScript

Niedawno w ramach konkursu  organizowanego przez Kodu.je wykonałam projekt animacji grafiki SVG. Mogę się pochwalić, że jury konkursu przyznało mojej animacji wyróżnienie, z czego się bardzo cieszę. 🙂 Efekty mojej pracy można oglądać na CodePenie:

See the Pen SVG animation by SowaProgramuje (@sowaProgramuje) on CodePen.

Jak dodać klasę na elemencie SVG za pomocą JavaScript?

Podczas pracy nad tym projektem napotkałam na pewien problem. Chciałam żeby klasa ze zdefiniowaną animacją była nadawana, a następnie usuwana po konkretnym interwale czasowym. W ten sposób chciałam ponownie zainicjować animację, dlatego potrzebowałam nadać klasę elementowi SVG za pomocą JavaScript. Ku mojemu zaskoczeniu .className() nie zadział

Trochę mi zajęło czasu, żeby rozwiązać ten problem, z pomocą przyszedł StackOverflow. Dotarłam do informacji, że na elemencie SVG klasę w czystym JavaScript można nadać za pomocą .element.classList.add().

Pamiętaj, manipulacja SVG różni się od manipulacji HTML. Jest to dość obszerny i ciekawy temat warty zgłębienia.

Reaktywacja animacji SVG za pomocą JavaScript

Animacja w CSS może być nieskończona (animation-iteration-count: infinite;), bądź wykonana konkretną ilość razy (animation-iteration-count: 2;). Animację można również opóźnić (animation-delay: 200ms;), ale działa to jedynie raz, na początku animacji. Stąd pojawiła się potrzeba napisania funkcji, która pozwoli na zatrzymanie i ponowne wznowienie animacji, co umożliwi jej zapętlenie i jednocześnie dodanie interwałów, w których animacja nie jest wykonywana.

Przykładowo: animujemy symbol Yin yang i chcemy, żeby obrócił się o 360 stopni, zatrzymał się się na 2 sekundy i następnie ponownie wykonał obrót o 360 stopni oraz chcemy aby ten cykl się powtarzał w nieskończoność.

See the Pen SVG animation reactivate by SowaProgramuje (@sowaProgramuje) on CodePen.

Aby uzyskać taki efekt napisałam funkcję w JS. Przyjmuje ona 4 argumenty:

  • id elementu, który chcemy animować – w kodzie nadajemy id na danym elemencie
  • animationTime – czyli całkowity czas animacji; i tutaj uwaga – jeśli wykonują się np. 3 powtórzenia  (animation-iteration-count: 3;), musimy pomnożyć czas trwania jednej animacji (animation-duration: 500ms) przez ilość powtórzeń. W tym przypadku animationTime wyniesie 1500ms.
  • interval – czas pomiędzy zakończeniem jednego powtórzenia animacji a rozpoczęciem kolejnego
  • animationDelay – opóźnienie animacji; dlaczego się zdecydowałam na to rozwiązanie? Napotkałam na buga, wydaje mi się, że był związany z ładowaniem się stylów oraz funkcją .setTimeout(), ale niestety nie byłam sama w stanie zidentyfikować problemu (jak wiele muszę jeszcze się nauczyć!). Domyślam się, że nie jest to najpiękniejsze rozwiązanie, może ktoś będzie umiał jakoś inaczej to rozgryźć. Należy jednocześnie pamiętać, że animation-delay w CSS powinien wynosić zero.

W funkcji wzięłam pod uwagę to, że dany element może mieć już wcześniej nadaną klasę. Nie nadpisuję jej, tylko dodaję dodatkową klasę, która jest taka sama jak id. Tutaj niestety należy pamiętać, że przy takim rozwiązaniu klasa z animacją zadeklarowaną w CSS musi być taka sama jak id elementu. Nie jest to do końca optymalne rozwiązanie, dlatego zastanawiam się jak można to udoskonalić. Jak masz jakieś sugestie to napisz w komentarzu.

Myślę, że zagadnienie animacji plików SVG jest bardzo ciekawe i na pewno będę je jeszcze zgłębiać. Jeśli masz jakieś uwagi lub pytania, daj znać w komentarzu 🙂

Chciałam Ci podziękować za to, że jesteś na tym blogu 🙂

Update:

Kod refactoringu:

See the Pen SVG animation after refactoring by SowaProgramuje (@sowaProgramuje) on CodePen.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *