Sådan opretter du nemt smukke SVG-animationer

Endelig version af hvad vi vil skabe!

Animering på nettet har aldrig været mere enkel. SVG (Scalable Vector Graphics) bruger XML-markering til at hjælpe med at gengive ting i browseren. Her er et eksempel. Hvis du skulle downloade en png eller en jpeg, får du bare det billede, som du bliver nødt til at gengive med til browseren ved hjælp af et tag. Intet galt med dette, men hvis jeg ville gøre det animeret, er jeg meget begrænset. Hvordan ændrer SVG dette?


 

Her er et eksempel på SVG. Det bruger XML, der ligner meget HTML. Til animering gør dette tingene meget enkle.

For at animere har vi først brug for 2 biblioteker, TweenMax og TimelineMax fra GSAP. Her er mere information, hvis du ikke har hørt om dem. For de dovne, her er CDN.

Af hensyn til tutorials opretter vi ikke vores egne SVG'er. Vi vil bare få fat i en fra online. Et af mine yndlingssteder for ikoner og smukke billeder er Flaticon. De har masser af forskellige muligheder, men da vi er kodere, valgte jeg en skærm. Rigtig original, jeg ved.

Flaticon tilslutter os en SVG, fordi de ved, at vi ønsker at animere

Når du har hentet filen, skal du åbne den og kopiere koden til et websted som CodePen eller JSfiddle ... eller hvis du ikke har tillid til disse hårdtarbejdende websteder, kan du bare bruge din egen kodeditor. Lad os gå!!

Kaster på en lille makeup

Dette trin er valgfri, men jeg personligt hader (Beklager, stærkt ord), hvordan SVG ikke er centreret. Baggrundsfarven er heller ikke så flot. Lad os ændre det. Skift krop til hvilken farve du vil have, og tilføj derefter disse CSS-egenskaber til IDG for SVG-elementet (i mit tilfælde kaldes det "Layer_1"). For at centrere skal du bare tilføje display: blokere; og margin: 0 auto;

Vent et øjeblik, dette ser velkendt ud….

Analyse af vores SVG

I det sidste afsnit bemærkede du sandsynligvis, at vi brugte CSS til at centrere vores SVG. Lad os se hurtigt på vores SVG-fil ...



 
 

Interessant ... Vi kan anvende ID'er til individuelle SVG-elementer ... men hvad repræsenterer de endda?

Vent et øjeblik ... dette gengiver meget som HTML-kode ...

Mine beregninger var korrekte… alle disse polygoner og stier er forskellige elementer i SVG-billedet. Dette vil helt sikkert gøre tingene meget lettere. Hvis du har bemærket det i gif, har jeg placeret alle stier og polygoner og angivet et ID til dem i overensstemmelse hermed. For eksempel var det første sti-element stativet til skærmen, så jeg navngav det til stand. Af hensyn til selvstudiet fortæller jeg dig, hvad jeg navngiver hvert element, på den måde fungerer det, hvis du følger med.

Animerer vores første element

Lad os bare starte med det element, vi indstiller ID til. Sørg for, at du har importeret de 2 GSAP-biblioteker. Lad os først starte en tidslinjeforekomst. Sådan gør du det i din JavaScript-fil:

var tl = ny TimelineMax ();

Nu hvor vi har en tidslinje-forekomst. Lad os bruge det.

tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})

Dette får den til at gøre dette:

Skærmen blev ikke gengivet ordentligt i min gif-software. Bare rolig!

Banebrydende animation! Lad os fordele, hvad koden har gjort indtil videre.

var tl = ny TimelineMax ();

Dette initialiserer en tidslinje på variablen tl.

tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})

Vi bruger variablen tl til at tilføje animationer på tidslinjen. Det har nogle parametre, vi skal indtaste.

Fra funktionen fra lad os definere, hvor animationen starter, og den animeres til, hvor browseren gengav SVG, før JavaScript var til stede. En anden populær mulighed er tl.to, men det er en anden dag. Tænk på at tl.fra definere en racerbil på startlinjen, før den går til en allerede defineret slutlinie.

tl.from ('# stand'. Her målretter vi det element, vi søger at animere. I dette tilfælde er det elementet med ID-stativet.

tl.from ('# stand', 0.5 Dette definerer animationens længde. I dette tilfælde er det et halvt sekund.

tl.fra ('# stand', 0.5, {} Alt inde i disse krøllede seler er animationsparametrene. Inde i disse parametre har vi ...

{skalaY: 0 skalerer elementet til at forsvinde ved at være ekstremt tynd.

{skala: 0, transformOrigin: “bund” Afsnittet transformOrigin fortæller dig, på hvilken position af elementet du vil have det til at transformere. For eksempel, hvis vi aldrig valgte den nederste mulighed, ville den strække sig fra toppen, som ødelægger illusionen om selve computerbygningen.

Og sidst, men ikke mindst lethed: Power2.easeOut. Dette er meget sjovt at bruge. Med lethedsparameteren kan du bestemme, hvor let det er, hvordan det præsenteres. Læg mærke til, hvordan det langsomt kom til slutningen i stedet for at gøre et komplet 100% stop? Lidt svært at forklare, men GSAP har et let visualiseringsværktøj til at hjælpe dig med dette.

Og det giver dig endda kode at kopiere !!!!

Komme videre…

Wow det var meget at tage i… Realistisk set har du nu alt hvad du har brug for at vide om animering af SVG'er. Nu skal vi bare afslutte vores projekt og kalde det en dag sammen. Jeg har et par andre pæne tricks, som jeg tror, ​​du vil grave. Lad os gå videre til folk!

Brug din browsers dev-værktøjer til at finde bagsiden af ​​stativet. Jeg indstiller ID til standBack som i standBack, fordi disse animationer kommer til at sprænge dit sind.

Denne animation er også temmelig ligetil, da vi bare skal gøre den samme animation som sidste gang. Denne gang bruger vi Bounce lethed. Jeg synes, det ser virkelig tegneseriefigur ud, hvilket er den stemning, jeg går efter. At demonstrere, hvordan tidslinjen fungerer. Jeg indsætter den endelige kode for dette trin:

var tl = ny TimelineMax ();
tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})
  .fra ('# standBack', 0.5, {skalaY: 0, transformOrigin: "bund", let: Bounce.easeOut})

For at afspille en animation lige efter den anden skal du bare bruge en anden .fra-funktion under den. Behøver ikke engang at udføre en tilbagekaldsfunktion eller noget.

En anden smuk animation. Min kæreste ville være så stolt!

Transform oprindelse

Hvis du ikke forstod sektionen transformOrigin, vil dette forhåbentlig gøre det mere tydeligt. Bemærk, hvordan de i de sidste 2 animationer ryddet nedenfra og op? Til denne animation ønsker jeg, at bunden af ​​skærmen strækker sig fra midten til siderne. Det er her transformOrigin kommer i spil, før vi gjorde bundværdien, men denne gang vil vi gøre centrum. Da vi også strækker den lodret ud end vandret, bruger vi også stedetX-metoden. Dette er selvforklarende. Jeg indstiller ID'et for dette element til monitorBottom

var tl = ny TimelineMax ();
tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})
  .fra ('# standBack', 0.5, {skalaY: 0, transformOrigin: "bund", let: Bounce.easeOut})
.fra ('# monitorBottom', 0.7, {skalaX: 0, transformOrigin: "center", let: Bounce.easeOut})
Wow! Får du betalt over 100 000 om året for at vide det?

At tage en åndedræt

Okay, disse animationer var alt for seje til, at det menneskelige kunne optages. Vi har brug for lidt forsinkelse fra den næste animation, ellers har jeg måske et panikanfald. Heldigvis har GSAP dækket os. Vi animerer nu skærmen, der kommer op.

Lad os give skærmen et ID på skærmen. Vi bruger nu denne kode til at animere den.

tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})
  .fra ('# standBack', 0.5, {skalaY: 0, transformOrigin: "bund", let: Bounce.easeOut})
  .fra ('# monitorBottom', 0.7, {skalaX: 0, transformOrigin: "center", let: Bounce.easeOut})
  .fra ('# skærm', 0.6, {skalaY: 0, transformOrigin: "bund", let: Circ.easeOut, forsinkelse: 0.4})

Alt der er temmelig ligetil. Dog tilføjede vi en anden parameter ... hvad kunne det være? Forsinke! Denne forsinkelsesfunktion udløser, hvor længe man skal vente på, før man spiller denne animation. Jeg satte den til 0,4 sekunder. Lad os se, hvordan dette ser ud.

En smule forsinket blev tilføjet! Gudskelov.

Det behøver ikke at være kompleks

Lad os animere den gule boks nu. Til denne animation ønsker jeg bare, at den skal vises. Dog bliver det kedeligt at tilføje mange forskellige parametre for hvert element… hvis det bare var enkelt. Lad os indstille ID'et for den gule boks til gulboks

var tl = ny TimelineMax ();
tl.fra ('# stand', 0.5, {skalaY: 0, transformOrigin: "bund", let: Power2.easeOut})
  .fra ('# standBack', 0.5, {skalaY: 0, transformOrigin: "bund", let: Bounce.easeOut})
  .fra ('# monitorBottom', 0.7, {skalaX: 0, transformOrigin: "center", let: Bounce.easeOut})
  .fra ('# skærm', 0.6, {skalaY: 0, transformOrigin: "bund", let: Circ.easeOut, forsinkelse: 0.4})
.fra ('# gul kasse', 0,5, {skala: 0})

Vent, det er det? Det må bestemt ikke fungere !?

Så let som ingenting.

Jeg gætter på, at det er så enkelt.

Kvalitet i mængder

Så vi har animeret alt efter hvert enkelt element… nu er vi i sidste øjeblik med alle de røde linjer. Dette vil tage mig for evigt ...

Hold fast på ven, vær ikke så pessimistisk endnu, der er en nem måde at smukt animere disse røde linjer med kun en kodelinie. Lad mig fortælle dig processen. Lad os først gå til vores dev-værktøjer og finde vælgeren til disse røde stier.

Forbedre !!!

Interessant, så det ser ud til, at alle de røde linjer har et overordnet element på . Ved hjælp af dev værktøjer kopierer jeg vælgeren, der er:

# Lag_1> g: nth-child (1)> g

For at få alle underordnede elementer i dette overordnede element skal jeg bare tilføje på stien til slutningen af ​​vælgeren. Dette fungerer:

# Lag_1> g: nth-child (1)> g sti

Store. Nu har vi en liste over alle de elementer, der er under rød.

Nu kan vi bruge funktionen tl.from til at animere disse, men det vil animere dem alle på samme tid. Ville det ikke være cool, hvis de alle animerede på et andet tidspunkt konsekvent? Du ser sandsynligvis denne tendens med mine retoriske spørgsmål nu. tl.staggerFrom vil gøre nøjagtigt dette! Lad os se på denne sidste del af koden sammen.

.staggerFrom ('# Layer_1> g: nth-child (1)> g path', 0.2, {skalaX: 0}, -0.1)

Som du kan se, er det temmelig ligetil. Vi satte i vælgeren, som vi identificerede før, vi indstiller varigheden, vi tilføjede også egenskaberne, men vent, hvad er dette? -0,1? Hvad betyder det?

På .staggerFrom-funktionen er vi nødt til at definere, på hvilket tidspunkt vi ønsker, at hver sti skal animeres efter den anden. I dette tilfælde vil vi gøre 0,1 sekunder Årsagen til, at vi tilføjede den - derinde var at få den til at gå fra venstre mod højre i stedet for omvendt. Lad os se, hvordan dette ser ud, når det implementeres.

Nu er det smukt, men ikke så smukt som dig.

Wow, det er perfekt. Hvad der gør GSAP så fantastisk er, at du kan lave så fantastiske animationer med HTML-elementer såvel som SVG-elementer hurtigt. Når du forstår syntaksen, tager noget lignende kun dig 10 minutter.

Fork min pen og DM mig på Twitter for at vise mig, hvad du har lavet dig selv .

CodePen

Twitter

Hvis du kunne lide dette indlæg og syntes det var nyttigt! Giv mig nogle klapper! Føl dig fri til at følge mig på Twitter og på Medium! Tak