Skapa och animera SVG-polygoner

Sep 11, 2025

Hur

I den här handledningen ska vi skapa en rad bilder av SVG-trianglar och konfigurera en animerad övergång från en bild till en annan på Klicka. Det ska se ut som Maktans ansikten hemsida. Dessa animationer kan verkligen lägga till intresse för en webbplats, särskilt a landningssida , liksom förbättring användarupplevelse . Om du har en komplex sida för att behålla, behöver du en super webbhotell service. bygga något mindre komplicerat? A Website Builder kan göra jobbet.

För att sparka oss kommer vi att börja med två arrays: en med de värden vi animerar till, och en med de värden vi animerar från. Varje gång en länk klickas, kommer vi att hitta SVG som matchar href av den länken och få punkter Attribut av var och en av polygonerna i den specifika SVG.

Vi ska extrahera alla koordinaterna i punkter Attribut, få polygons fyllfärs och lägg sedan till dessa som egenskaper hos ett objekt. Då lägger vi till alla dessa objekt till en av de två arraysna: till array.

Vi använder Tweenmax för att animera värdena på från array till värdena för till array. När animationen är klar ställer vi in till array för att bli den nya från array.

På första gången, från Array kommer att innehålla alla poängvärden och alla fyllfärger på de nuvarande synliga polygonerna.

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

SVG Class = "SVG-hållare" & GT;
  polygoner för #nat gå här
& LT; / SVG & GT;

& lt; SVG ID = "NAT" klass = "Dold" & GT;
 polygoner för #nat gå här
& LT; / SVG & GT;

& lt; SVG ID = "BWL" klass = "Hidden" & GT;
 polygoner för #bwl gå här
& LT; / SVG & GT;
& lt; SVG ID = "Kevin" Class = "Dold" & GT;
 polygoner för #kevin går här
& LT; / SVG & GT;

01. Konvertera bilder till polygoner

two images before and after Primitive — Hur bilden kommer att se förut och efter att ha körts genom primitiv

Det första steget är att faktiskt göra bilderna. För detta använde jag ett verktyg som heter Primitiv (kolla in Github repo ). Bilderna som används i handledningen är personliga bilder av några vänner.

Kör dina valda bilder genom det primitiva verktyget med kommandoraden:

 primitiv -i ingång.jpg -O-utgång.SVG -N 250-M 1

-n 250 Anger 250 polygoner, -m 1 Anger en triangelform, och -i ingång.jpg -o utgång.svg är ingången och utgången. Det är viktigt att alla SVGs har samma antal polygoner och är samma form. Utgång.svg kommer att vara en samling polygoner.

02. Klistra in dina svgs i html

Efter att ha skapat SVG klistra in dem i HTMLs kropp. Duplicera den första SVG och ge en av de dubbletter klassen .svg-hållare .

De .svg-hållare kommer att bli den enda som är tekniskt synlig; Det kommer att vara innehavaren för alla polygoner som är animerade in och ut ur det. Ge alla SVGs utom hållaren klassen dold och en id med ett unikt namn. Detta borde matcha href i länkarna. De dolda svgsna kommer att döljas med Visa: Ingen; . Det är viktigt att se till att href av varje länk matchar id av dess respektive SVG.

Förklara sedan variablerna:

 Låt Topolygonarray = [];
Låt frevolygonarray = [];

03. Extrahera polygonkoordinater

Nu måste vi springa igenom var och en av våra polygoner och få koordinaterna i poängattributet. Vi kan göra det med hjälp av regex:

 const getcoordinates = (polygon) = & gt; {
  returnera polygon.getattribute ("poäng"). 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. Uppdatera polygonuppsättningarna

image saved as an SVG with text — Sparad som SVG, alla trianglar blir element

Varje gång en länk klickas, kommer vi att köra en funktion som tar href av den klickade länken som ett argument och hitta matchande SVG, få poängvärdena, animera det och uppdatera från array.

 Const UpdatePolygonarrays = (IDTOANIMATETO) = & GT; {
  Topolygonarray = CreatepolygonpointsObject (document.getElementByD (Idtoanimateto) .QuerselectorAll ("Polygon");

  AnimatePolygons ();

  frompolygonarray = topolygonarray;
}

Den här funktionen kallar två andra funktioner - createpolygonpointsObject och animerapolygons .

createpolygonpointsObject Konverterar alla polygonelement till objekt som vi kan animera värdena på, och animerapolygons Animerar polygonerna inuti .svg-hållare .

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

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

    polygonsarray.push ({
      Fyll: Polygon.getTttribute ("Fill"),
      en: koordinater ,
      två: koordinater ,
      Tre: Koordinater ,
      Fyra: Koordinater ,
      Fem: Koordinater ,
      Sex: Koordinater 
    });
  });

  returnera polygonsarray;
}

Detta använder vår getcoordinates Funktion för att få alla koordinater i poängattributet och skapar ett objekt med varje koordinat och fyllningen. Det returnerar en rad objekt. Jag bestämde mig för att göra dem objekt eftersom den datatypen verkar vara lättare att arbeta med när du animerar mycket värden på en gång.

05. Animera polygonsna

Two images made up of SVG polygons — I den slutliga versionen kommer SVG-polygonen att övergå via en animering

Låt oss använda Tweenmax för att animera polygonerna.

 Const AnimatePolygons = () = & GT; {
  Const Polygons = Document.QuerySelector (". SVG-hållare"). QueryselectorAll ("Polygon");
  frompolygonarray = CreatepolygonpointsObject (polygoner);

  frompolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      en: topolygonarray [i] .one,
      Två: Topolygonarray [I] .Two,
      Tre: Topolygonarray [I]. Tre,
      Fyra: Topolygonarray [I].
      Fem: Topolygonarray [i] .five,
      Sex: Topolygonarray [i] .six,
      Lätt: Power3.easout,
      OnUpdate: () = & gt;
      {
        polygoner [i] .SetAttribute ("Points", `$ {obj.One}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

På varje ram av animationen animerar den här slingan poängattributet för de nuvarande synliga polygonerna i .svg-hållare till de nya värdena som anges ovan. De onupdate metod i Tweenmax.to kallas varje gång animationsuppdateringarna, så här kommer det att springa på varje förändring i värdena på obj.One , obj.two , obj.three , och så vidare. På så sätt animerar poängen och formen morphs för att ha olika koordinater.

Därefter kan vi animera fyllningen. För varje polygon i .svg-hållare , sätt fyllningen till fyllningen i topolygonarray det är i samma index.

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

    Tweenlite.to (polygon, 1, {
      Fyll: Torkor,
      Lätt: Power3.easout
    });
});

Nu kommer polygonerna att animera sina koordinater och deras fyllande färger som förväntat. Och du är klar! Vill du spara dina sidor? Exportera dem som pdfs och släpp dem in i molnlagring .

För att förbättra dina webbdesignkunskaper, generera och uppleva ett packat schema för branschledande högtalare, workshops och värdefulla nätverksmöjligheter. Missa inte det! Få din generera biljett nu .

Läs mer:

Den fullständiga guiden till SVG
Animera svg med javascript
30 bästa webbdesignverktyg för att påskynda ditt arbetsflöde

Skapa och animera SVG-polygoner

01. Konvertera bilder till polygoner

02. Klistra in dina svgs i html

03. Extrahera polygonkoordinater

04. Uppdatera polygonuppsättningarna

05. Animera polygonsna

Hur - Mest populära artiklar

Gör din egen stylus med bara 4 hushållsartiklar (allvarligt)

3 essentiella zbrush retopologitekniker

Hur man gör en logotyp i Photoshop

Steg för steg: Hur man efterliknar oljemålning i Corel Painter

Export efter effekter Animationer till HTML5

Hur man skulpterar en 3D-tryckt goblin

Skapa målareffekter i Photoshop CC

Hur man använder lagerfotografi kreativt inom ditt designarbete

Kategorier