SVG-polygonen maken en animeren

Sep 12, 2025

Procedures

In deze tutorial zullen we een reeks afbeeldingen maken uit SVG-driehoeken en het opzetten van een geanimeerde overgang van de ene afbeelding naar de andere op de andere klik. Het ziet er iets uit als de Gezichten van macht website. Deze animaties kunnen echt interesse toevoegen aan een site, met name een bestemmingspagina , evenals verbetering gebruikerservaring Als je een complexe site hebt om te onderhouden, heb je een super nodig web hosting onderhoud. iets minder ingewikkeld bouwen? EEN website bouwer kan het werk doen.

Om te beginnen gaan we beginnen met twee arrays: één met de waarden die we animeren, en een met de waarden waarin we animeren. Telkens wanneer een link wordt geklikt, zullen we de SVG vinden die overeenkomt met de href van die link en ontvang de punten attribuut van elk van de polygonen in die specifieke SVG.

We gaan alle coördinaten in de punten Attribuut, ontvang de vulkleur van de polygoon en voeg deze toe als eigenschappen van een object. Dan zullen we al deze objecten toevoegen aan een van de twee arrays: de naar array.

We gebruiken Tweenmax om de waarden van de van array naar de waarden van de naar array. Wanneer de animatie is voltooid, stellen we de naar array om het nieuwe te worden van array.

Op de eerste run, de van Array bevat alle puntenwaarden en alle vulkleuren van de momenteel zichtbare polygonen.

 & LT; A HREF = "# NAT" & GT; NAT & LT; / A & GT;
& LT; A HREF = "# BWL" & GT; BWL & LT; / A & GT;
& lt; een href = "# Kevin" & GT; Kevin & LT; / A & GT;

& lt; svg class = "SVG-houder" & GT;
  veelhoeken voor #nat gaan hier
& LT; / SVG & GT;

& LT; SVG ID = "NAT" -klasse = "Verborgen" & GT;
 veelhoeken voor #nat gaan hier
& LT; / SVG & GT;

& LT; SVG ID = "BWL" klasse = "verborgen" & GT;
 veelhoeken voor #bwl gaan hier
& LT; / SVG & GT;
& LT; SVG ID = "Kevin" -klasse = "Verborgen" & GT;
 Polygonen voor #kevin gaan hier
& LT; / SVG & GT;

01. Converteer afbeeldingen naar polygonen

two images before and after Primitive — Hoe het beeld eruit zal zien voor en na het doorlopen van de primitieve

De eerste stap is om de afbeeldingen daadwerkelijk te maken. Hiervoor gebruikte ik een tool genaamd Primitief (Bekijk de Github repo De afbeeldingen die in de tutorial worden gebruikt, zijn persoonlijke afbeeldingen van een paar vrienden.

Voer uw gekozen afbeeldingen uit via het primitieve hulpprogramma met behulp van de opdrachtregel:

 Primitive -i Input.jpg -o output.SVG -N 250-m 1

-N 250 Specificeert 250 polygonen, -M 1 Specificeert een driehoeksvorm, en -I-input.jpg -o output.svg zijn de invoer en uitvoer. Het is belangrijk dat alle SVG's hetzelfde aantal polygonen hebben en dezelfde vorm hebben. Output.svg zal een verzameling polygonen zijn.

02. Plak uw SVGS in de HTML

Na het maken van de SVGS plak ze dan in het lichaam van de HTML. Dupliceer de eerste SVG en geef een van de duplicaten de klasse .Svg-houder

De .Svg-houder wordt de enige die technisch zichtbaar is; Het zal de houder zijn voor alle polygonen die in en uit zijn geanimeerd. Geef alle SVG's behalve de houder de klasse verborgen en een ID kaart met een unieke naam. Dit moet overeenkomen met de href in de links. De verborgen svgs zullen worden verborgen Geen weergeven; Het is belangrijk om ervoor te zorgen dat het href van elke link komt overeen met de ID kaart van zijn respectieve SVG.

Verklaar vervolgens de variabelen:

 Laat TopolygonArray = [];
laat afpolygonarray = [];

03. Extract Polygon-coördinaten

Nu moeten we door elk van onze polygonen lopen en de coördinaten in het attribuut van de punten krijgen. We kunnen dit doen met Regex:

 CONST-GETKOERDINATEN = (POLYGON) = & GT;
  Retourfolygon.getattribute ("Punten"). 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. Werk de polygoonarrays bij

image saved as an SVG with text — Geslagen als een SVG, worden alle driehoeken elementen

Telkens wanneer een link wordt geklikt, worden we een functie uitvoeren die de HREF van de geklikte link als een argument inneemt en de bijpassende SVG vinden, de puntenwaarden ontvang, het animeer en de van array bijwerkt.

 Const-updatepolygonarrays = (idtoanimateto) = & GT;
  topolygonarray = createpolygonpointsObject (document.getelementByID (IDTOANIMATETO) .QuerySelectectorAlle ("polygoon"));

  AnimatePolygons ();

  frompolygonarray = topolygonarray;
}

Deze functie noemt twee andere functies - createpolygonpointsObject en AnimatePolygons

createpolygonpointsObject Converteert alle polygoonelementen in objecten die we de waarden van, en AnimatePolygons animeert de polygonen binnen .Svg-houder

 ConstepolygonpointsObject = (polygonen) = & GT;
  const polygonsarray = [];

  polygonen.forreach ((polygoon, i) = & gt; {
    const coördinaten = getoverinaten (polygoon);

    veelhoonsarray.push ({
      Vul: Polygon.getattribute ("vullen"),
      één: coördineert ,
      twee: coördinaten ,
      Drie: coördinaten ,
      vier: coördinaten ,
      Vijf: coördinaten ,
      zes: coördinaten 
    
  

  terugkeer polygonsarray;
}

Dit gebruikt onze getoverinaten Functie om alle coördinaten in het attribuut van de punten te krijgen en creëert een object met elke coördinaat en de vulling. Het retourneert een reeks objecten. Ik besloot om ze objecten te maken, omdat dat gegevenstype gemakkelijker is om mee te werken wanneer je veel waarden tegelijk animeert.

05. Animeer de polygonen

Two images made up of SVG polygons — In de definitieve versie zullen de SVG-polygonen overgaan via een animatie

Laten we tweenmax gebruiken om de polygonen te animeren.

 const animatePolygons = () = & gt;
  const polygonen = document.QuerySelector ("Svg-houder"). QuerySeleSorAlle ("Polygon");
  frompolygonarray = createpolygonpointsobject (polygonen);

  frompolygonarray.forach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      één: topolygonarray [i] .een,
      TWEE: TOPOLYGONARRAY [I] .TWO,
      Drie: Topolygonarray [i]. Drie,
      Vier: Topolygonarray [I]. Voer,
      Vijf: topolygonarray [i]. Vijf,
      zes: topolygonarray [i] .six,
      Gemak: Power3.Easeout,
      onupdate: () = & GT;
      
        Polygonen [i] .Setattribute ("punten", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.five} $ {obj.five}, $ {obj.six } `);
      
    
  
}

Bij elk frame van de animatie animeert deze lus het attribuut van de punten van de momenteel zichtbare polygonen in .Svg-houder naar de hierboven ingestelde nieuwe waarden. De onupdate methode in Tweenmax.to wordt elke keer als de animatie-updates genoemd, dus hier zal het worden uitgevoerd bij elke wijziging in de waarden van obj.one obj.two obj.three , enzovoort. Op deze manier animeren de puntenwaarden en de vorm morphs om verschillende coördinaten te hebben.

Vervolgens kunnen we de vulling animeren. Voor elke polygoon in .Svg-houder , stel de vul in op de vulling in de topolygonarray dat is in dezelfde index.

 Polygons.forach ((polygoon, i) = & gt; {
    const tolor = topolygonarray [i].

    Tweenlite.to (polygoon, 1, {
      Vul: tocolor,
      Gemak: Power3.Easeout
    
});

Nu zullen de polygonen hun coördinaten en hun vulkleuren animeren zoals verwacht. En je bent klaar! Wilt u uw pagina's opslaan? Exporteer ze als PDF's en laat ze in cloud opslag

Om uw webontwerpvaardigheden verder te verbeteren, gaat u naar onze conferentie en ervaar een ingepakt schema van toonaangevende luidsprekers, workshops en waardevolle netwerkmogelijkheden. Mis het niet! Haal nu je genereren ticket

Lees verder:

De volledige gids voor SVG
Animate SVG met JavaScript
30 Beste Web Design-tools om uw workflow te versnellen

SVG-polygonen maken en animeren

01. Converteer afbeeldingen naar polygonen

02. Plak uw SVGS in de HTML

03. Extract Polygon-coördinaten

04. Werk de polygoonarrays bij

05. Animeer de polygonen

Procedures - Meest populaire artikelen

Hoe een lokale ontwikkelingsomgeving in te stellen

Hoe realistische golven te schilderen in Photoshop

Maak een wiebelig teksteffect met JavaScript

Eindeloze kleurenpaletten genereren met Khroma

Voer vibreren toe aan uw olieverfschilderijen met deze toptips

Hoe een Gouache-palet te mengen

Hoe te gebruiken Markdown in Web Development

Hoe een volledige pagina-website op te bouwen in Angular

Categorieën