Sådan oprettes SVG-animation ved hjælp af CSS
Animering SVG kan udføres gennem naturlige elementer som f.eks
CSS Animation kan også være en alternativ måde at bruge JavaScript-bibliotek som SnapSVG. I dette indlæg vil vi se, hvad vi muligvis kan levere med CSS Animation i SVG.
1. Oprettelse af figurerne
Først og fremmest skal vi tegne de former og genstande, som vi vil animere. Du kan bruge applikationer som Skitse, Adobe Illustrator, eller Inkscape at skabe en.
For dette eksempel har jeg trukket en overskyet himmel som baggrund, og et raketskib skyder opad, flammer inkluderet:
Når vi er færdige med tegningen, skal vi eksportere hvert objekt, vi har oprettet til SVG.
Jeg skal bruge Sketch som et eksempel til dette trin. Vælg det objekt, du vil omdanne til SVG-format. Nederst til højre i dit vindue skal du klikke på Gør eksportable. Vælg SVG-format, og klik derefter på Eksporter objektnavn. Du skal gøre dette ene objekt ad gangen.
2. Indsæt SVG i HTML
Når du åbner SVG filen i en kode editor, vil du opdage, at SVG koder er ret rodet. Derfor, før vi distribuerer SVG-filen, lad os rydde op koden og optimere den med dette kommandolinjeværktøj kaldet SVGO.
Lancering Terminal eller Kommandoprompt, og installer SVGO med denne kommandolinje:
[sudo] npm installer -g svgo
Tun kommandoen, svgo, på SVG filen ved hjælp af --smuk at producere læsbar SVG kode:
svgo rocket.svg - pretty
Hvis du har flere SVG'er i en mappe, kan du optimere dem alle sammen på én gang. Forudsat at mappen er navngivet / billeder, Brug derefter denne kommando fra hovedkatalogen:
svgo -f billeder - pretty
Lad os se forskellen før og efter brug af SVGO.
Kopier koden i SVG-filen og indsæt i en HTML-fil. Vi arbejder på et arbejdsområde på 800px ved 600px bredt, så lad os ikke glemme at definere bredde på SVG-elementet.
SVG er angivet i HTML-filen. Vi skal definere et ID for hvert objekt, så vi kan vælge dem i CSS senere.
Til denne vejledning skal vi definere ID for raket og flammerne og nogle af skyerne. For at genstandene skal håndtere animationstrinnet senere, skal vi tilføje id - du kan også bruge klasse - til hver objekt. På dette tidspunkt vil koden se sådan ud:
3. Animere ved hjælp af CSS
Lad os nu have det sjovt. Planen er at øge raketen op i rummet. Raketten er delt i to grupper; selve raketen og flammen.
Først og fremmest placerer vi raketen midt i arbejdsområdet som følger:
#rocket transform: translate (260px, 200px);
Det du ser er dette:
Nu for at få raketen til at se ud, går det opad, vi skal skabe illusionen om, at skyer falder. Den CSS, vi bruger til dette er:
# cloud1 animation: fall 1s lineær uendelig; @keyframes falder fra transform: translateY (-100px); til transform: translateY (1000px)
For at få det til at se endnu mere realistisk ud, lad os animere fire skyer og lave dem “efterår” ved forskellige hastigheder. Vi placerer dem også forskelligt fra X-aksen.
Den anden sky vil have kode som denne:
# cloud2 animation: fall-2 2s lineær uendelig; @keyframes fall-2 fra transform: translate (200px, -100px); til transform: translate (200px, 1000px)
Bemærk at vi har flyttet skyen # 2 lidt til højre ved 200 pixel med Oversætte. På dette stadium skal resultatet se sådan ud.
Lad os nu få raketen til liv. Vi vil tildele en animationsnøgleramme som følger:
#rocket animation: popup 1s lethed uendelig; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
Og tilføj også animation til raketflammen:
#flame animation: shake .2s lineær uendelig; @keyframes shake 0% transform: translate (55px, 135px) rotere (7deg); 20% transform: translate (55px, 135px) rotere (0deg); 40% transform: translate (55px, 135px) rotere (-7deg); 60% transform: translate (55px, 135px) rotere (0deg); 100% transform: translate (55px, 135px) rotere (0deg);
Ret! Nu, da vores koder er sat, skal animationen fungere på vores SVG.
Tag et kig på vores raketblæsning i rummet.
Endelig tanke
Animation er ikke den nemmeste funktion i CSS at forstå. Men forhåbentlig finder du denne vejledning som et godt udgangspunkt for at udforske CSS Animation på SVG yderligere; Du vil blive overrasket over, hvad der kan opnås med CSS Animation ved hånden.
Hvis du vil starte med det meget grundlæggende, kan du starte her med dette indlæg: En kig ind i: Scalable Vector Graphics (SVG) Animation eller følg resten af SVG serien.
- Se Demo
- Download kilde
