Lag og animer SVG-polygoner

Sep 16, 2025

hvordan

[1. 3]

I denne opplæringen skal vi lage en rekke bilder ut av SVG Triangles, og sette opp en animert overgang fra ett bilde til et annet på klikk. Det ser ut som noe som Faces of Power. Nettstedet. Disse animasjonene kan virkelig legge til interesse for et nettsted, spesielt en destinasjonsside , så vel som å forbedre Brukererfaring . Hvis du har et komplekst nettsted for å opprettholde, trenger du en super Web Hosting. service. bygge noe mindre komplisert? EN Nettstedbygger kan gjøre jobben.

For å sparke vi skal begynne med to arrays: en med verdiene vi animerer til, og en med verdiene vi animerer fra. Hver gang en lenke klikkes, skal vi finne SVG som passer til HREF. av den linken og få poeng Attributt for hver av polygonene i den spesifikke SVG.

Vi skal trekke ut alle koordinatene i poeng Attributt, få fyllfargen på polygonen, og legg deretter til disse som egenskaper til et objekt. Så legger vi alle disse objektene til en av de to arraysene: til array.

Vi bruker TweenMax til å animere verdiene til fra array til verdiene til til array. Når animasjonen er fullført, setter vi til array for å bli den nye fra array.

På første runde, fra Array vil inneholde alle punkterverdiene og alle fyllfarger på de synlige polygonene.

 & lt; en href = "# nat" & gt; Nat & lt; / a & gt;
& lt; a href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; a href = "# kevin" & gt; kevin & lt; / a & gt;

& lt; SVG class = "SVG-HOLDER" & gt;
  Polygoner for #nat gå her
& lt; / svg & gt;

& lt; SVG id = "nat" klasse = "skjult" & gt;
 Polygoner for #nat gå her
& lt; / svg & gt;

& lt; SVG id = "bwl" class = "skjult" & gt;
 Polygoner for #bwl gå her
& lt; / svg & gt;
& lt; SVG id = "Kevin" klasse = "skjult" & gt;
 Polygoner for #Kevin gå her
& lt; / svg & gt;

01. Konverter bilder til polygoner

two images before and after Primitive — Hvordan bildet vil se før og etter å ha kjørt gjennom primitivt

Det første trinnet er å faktisk lage bildene. For dette brukte jeg et verktøy som heter Primitiv (Sjekk ut Github repo. ). Bildene som brukes i opplæringen er personlige bilder av noen få venner.

Kjør dine valgte bilder gjennom det primitive verktøyet ved hjelp av kommandolinjen:

 primitiv -i input.jpg -o output.svg -n 250 -M 1

-N 250. Angir 250 polygoner, -M 1 Angir en trekantform, og -Jeg input.jpg -o output.svg er inngang og utgang. Det er viktig at alle SVGs har samme antall polygoner og er den samme formen. Output.svg. vil være en samling av polygoner.

02. Lim inn SVGene i HTML

Etter å ha skapt SVGene lim inn dem i HTMLs kropp. Duplisere den første SVG og gi en av duplikatene i klassen .svg-holder .

De .svg-holder kommer til å være den eneste som er teknisk synlig; Det vil være holderen for alle polygonene som er animert i og ut av det. Gi alle SVGs bortsett fra holderen i klassen gjemt og en id. med et unikt navn. Dette bør samsvare med HREF. i koblingene. De skjulte SVGs vil bli skjult med Display: Ingen; . Det er viktig å sørge for HREF. av hver lenke samsvarer med id. av sin respektive SVG.

Deretter erklærer variablene:

 La topolygonarray = [];
la frompolygonarray = [];

03. Ekstra Polygon Koordinater

Nå må vi løpe gjennom hver av våre polygoner og få koordinatene i poengattributtet. Vi kan gjøre dette ved hjelp av regex:

 const getcoordinates = (polygon) = & gt; {
  returnere polygon.getattribute ("poeng"). Match (/ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ ( -? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) /);
};

04. Oppdater polygonarrene

image saved as an SVG with text — Lagret som en SVG, blir alle trekanter elementer

Hver gang en lenke er klikket, skal vi kjøre en funksjon som tar HREF på den klikkede linken som et argument og finne den tilsvarende SVG, få poengverdiene, animere det og oppdatere fra arrayet.

 const updatePolygonarrays = (Idtoanimateto) = & gt; {
  TopolygonArray = CreatePolygonPointsObject (Document.GetelementByid (Idtoanimateto) .QuerySalgArall ("Polygon"));

  animentpolygons ();

  frompolygonarray = topolygonarray;
}

Denne funksjonen ringer to andre funksjoner - CreatePolygonPointsObject. og animentpolygons. .

CreatePolygonPointsObject. konverterer alle polygonelementene til gjenstander som vi kan animere verdiene til, og animentpolygons. animerer polygonene inni .svg-holder .

 const createpolygonpointsObject = (polygoner) = & gt; {
  const polygonsarray = [];

  polygons.foreach ((polygon, i) = & gt; {
    constoordinater = getcoordinates (polygon);

    polygonsarray.push ({
      Fyll: Polygon.getTattribute ("fyll"),
      en: koordinater ,
      To: Koordinater ,
      Tre: Koordinater ,
      Fire: Koordinater ,
      Fem: Koordinater ,
      Seks: Koordinater 
    });
  });

  returnere polygonsarray;
}

Dette bruker vår GetCoordinates. Funksjon for å få alle koordinatene i poengattributtet og oppretter et objekt med hver koordinat og fyllingen. Det returnerer en rekke objekter. Jeg bestemte meg for å gjøre dem objekter fordi datatypen ser ut til å være enklere å jobbe med når du animerer mange verdier samtidig.

05. Animere polygonene

Two images made up of SVG polygons — I den endelige versjonen vil SVG-polygonene overgå via en animasjon

La oss bruke tweenmax til å animere polygonene.

 const animatepolygons = () = & gt; {
  const Polygons = Document.QuerySelector (". SVG-HOLDER"). QuerySectorAll ("Polygon");
  FromPolygonArray = CreatePolygonPointsObject (polygoner);

  frompolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      en: topolygonarray [i] .one,
      To: Topolygonarray [i] .two,
      Tre: TopolygonArray [i]. Tree,
      Fire: TopolygonArray [i] .four,
      Fem: TopolygonArray [i] .Five,
      Seks: TopolygonArray [i] .six,
      Enkel: Power3.Ereaseout,
      OnupDate: () = & gt;
      {
        Polygoner [i] } `);
      }
    });
  });
}

På hver ramme av animasjonen animerer denne løkken poengsattributtet til de nåværende synlige polygonene i .svg-holder til de nye verdiene som er angitt ovenfor. De Onupdate. metode i Tweenmax.to. kalles hver gang animasjonsoppdateringene, så her blir det løp på hver endring i verdiene til obj.one. , obj.two. , obj.three. , og så videre. På denne måten er de punkterverdiene animere og formen morphs for å ha forskjellige koordinater.

Deretter kan vi animere fyllingen. For hver polygon i .svg-holder , sett fyllingen til fyllingen i TopolygonArray. det er i samme indeks.

 polygons.foreach ((polygon, i) = & gt; {
    const tocolor = topolygonarray [i] .Fyll;

    Tweenlite.to (polygon, 1, {
      Fyll: TOCOLOR,
      Enkel: Power3.EreEout.
    });
});

Nå vil polygonene animere deres koordinater og deres fyllingsfarger som forventet. Og du er ferdig! Vil du lagre sidene dine? Eksporter dem som pdfs og slipp dem inn skylagring .

For å forbedre webdesignene dine videre, gå videre til vår konferanse og oppleve en pakket tidsplan for bransjeledende høyttalere, workshops og verdifulle nettverksmuligheter. Ikke gå glipp av det! Få din generere billett nå .

Les mer:

Den komplette veiledningen til SVG
Animer SVG med JavaScript
30 beste webdesign verktøy for å øke hastigheten på arbeidsflyten din

Lag og animer SVG-polygoner

01. Konverter bilder til polygoner

02. Lim inn SVGene i HTML

03. Ekstra Polygon Koordinater

04. Oppdater polygonarrene

05. Animere polygonene

hvordan - Mest populære artikler

Slik bruker du Referansebilder: 13 Viktige tips for kunstnere

Hvordan tegne muskler

Hvordan tegne et hode: En komplett guide

Hvordan tegne en løve

10 Gyldne regler for responsive SVGs

Lag fantastiske Tillable Textures i Blender

Kombinere tradisjonelle og digitale ferdigheter for å lage et tegneserie

Opprett 3D-branneffekter

Kategorier