Vorige week heb ik uitgezocht hoe ik een SVG-bestand kan maken en hoe ik deze kan gebruiken in HTML en GreenSock. Deze week ben ik verder gegaan door een animatie te maken.
Aanpak
Ik heb eerst een tutorial gevolg, namelijk deze: https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/
Na het volgen van deze tutorial heb ik zelf een eenvoudige animatie gemaakt:Link naar codepen
Bij het maken van die animatie heb ik vooral veel uitgeprobeerd. Ik heb codes aangepast en gekeken wat er veranderde.
Het lukte al om de SVG te animeren, maar ik had het idee dat het ook een eenvoudigere en overzichtelijkere manier zou moeten kunnen. Daarom zocht ik nog een ander tutorial op: https://ihatetomatoes.net/how-to-animate-svg-with-greensock/
Ook ontdekte ik deze website: https://jakearchibald.github.io/svgomg/. Hiermee kan je de SVG code vereenvoudigen.
Leerervaring
Ik ga graag al direct aan de slag. Ik probeer dingen uit, in dit geval de code aanpassen en zien wat er veranderd. Ik heb bij het maken van deze SVG wel gemerkt dat het handiger kan zijn om eerst een tutorial te volgen. Hierdoor werk je efficiënter.
Wat ik geleerd heb over het animeren van SVG is dat het belangrijk is om je SVG code overzichtelijk te maken. Het beste kun je in Illustrator al de lagen in groepen plaatsen, deze groepen worden in de code ook bij elkaar gehouden. Ook is het mogelijk om zelf nog groepen te maken. Dit kan met het <g> element. Je geeft de <g> (groep) een id en hiermee kan je alles wat in deze groep staat als één afbeelding animeren.
Ik heb ook geleerd wat <transformorigin> is en hoe je dit kunt gebruiken. Dit is niet perse een functie om alleen SVG te animeren, het kan ook toegepast worden op andere onderdelen van animatie. Met de <transformorigin> kun je bepalen vanaf waar de transformatie begint. Bij de animatie van de dolfijn heb ik dit gebruikt om de dolfijn om een punt te laten roteren.
Resultaat
De eerste SVG animatie die ik maakte bestond uit het transformeren van grootte en kleur van (onderdelen van) de illustratie: http://codepen.io/codesen/pen/VKjjqa
Bij de tweede animatie die ik maakte ging het vooral om het overzichtelijk maken van de code. Verder transformeerde ik hier grootte, rotatie, transformorigin, positie en doorzichtigheid. Ik zorgde ervoor dat delen van de timeline tegelijkertijd werden afgespeeld door labels toe te voegen. http://codepen.io/codesen/pen/XjNWGP
Geen opmerkingen:
Een reactie posten