Een beginnershandleiding voor SVG-animatie met CSS

Scalable Vector Graphics (SVG's) zijn meer dan alleen afbeeldingsbestanden. Als XML-toepassing bevatten SVG's opmaak die er ongeveer hetzelfde uitziet en werkt als HTML. U kunt ze ook gebruiken in combinatie met CSS- en JavaScript-code. Dit maakt het mogelijk om SVG-bestanden te animeren, waardoor complexe afbeeldingen worden gemaakt die goed werken voor webdesign en andere dynamische omgevingen.

Maar hoe maak je een SVG-animatie? Begin met een SVG-vorm, animeer deze met CSS en bouw voort op deze principes om animatie in uw eigen werk te gebruiken.

SVG's animeren met HTML en CSS

Hoewel je JavaScript kunt gebruiken om SVG's programmatisch te animeren, biedt CSS nu ook goede ondersteuning voor animaties. U kunt alle voorbeeldcodes vinden op: de CodePen voor dit project.

Een SVG-afbeelding bouwen in HTML

De eerste stap in dit proces is het bouwen van de SVG-afbeelding waarmee u gaat werken. U vindt SVG-opmaak in het HTML-paneel op CodePen.

SVG-structuur

Hoewel SVG's een vergelijkbare indeling hebben als HTML, zijn de tags die u gebruikt om ze te maken anders. Een SVG heeft openings- en sluittags () die een verscheidenheid aan verschillende eigenschappen kan bevatten. In ons geval gebruiken we

ID kaart en viewBox eigendommen. De id-eigenschap werkt net als elke andere HTML-ID en biedt u een unieke identificatie die u in uw CSS/JS kunt gebruiken. De eigenschap viewBox stelt de grootte van onze SVG in.

<!-- SVG met een responsieve grootte -->
<svg id="MUOSVGAnimatie" viewBox="0 0 800 600">
<!-- SVG-inhoud -->
</svg>

U kunt in plaats daarvan de eigenschappen breedte en hoogte gebruiken, zoals het volgende voorbeeld laat zien. ViewBox maakt echter een responsieve SVG die overeenkomt met de grootte van de viewport zonder de beeldverhouding te verbreken.

 SVG met een statische grootte 
<svg id="MUOSVGAnimatie" breedte="800" hoogte="600">
<!-- SVG-inhoud -->
</svg>

SVG-vormen

U kunt gedetailleerde afbeeldingen maken met SVG's, met een scala aan verschillende vormgereedschappen tot uw beschikking. Dit SVG-voorbeeld gebruikt drie van de beschikbare vormen, maar er zijn er nog veel meer. Elk van de vormen in dit voorbeeld heeft een unieke ID die de CSS-animaties later kunnen gebruiken.

• SVG-ellips: dit is een cirkel/ovaal hulpmiddel. Het specificeert eigenschappen voor de y/x-asradius (rx/ry), vulkleur en lijnbreedte. Het is belangrijk om te onthouden dat de straal die u met dit gereedschap kiest, de helft van de diameter van de vorm zal zijn.

<ellips id="cirkel" rx="100" ry="100" vullen="#ffed00" slagbreedte="0"/>

• SVG Rect: De tool SVG rect maakt een vierkant of rechthoek. Deze heeft eigenschappen voor breedte/hoogte, een transformatie, opvulkleur en streekbreedte.

<rect id="vierkant" breedte="200" hoogte="200" transformeren="vertalen (300 200)" vullen="#05f"
 slagbreedte="0"/>

• SVG-polygoon: gebruik een SVG-polygoon om een ​​specifiek aantal punten in te stellen en willekeurige vormen van verschillende groottes te maken. De veelhoek in het voorbeeld is driezijdig, waardoor het een driehoek is, en je kunt de positie van elk punt in de eigenschappen ervan zien. Daarnaast hebben we eigenschappen voor de positie, vulkleur en lijndikte van de driehoek.

<polygoon id="driehoek" punten="15,-97 115,102 -84,102 15,-97"
 transformeren="vertalen (0,0)" vullen="#f00" slagbreedte="0"/>

Zodra de animatie op zijn plaats is, zullen de vormen naast elkaar worden uitgelijnd.

Deze drie SVG-vormen zijn enkele van de meest voorkomende, maar er zijn er meer om uit te kiezen. U kunt de volgende vormen gebruiken wanneer: werken met een SVG-animatie:

• SVG-cirkel: deze vorm lijkt op een ellips, maar heeft altijd gelijke X- en Y-stralen.
• SVG-lijn: een SVG-lijn is een enkel lijnsegment met twee punten, één aan elk uiteinde.
• SVG-polylijn: polylijnen zijn als basislijnen, alleen kunnen ze meer dan twee punten hebben.
• SVG-polygoon: SVG-polygonen zijn als rechthoeken, alleen kunnen ze meer dan vier punten hebben, waardoor complexe vormen mogelijk zijn.
• SVG-pad: SVG-paden werken op dezelfde manier als het pengereedschap in Adobe Photoshop. Lijnen kunnen aansluiten als een polylijn/polygoon, maar er kunnen ook krommen op worden toegepast.

Hoe u SVG's kunt animeren met CSS

Nu je enkele vormen in je SVG hebt, is het tijd om verder te gaan met de CSS-animatie. Elk van de vormen heeft een andere animatie om enkele van de opties die je hebt te demonstreren, maar er zijn er nog veel meer om te ontdekken met je eigen ontwerpen. De cirkel beweegt over het scherm, de hoeken van het vierkant worden rond en de driehoek draait. Al deze gebruiken CSS-sleutelframes om vloeiende animaties te maken.

De cirkel verplaatsen met Transform en Translate

De cirkel in het SVG-voorbeeld beweegt tijdens de animatiecyclus van de onderkant naar de bovenkant van het scherm. U moet een animatie aan de cirkel toewijzen voordat deze kan bewegen, via een CSS-eigenschap:

#cirkel {
 animatie: circle_anim 2000ms lineair oneindig normaal vooruit
}

Het eerste woord in de waarde, circle_anim, is een naam voor de animatie. Het duurt twee seconden (2000ms). Het heeft een lineair curve die zijn snelheid consistent houdt en is ingesteld om een eindeloos aantal keren in de voorwaarts richting. U kunt keyframes gebruiken om afzonderlijke fasen van de animatie te definiëren:

@keyframes cirkel_anim {
 0% { transformeren: vertalen(155px, 305px) }
 45% { transformeren: vertalen(155px, -123px) }
 50% { transformeren: vertalen(-123px, -123px) }
 55% { transformeren: vertalen(-123px, 728px) }
 60% { transformeren: vertalen(155px, 728px) }
 100% { transformeren: vertalen(155px, 305px) }
}

Er zijn zes keyframes in deze animatie, dus de cirkel zal in elke cyclus naar zes verschillende locaties worden verplaatst. De transformeren: vertalen eigenschap bepaalt de positie van de cirkel in elke fase. Bij 0% bevindt de cirkel zich in het midden van het scherm en beweegt deze met 45% omhoog en uit het zicht. Met 50% is het naar links van het scherm verplaatst voordat het met 55% onder het kijkvenster is bewogen. De cirkel beweegt 60% terug naar zijn horizontale positie en de animatie is voltooid voor 100% met de cirkel terug in het midden van het scherm.

Animeer de eigenschap Border Radius van het plein

Het vierkant in het voorbeeld biedt een goede referentie voor algemene eigenschappenanimaties. Zolang u de juiste syntaxis weet die u moet gebruiken, kunt u elke CSS-eigenschap animeren. De eigenschap border-radius is hier een goed voorbeeld van. Het vierkant heeft scherpe hoeken die overgaan in afgeronde hoeken en dan weer terug in vierkante hoeken.

#vierkant { animatie: square_anim 2000ms gemak-in-uit oneindig normaal vooruit }

De vierkante animatie heet square_anim en heeft een looptijd van twee seconden. De gemak-in-uit curve maakt de animatie langzamer aan het begin en einde, waardoor een vloeiend effect ontstaat.

@keyframes square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Zoals je kunt zien, heeft deze animatie vier keyframes. De X- en Y-grensradius verandert van 0px naar 40px tussen 0% en 45%, pauzerend bij 40px tot 55%. Het gaat dan terug naar 0px voor elke straal tegen de tijd dat de animatie 100% bereikt.

Draai de SVG-driehoek met Transform

De laatste SVG-animatie in het voorbeeld is de eenvoudigste, waarbij de driehoek rond het middelpunt draait. De vorm maakt elke twee seconden een volledige omwenteling en blijft oneindig doorlopen. Het heeft een versoepelingscurve die ertoe leidt dat de animatie aan het einde vertraagt. De animatie heet driehoek_anim.

#driehoek { animatie: driehoek_anim 2000ms easy-out oneindig normaal vooruit }

Deze animatie heeft twee keyframes, één op 0% en de andere op 100%. De eigenschap Transformeren roteren verandert de driehoek van 0deg bij 0% naar 360deg bij 100%, waardoor een volledige draai ontstaat.

@keyframes driehoek_anim {
 0% { transformeren: vertalen(644px, 297px) draaien(0 graden) }
 100% { transformeren: vertalen(644px, 297px) draaien(360 graden) }
}

Andere eigenschappen animeren

De drie hierboven besproken animaties zijn een goed startpunt wanneer u met SVG's werkt, maar u wilt dit waarschijnlijk nog verder uitbreiden. U kunt de CSS-animatieregel gebruiken om bijna elke eigenschapswaarde aan te passen die u aan uw SVG kunt toewijzen. Dit omvat basiswaarden, zoals formaat en positionering, maar ook meer geavanceerde waarden, zoals randen, schaduwen en overvloeimodi.

In zeldzame gevallen waarin CSS het werk niet kan doen, kunt u JavaScript-code gebruiken om SVG-afbeeldingen te animeren. Je kunt heel veel handleidingen vinden om je hierbij te helpen zodra je klaar bent om de volgende stap te zetten met je SVG's.

Uw eigen SVG-animaties maken

Of je nu een webdesigner, softwareontwikkelaar of gewoon een creatief persoon bent, SVG-animaties kunnen leuk en bevredigend zijn om te maken. U kunt op internet tal van bronnen vinden die u kunnen helpen met webgebaseerde animatie, als u eenmaal vertrouwd bent met de basis.

10 CSS-achtergrondpatronen die u op uw website kunt gebruiken

Lees volgende