SVG sokszögek létrehozása és animálása

Sep 14, 2025

kézikönyv

Ebben a bemutatóban számos képet készítünk az SVG háromszögekből, és egy animált átmenetet állítunk be egy képről a másikra. Úgy néz ki, mint a Hatalmi arcok weboldal. Ezek az animációk valóban érdeklődhetnek a webhelyhez, különösen a nyitóoldal , valamint fokozza felhasználói tapasztalat . Ha van egy összetett webhely fenntartása, szüksége lesz egy szuperre web hosting szolgáltatás. valami kevésbé bonyolult? A weboldal építője megteheti a munkát.

Ahhoz, hogy elinduljon, két tömbvel fogunk kezdeni: az egyik olyan értékekkel, amiket animálunk, és az egyik olyan értékekkel, amelyeket animálunk. Minden alkalommal, amikor egy linket rákattintunk, megtaláljuk az SVG-t, amely megfelel a href e link és a pontok Az egyes poligonok attribútuma az adott SVG-ben.

Az összes koordinátát kivonjuk a pontok Attribútum, kapja meg a poligon kitöltési színét, majd adja hozzá ezeket egy objektum tulajdonságai. Ezután hozzáadjuk ezeket az objektumokat a két tömb egyikéhez: a nak nek sor.

A Tweenmax-t használjuk a tól től tömb a nak nek sor. Amikor az animáció befejeződött, beállítjuk a nak nek tömb, hogy az új legyen tól től sor.

Az első futáskor a tól től A tömb tartalmazza az összes pontértéket és a jelenleg látható poligonok összes kitöltését.

 & lt; egy href = "# Nat" & gt; NAT & lt; / a & gt;
& lt; egy href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; egy href = "# KEVIN" & gt; Kevin & lt; / a & gt;

& lt; svg osztály = "svg-tartó" & gt;
  sokszögek a #nathoz
& lt; / svg & gt;

& lt; svg id = "NAT" osztály = "rejtett" & gt;
 sokszögek a #nathoz
& lt; / svg & gt;

& lt; svg id = "bwl" osztály = "rejtett" & gt;
 sokszögek a #bwl számára
& lt; / svg & gt;
& lt; svg id = "kevin" osztály = "rejtett" & gt;
 sokszögek a #evinhez
& lt; / svg & gt;

01. A képek konvertálása sokszögekbe

two images before and after Primitive — Hogyan fog megjelenni a kép, és miután a primitív

Az első lépés az, hogy valóban a képeket készítsük. Ehhez használt egy eszközt Primitív (Nézze meg a Github repo ). A bemutatóban használt képek néhány barátok személyes képei.

Futtassa a kiválasztott képeket a primitív segédprogramon keresztül a parancssor segítségével:

 Primitive -i bemenet.jpg -o output.svg -n 250 -m 1

-n 250 Megadja a 250 sokszöget, -m 1 meghatározza a háromszög alakját, és -i bemenet.jpg -o output.svg a bemenet és a kimenet. Fontos, hogy minden SVG-nek azonos számú sokszög van, és ugyanolyan alakúak. Output.svg a sokszögek gyűjteménye lesz.

02. Illessze be az SVG-eket a HTML-be

Miután létrehozta az SVG-eket a HTML testébe. Ismertesse az első SVG-t, és adja meg az egyik másolatát az osztályba .svg tartó .

A .svg tartó az egyetlen, amely technikailag látható; Ez lesz a birtokos minden olyan poligon számára, amely animált és belőle. Adjon meg minden SVG-t, kivéve az osztályt rejtett és egy idézés Egyedülálló névvel. Ez meg kell egyeznie a href A linkeken. A rejtett SVG-k el vannak rejtve Kijelző: Nincs; . Fontos, hogy megbizonyosodjon arról, hogy a href Minden egyes link megegyezik a idézés a megfelelő svg.

Ezután állítsa be a változókat:

 Legyen topolygonarray = [];
hagyja, hogy a kudiakulygonarray = [];

03. A poligon koordináták kivonata

Most át kell mennünk minden poligonunkon, és megkapjuk a koordinátákat a pontok attribútumában. Ezt a Regex használatával tehetjük meg:

 CONST GETCOORCINATES = (POLIGON) = & gt; {
  Return Poligon.Getattribute ("Points"). Egyezés (/ (-? [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. Frissítse a poligon tömböket

image saved as an SVG with text — SVG-ként mentett, az összes háromszögek elemekké válnak

Minden alkalommal, amikor egy linket rákattintunk, olyan funkciót fogunk futtatni, amely a rákattintott link hrefjét veszi igénybe, és megtalálja a megfelelő SVG-t, megkapja a pontértékeket, animálja, és frissítse a tömböt.

 CONST UPDATEPOLYGONARRYS = (IDTOANIMATETO) = & gt; {
  topolygonarray = createpolygonpointsobject (document.getelementbyid (IDTOANIMATETO) .QuerSelectorAll ("poligon");

  animatepolygons ();

  frompolygonarray = topolygonarray;
}

Ez a funkció két másik funkciót hív - createpolygonpointsobject és Animatepolygons .

createpolygonpointsobject átalakítja az összes sokszög elemet olyan objektumokba, amelyeket animálhatunk, és Animatepolygons animálja a sokszögeket .svg tartó .

 CONST CREATEPOLYGONPOINTSOBECT = (sokszögek) = & gt; {
  CONST POLIGONSARY = [];

  Poligons.Foreach ((sokszög, i) = & gt; {
    CONST koordináták = getcoordinates (sokszög);

    poligonsaray.push ({
      Töltse ki: poligon.getattribute ("kitöltés"),
      Egy: koordináták ,
      Két: koordináták ,
      Három: Koordináták ,
      Négy: koordináták ,
      Öt: koordináták ,
      Hat: koordináták 
    });
  });

  RETURN POLIGONSARY;
}

Ez használja a mi getcoordinates Funkció, hogy megkapja az összes koordinátát a pontok attribútumában, és létrehoz egy objektumot minden koordináta és a kitöltés. Ez egy sor tárgyat ad vissza. Úgy döntöttem, hogy objektumokat teszek, mert úgy tűnik, hogy az adattípus könnyebben dolgozni, ha egyszerre sok értéket animál.

05. Animálja a sokszögeket

Two images made up of SVG polygons — A végső verzióban az SVG sokszögek egy animáción keresztül átszaladnak

Használjuk a tweenmaxot a sokszögek animálására.

 CONST ANMATEPOLYGONS = () = & gt; {
  CONST POLIGONS = DOKUMENTUM.QUERYSELECER (". SVG-tartó"). Queryselectorall ("Polygon");
  frompolygonarray = createpolygonpointsobject (sokszögek);

  frompolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (OBJ, 1, {
      egy: topolygonarray [i] .on,
      kettő: topolygonarray [i] .two,
      Három: topolygonarray [i] .hree,
      Négy: topolygonarray [i] .four,
      Öt: topolygonarray [i] .five,
      Hat: topolygonarray [i] .six,
      Könnyű: POWER3.IEASEOUT,
      OnUpdate: () = & gt;
      {
        sokszögek [i] .setattribute ("pontok", `$ {obj.one}, $ {obj.two}, $ {obj.three}, $ {obj.four}, $ {obj.four}, $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

Az animáció minden kereténél ez a hurok animálja a jelenleg látható poligonok pontok attribútumát .svg tartó a fenti új értékekre. A ontrupdate bemocskol Tweenmax.to minden alkalommal, amikor az animációs frissítések, így itt fognak futni minden változáson obj.one , obj.two , obj.three , stb. Így a pontértékek animálnak, és a forma morphs különböző koordináták.

Ezután animálhatjuk a kitöltést. Minden egyes sokszög esetében .svg tartó , állítsa be a kitöltést a kitöltéshez a topolygonarray ez ugyanabban az indexben van.

 Polygs.Foreach ((sokszög, i) = & gt; {
    const tocolor = topolygonarray [i] .fill;

    Tweenlite.to (sokszög, 1, {
      Töltse fel: tocolor,
      Könnyű: POWER3.IEASEOUT
    });
});

Most a sokszögek animálják a koordinátáikat és a kitöltési színeket a várt módon. És végeztél! Szeretné menteni az oldalakat? Exportálja őket PDF-ként, és dobja be őket felhő tároló .

A webes tervezési készségek továbbfejlesztése továbbfejleszti a konferenciánkat, és megtapasztalja az iparág vezető hangszórók, workshopok és értékes hálózati lehetőségek csomagolt ütemtervét. Ne hagyja ki! Most kapja meg a Generate jegyet .

Olvass tovább:

Az svg teljes útmutatója
Animálja az SVG-t a JavaScript-el
30 legjobb webes design eszköz a munkafolyamat felgyorsításához

SVG sokszögek létrehozása és animálása

01. A képek konvertálása sokszögekbe

02. Illessze be az SVG-eket a HTML-be

03. A poligon koordináták kivonata

04. Frissítse a poligon tömböket

05. Animálja a sokszögeket

kézikönyv - Most Popular Articles

Google Slides: Hogyan kell megtervezni a dokumentumot

Láng festővel kezdődik

Hangvezérelt UI létrehozása

A digitális plein légfestmények létrehozása

A MAYA-ban való robbanások szimulálása

Hogyan festhet egy élénk virágos életet

A 3D-s ventilátor művészet mestere

Hogyan adhat hozzá adatokat a vázlattervekhez

Kategóriák