Hoe SVG-animatie te maken met behulp van CSS
Het animeren van SVG kan worden gedaan via native elementen zoals
CSS-animatie kan ook een alternatieve manier zijn om JavaScript-bibliotheken zoals SnapSVG te gebruiken. In deze post zullen we zien wat we eventueel met CSS Animation in SVG kunnen opleveren.
1. De vormen maken
Allereerst moeten we de vormen en objecten tekenen die we willen animeren. U kunt toepassingen zoals gebruiken Schetsen, Adobe Illustrator, of Inkscape om er een te maken.
Voor dit voorbeeld heb ik een bewolkte hemel getekend als achtergrond en een raket omhoog schietend, inclusief vlammen:
Als u klaar bent met de tekening, moeten we elk object dat we hebben gemaakt exporteren naar SVG.
Ik ga Sketch gebruiken als voorbeeld voor deze stap. Selecteer het object dat u in SVG-indeling wilt veranderen. Klik rechtsonder in uw venster op Uitvoerbaar maken. Kies SVG-indeling en klik vervolgens op Exporteren objectnaam. U moet dit één object tegelijkertijd doen.
2. Voeg de SVG in HTML in
Wanneer u het SVG-bestand opent in een code-editor, zult u merken dat SVG-codes nogal rommelig zijn. Laten we, voordat we het SVG-bestand implementeren, de code opschonen en optimaliseren met deze opdrachtregel tool SVGO.
Lancering Terminal of Opdrachtprompt, en installeer SVGO met deze opdrachtregel:
[sudo] npm install -g svgo
Stem de opdracht af, svgo, op het SVG-bestand met --mooi om leesbare SVG-code te produceren:
svgo rocket.svg - klein
Als u meerdere SVG's in een map hebt, kunt u ze allemaal tegelijk in één keer optimaliseren. Ervan uitgaande dat de map een naam heeft /afbeeldingen, gebruik dan deze opdracht vanuit de bovenliggende map:
svgo -f afbeeldingen - klein
Laten we het verschil zien voor en na het gebruik van SVGO.
Kopieer de code in het SVG-bestand en plak deze in een HTML-bestand. We zullen werken aan een werkruimte van 800px bij 600px breed, dus laten we niet vergeten om het te definiëren breedte op het SVG-element.
De SVG wordt ingesteld in het HTML-bestand. We zullen voor elk object een ID moeten definiëren, zodat we ze later in CSS kunnen selecteren.
Voor deze zelfstudie moeten we de ID voor de raket en de vlammen en enkele wolken definiëren. Voordat de objecten de animatiefase later kunnen afhandelen, moeten we toevoegen ID kaart - je kan ook gebruiken klasse - voor elk object. In dit stadium ziet de code er als volgt uit:
3. Animeren met behulp van CSS
Laten we nu wat plezier maken. Het plan is om de raket de ruimte in te jagen. De raket is in twee groepen verdeeld; de raket zelf en de vlam.
Allereerst plaatsen we de raket in het midden van de werkruimte, als volgt:
#rocket transform: translate (260px, 200px);
Wat je ziet is dit:
Om de raket eruit te laten zien alsof hij omhoog gaat, moeten we de illusie scheppen dat wolken vallen. De CSS die we hiervoor gebruiken is:
# cloud1 animation: fall 1s linear oneindig; @keyframes vallen uit transform: translateY (-100px); tot transform: translateY (1000px)
Om het nog realistischer te laten lijken, laten we vier wolken animeren en maken “vallen” op verschillende snelheden. We plaatsen ze ook anders dan de X-as.
De tweede cloud heeft de volgende code:
# cloud2 animation: fall-2 2s linear oneindig; @keyframes fall-2 from transform: translate (200px, -100px); tot transform: translate (200px, 1000px)
Merk op dat we de wolk # 2 een beetje naar rechts hebben verplaatst, door 200px met vertalen. In deze fase zou het resultaat er zo uit moeten zien.
Laten we vervolgens de raket tot leven laten komen. We zullen een animatie-keyframe toewijzen, als volgt:
#rocket animation: popup one's oneindig; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
En voeg ook animatie toe aan de raketvlam:
#flame animation: shake .2s linear oneindig; @keyframes schudden 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
Rechts! Nu onze codes volledig zijn ingesteld, moet de animatie werken op onze SVG.
Kijk eens naar onze raket die de ruimte in blaast.
Laatste gedachte
Animatie is niet de gemakkelijkste functie in CSS om te begrijpen. Maar hopelijk vindt u deze tutorial als een goed startpunt om CSS Animation op SVG verder te verkennen; je zou verbaasd zijn om te weten wat er met CSS Animation bij de hand kan worden bereikt.
Als je wilt beginnen met de basis, kun je hier beginnen met deze post: Een kijkje in: schaalbare vectorafbeeldingen (SVG) of volg de rest van de SVG-serie.
- Demo bekijken
- Download de bron
