Vytvořit a animovat polygony SVG

Sep 12, 2025

jak

V tomto tutoriálu budeme vytvářet řadu snímků z trojúhelníků SVG a zřídit animovaný přechod z jednoho obrázku na druhý na kliknutí. Vypadá něco jako Tváře výkonu webová stránka. Tyto animace mohou opravdu přidat zájem na stránky, zejména přistávací stránka a posílení uživatelská zkušenost . Pokud máte komplexní místo pro udržení, budete potřebovat super web hosting servis. Budování něco méně komplikovaného? A Webové stránky Builder. může udělat práci.

Chcete-li zahájit se dvěma poli: jeden s hodnotami, které animujete, a jeden s hodnotami, které animujete. Pokaždé, když je odkaz kliknutý, najdeme SVG, který odpovídá href tohoto odkazu a získat body Atribut každého z polygonů v tomto specifickém SVG.

Vyjmeme všechny souřadnice v body Atribut, dostat barvu výplně polygonu a přidejte je jako vlastnosti objektu. Pak přidáme všechny tyto objekty do jedné ze dvou polí: na pole.

Budeme používat TweenMax k animaci hodnot z pole na hodnoty na pole. Když je animace dokončena, nastavíme na stát se novým z pole.

Na prvním běhu z Pole bude obsahovat všechny hodnoty bodů a všechny barvy výplně aktuálně viditelných polygonů.

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

SVG třída = "SVG-držák" & gt;
  Polygony pro #nat go Go
& lt; / svg & gt;

& lt; svg id = "nat" třída = "skrytý" & gt;
 Polygony pro #nat go Go
& lt; / svg & gt;

& lt; svg id = "bwl" třída = "skrytý" & gt;
 Polygony pro #bwl Go Go
& lt; / svg & gt;
& lt; SVG ID = "Kevin" třída = "skrytý" & gt;
 Polygony pro #kevin Go sem sem
& lt; / svg & gt;

01. Převést obrázky na mnohoúhelníky

two images before and after Primitive — Jak se obraz bude dívat před a po spuštění primitivem

Prvním krokem je skutečně udělat obrázky. Pro tento jsem použil nástroj nazvaný Primitivní (Podívejte se na GitHub repo. ). Snímky použité v tutoriálu jsou osobní obrazy několika přátel.

Spusťte vybrané snímky prostřednictvím primitivního nástroje pomocí příkazového řádku:

 primitive -i input.jpg -O výstup.SVG -N 250-m 1

-N 250. Určuje 250 polygonů, -m 1. Určuje tvar trojúhelníku a -i input.jpg -o výstup.svg jsou vstupem a výstupem. Je důležité, aby všechny SVG mají stejný počet polygonů a jsou stejný tvar. Výstup.Svg. bude sbírka polygonů.

02. Vložte svgs do html

Po vytvoření SVGS je vložte do těla HTML. Duplikovat první SVG a dát jeden z duplikátů třídy .svg-držák .

. \ T .svg-držák bude jediný, který je technicky viditelný; Bude to držitel pro všechny polygony, které jsou animované a ven z ní. Uveďte všechny SVG s výjimkou držitele třídy skrytý a A. ID s jedinečným názvem. To by mělo odpovídat href v odkazech. Skryté SVG budou skryté Displej: Žádný; . Je důležité se ujistit href každého odkazu odpovídá ID příslušného SVG.

Pak deklarujte proměnné:

 Nechte topolygonarray = [];
Nechte FromPolygonArray = [];

03. Extrahujte polygon souřadnice

Nyní musíme procházet každým z našich polygonů a získat souřadnice v atributu bodů. Můžeme to udělat pomocí regexu:

 CONST GETOINDINGS = (polygon) = & gt; {
  vrátit polygon.getattribute ("body"). Zápas (/ ((/ (-? [0-9] [0-9.] *), (-? [0-9] [0-9.] *) \ t -? [0-9] [0-9.] *), (-? [0-9] [0-9.] *) \ (-? [0-9] [0-9.] *), (-? [0-9] [0-9.] *) /);
};

04. Aktualizujte Polygonová pole

image saved as an SVG with text — Uloženo jako SVG, všechny trojúhelníky se stávají prvky

Pokaždé, když odkaz kliknete, budeme spustit funkci, která bere HREF kliknutého odkazu jako argument a najít odpovídající SVG, získat hodnoty bodů, animovat jej a aktualizovat pole z pole.

 CONST UPDATEPOLYGONARARAYS = (idtoanimateto) = & gt; {
  topolygonarray = createPolygonpointsObject (dokument.

  AniMatePolygony ();

  FromPolygonArray = topolygonarray;
}

Tato funkce volá dvě další funkce - CreatePolygonPointSObject a AnimatePolygons. .

CreatePolygonPointSObject Převádí všechny polygonové prvky do předmětů, které můžeme animovat hodnoty, a AnimatePolygons. animuje mnohoúhelníky uvnitř .svg-držák .

 Konstrukce CreatePolygonPointSObject = (polygony) = & gt; {
  CONST POLYGONSARRAY = [];

  Polygons.Foreach ((polygon, I) = & gt; {
    CONST souřadnice = getCoordináty (mnohoúhelník);

    PolygonsArray.Push ({
      Vyplňte: polygon.getattribute ("Fill"),
      jedna: souřadnice ,
      Dva: souřadnice ,
      tři: souřadnice ,
      Čtyři: souřadnice ,
      Pět: Souřadnice ,
      Šest: Souřadnice 
    });
  });

  vrátit polygonsArray;
}

To používá naše. GetCoordinsate. Funkce pro získání všech souřadnic v atributu bodů a vytvoří objekt s každou souřadnic a výplně. Vrátí pole objektů. Rozhodl jsem se, že je objekty, protože se zdá, že tento typ dat je snazší pracovat, když animujete spoustu hodnot najednou.

05. Animovat polygony

Two images made up of SVG polygons — V závěrečné verzi budou polygony SVG přechod přes animaci

Pojďme použít tweenmax animovat mnohoúhelníky.

 CONST AniMatePolygons = () = & gt; {
  CONST polygons = dokument.QuerySelektor (". SVG-držák"). Quersselektorall ("mnohoúhelník");
  FromPolygonArray = CreatePolygonPointSobject (polygony);

  fromPolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      jeden: topolygonarray [i] .one,
      Dva: topolygonarray [i] .two,
      tři: topolygonarray [i] .three,
      Čtyři: topolygonarray [i] .four,
      Pět: topolygonarray [i] .five,
      šest: topolygonarray [i] .six,
      Snadné: Power3.aseout,
      onUpdate: () = & gt;
      {
        Polygons [i] .Setattribute ("body", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.three}, $ {obj.four} $ {obj.four} $ {obj.five} $ {obj.five}, $ {obj.five}, $ {obj.six \ t } `);
      }
    });
  });
}

Na každém snímku animace, tato smyčka animuje body atribut aktuálně viditelných polygonů .svg-držák na nové hodnoty nastavené výše. . \ T onupdate. metoda in. TweenMax.to. se nazývá pokaždé, když aktualizace animace, takže zde se dostane na každé změně hodnot obj.one. , obj.two. , obj.three. , a tak dále. Tímto způsobem se body hodnotují animovat a tvarové morfy mají různé souřadnice.

Dále můžeme animovat výplň. Pro každý mnohoúhelník v .svg-držák nastavte výplň na výplň do topolygonarray. který je ve stejném indexu.

 Polygons.Foreach ((polygon, I) = & gt; {
    CONST TOCOLOR = TOPOLYGONARARRAY [I].

    Tweenlite.to (mnohoúhelník, 1, {
      Vyplňte: TOCOLOR,
      Snadné: Power3.AmeMase.
    });
});

Polygony nyní budou oživit své souřadnice a jejich výplňové barvy podle očekávání. A ty jsi udělal! Chcete uložit své stránky? Exportujte je jako pdfs a upustte je cloudové úložiště .

Chcete-li dále zlepšit své dovednosti webového designu, vedou k naší konferenci generovat a zažít balený harmonogram předních reproduktorů, workshopů a cenných příležitostí pro vytváření sítí. Nenechte si ujít! Získejte svůj generátor .

Přečtěte si více:

Kompletní průvodce SVG
Animate SVG s JavaScriptem
30 Nejlepší web design nástroje pro urychlení pracovního postupu

Vytvořit a animovat polygony SVG

01. Převést obrázky na mnohoúhelníky

02. Vložte svgs do html

03. Extrahujte polygon souřadnice

04. Aktualizujte Polygonová pole

05. Animovat polygony

jak - Nejoblíbenější články

Jak vytvořit interiéry s Blenderovým Eevee

Photoshop Barva Změna: 2 nástroje, které potřebujete vědět

Colourise GreysCale práce ve Photoshopu

Navrhněte hratelný avatar pro videohru

Jak vyřezávat postavu ve VR

Udělejte plakát z šablony ve Photoshopu

Jak malovat zářivý květinový zátiší

Jak zvládnout stínování kůže ve 3D

Kategorie