Utwórz i animuj wielokątów SVG

Sep 12, 2025

Jak

W tym samouczku będziemy tworzyć szereg obrazów z trójkątów SVG i konfigurowanie animowanego przejścia z jednego obrazu do drugiego na kliknięcie. Będzie wyglądać coś w rodzaju Twarze mocy stronie internetowej. Te animacje mogą naprawdę zwiększać miejsce do witryny, w szczególności wstęp , a także poprawiać doświadczenie użytkownika . Jeśli masz złożoną stronę do utrzymania, będziesz potrzebować super hosting usługa. budowanie czegoś mniej skomplikowanego? ZA Kreator strony internetowej może wykonać zadanie.

Aby rozpocząć mamy zacząć od dwóch tablic: jeden z wartościami jesteśmy animując, a jedną z wartościami jesteśmy animującym. Za każdym razem kliknięto link, znajdziemy SVG, który pasuje do href. tego linku i zdobyć zwrotnica atrybut każdego z wielokątów w tym konkretnym SVG.

Wyodrębniemy wszystkie współrzędne w zwrotnica Atrybut, uzyskaj kolor wypełnienia wielokąt, a następnie dodaj je jako właściwości obiektu. Następnie dodamy wszystkie te obiekty do jednej z dwóch tablic: do szyk.

Użyjemy Tweeenmaxa do animacji wartości od Tablica do wartości do szyk. Po zakończeniu animacji, ustawmy do Tablica stać się nowym od szyk.

Na pierwszy bieg od Array będzie zawierać wszystkie wartości punktów i wszystkie kolory wypełnienia aktualnie widocznych wielokątów.

 a 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;
  wielokąty dla #nat idą tutaj
& lt; / svg & gt;

& LT; SVG ID = "NAT" Class = "Hidden" & GT;
 wielokąty dla #nat idą tutaj
& lt; / svg & gt;

& LT; SVG ID = "BWL" Class = "Hidden" & GT;
 Poligoki dla #bwl idą tutaj
& lt; / svg & gt;
& LT; SVG ID = "Kevin" Class = "Hidden" & GT;
 Wielokony na #evin idą tutaj
& lt; / svg & gt;

01. Konwertuj obrazy do wielokątów

two images before and after Primitive — Jak obraz będzie wyglądał przed i po uruchomieniu prymitywu

Pierwszym krokiem jest robić obrazy. Dla tego użyłem narzędzia o nazwie Prymitywny (Sprawdź Github Repo. ). Obrazy używane w samouczku są osobistymi obrazami kilku przyjaciół.

Uruchom wybrane obrazy przez prymitywne narzędzie za pomocą wiersza poleceń:

 Primitive -i wejście.jpg -o Wyjście.Svg -n 250-m 1

-n 250. Określa 250 wielokątów, -M 1. Określa kształt trójkąta i - Input.jpg -o Output.Svg są wejście i wyjście. Ważne jest, aby wszystkie SVG mają taką samą liczbę wielokątów i są tym samym kształtem. Wyjście.svg. będzie kolekcją wielokątów.

02. Wklej swoje SVG w HTML

Po utworzeniu SVG wklej je do ciała HTML. Zduplikuj pierwszy SVG i daj jedną z duplikatów klasy .svg-holder. .

The. .svg-holder. będzie jedynym, który jest widoczny technicznie; Będzie to uchwyt do wszystkich wielokątów, które są animowane i poza nim. Daj wszystkie SVG, z wyjątkiem posiadacza klasy ukryty i an. ID z unikalną nazwą. To powinno pasować do href. w linkach. Ukryte SVG zostaną ukryte Nie wyświetla się; . Ważne jest, aby upewnić się href. każdego linku odpowiada ID odpowiedniego SVG.

Następnie zadeklaruj zmienne:

 Niech Topolygonarray = [];
Niech frompoligonarray = [];

03. Wyodrębnij współrzędne wielokąt

Teraz musimy przejść przez każdego z naszych wielokątów i uzyskać współrzędne w atrybucie punktów. Możemy to zrobić za pomocą REGEX:

 Const GetCoordines = (wielokąt) = & gt; {
  powrót poligon.getattribute ("punkty"). Mecz (/ (-? [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. Zaktualizuj tablice wielokątne

image saved as an SVG with text — Zapisane jako SVG, wszystkie trójkąty stają się elementami

Za każdym razem kliknięci jest link, zamierzamy uruchomić funkcję, która wymaga HREF klikniętego linku jako argument i znajdź pasujące SVG, zdobądź wartości punktów, animować go i zaktualizuj z tablicy.

 ConstpoliGonarrays = (idtoANimateto) = & gt; {
  Topolygonarray = CreatepolygonPointSobject (Document.getElementByidyid (IdtoANimateto) .QuerySelesterall ("wielokąt"));

  animatePolygons ();

  frompolygonarray = topolygonarray;
}

Ta funkcja wywołuje dwie inne funkcje - CreatepoligonPointSobject. i animatepolygons. .

CreatepoligonPointSobject. Konwertuje wszystkie elementy wielokąt w obiekty, które możemy animować wartości i animatepolygons. animuje wielokątów wewnątrz .svg-holder. .

 ConstePoligonPointSobject = (wielokąty) = & gt; {
  Const PolygonSarray = [];

  wielokądy.Forach ((wielokąt, i) = & gt; {
    Cinki współrzędne = Getcoordinates (wielokąt);

    poligonsarray.push ({
      wypełnij: wielokąt.getTtribute ("wypełnij"),
      Jeden: współrzędne ,
      dwa: współrzędne ,
      Trzy: współrzędne ,
      Cztery: współrzędne ,
      Pięć: współrzędne ,
      Sześć: współrzędne 
    });
  });

  powrót poligonrayarray;
}

To używa naszego Getcoordinates. Funkcja, aby uzyskać wszystkie współrzędne w atrybucie punktów i tworzy obiekt z każdą współrzędną i wypełnieniem. Zwraca tablicę obiektów. Postanowiłem uczynić je przedmiotami, ponieważ typ danych wydaje się łatwiej pracować, gdy jesteś animując dużo wartości jednocześnie.

05. Animuj wielokąty

Two images made up of SVG polygons — W wersji ostatecznej, wielokąty SVG przejdzie przez animację

Użyjmy Tweeenmax, aby animować wielokątów.

 Const AnimatePolygons = () = & GT; {
  Const Poligons = Document.QuerySelector (". Uchwyt SVG"). Queryselectorall ("wielokąt");
  Frompolygonarray = CreatepoligonPointSobject (wielokąty);

  frompolygonarray.Foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      Jeden: Topolygonarray [I] .One,
      Dwa: Topolygonarray [I] .Two,
      Trzy: Topolygonarray [I] .three,
      cztery: topolygonarray [i] .Four,
      Pięć: Topolygonarray [I] .five,
      Sześć: Topolygonarray [I] .six,
      łatwość: Power3.easeOut,
      onupdate: () = & gt;
      {
        Wielokony [i] .setattribute ("punkty", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

Na każdej klatce animacji pętla ta ożywia atrybut punktów aktualnie widocznych wielokątów .svg-holder. do nowych wartości ustawionych powyżej. The. OnUpdate. metoda in Tweenmax.to. nazywa się za każdym razem, gdy aktualizacje animacji, więc tutaj zostanie uruchomione na każdej zmianie wartości obj.one. , obj.two. , obj.three. , i tak dalej. W ten sposób punkty wartości mają animować i kształt morfy mają różne współrzędne.

Następnie możemy animować wypełnienia. Dla każdego wielokąta .svg-holder. , ustaw wypełnienie do wypełnienia topolygonarray. to jest w tym samym indeksie.

 wielokąty.Foreach ((wielokąt, i) = & gt; {{
    Const ToColor = Topolygonarray [I]. wypełnienie;

    Tweenlite.to (wielokąt, 1, {
      Wypełnij: ToColor,
      Łatwość: Power3.easeOut.
    });
});

Teraz wielokąty będą animować ich współrzędnych i ich kolorów wypełnionych zgodnie z oczekiwaniami. I jesteś skończony! Chcesz zapisać swoje strony? Eksportuj je jako PDF i upuść je magazyn w chmurze .

Aby poprawić swoje umiejętności projektowania stron internetowych, udaj się do naszej konferencji generować i doświadczają zapakowanego harmonogramu wiodących przemysłu, warsztatów i cennych możliwości sieciowych. Nie przegap tego! Uzyskaj teraz bilet generowany .

Czytaj więcej:

Kompletny przewodnik po SVG
Animuj SVG z JavaScript
30 najlepszych narzędzi projektowania stron internetowych, aby przyspieszyć przepływ pracy

Utwórz i animuj wielokątów SVG

01. Konwertuj obrazy do wielokątów

02. Wklej swoje SVG w HTML

03. Wyodrębnij współrzędne wielokąt

04. Zaktualizuj tablice wielokątne

05. Animuj wielokąty

Jak - Najpopularniejsze artykuły

Zacznij od malarza płomienia

30 wskazówek renderowania kluczy

4 Wskazówki dotyczące rozwijania umiejętności deweloperów

4 łatwe kroki w celu poprawy renderowania

Utwórz prysznic meteor w 3DS max

Utwórz maleńskie efekty w Photoshop CC

Utwórz efekt wody wlewając w realflow

Jak tworzyć mangę z dzikim zachodnim skrętem

Kategorie