SVG Poligons oluşturun ve canlandırın

Sep 14, 2025

Nasıl Yapılır

Bu eğitimde, SVG üçgenlerinden bir dizi görüntü oluşturacağız ve bir görüntüden Tıklama'da bir görüntüden diğerine animasyonlu bir geçiş kuracağız. Gibi bir şeye benziyor Güç yüzleri İnternet sitesi. Bu animasyonlar, özellikle bir siteye ilgi çekebilir Açılış sayfası , ayrıca geliştirmenin yanı sıra kullanıcı deneyimi . Korumak için karmaşık bir siteniz varsa, bir süper ihtiyacınız olacak ağ sağlayıcısı hizmet. Daha az karmaşık bir şey inşa etmek mi? Bir Web Sitesi Oluşturucu işi yapabilir.

Kaçmak için iki diziyle başlayacağız: Biri animasyon yaptığımız değerler ve animasyonlu olduğumuz değerlerle. Bir bağlantı tıklandığında, eşleşen SVG'yi bulacağız. href bu bağlantının ve puan Belirli SVG'deki çokgenlerin her birinin niteliği.

Tüm koordinatları çıkaracağız. puan Öznitelik, çokgenin doldurulmasını doldurun ve ardından bunları bir nesnenin özellikleri olarak ekleyin. Sonra tüm bu nesneleri iki diziden birine ekleyeceğiz: için dizi.

Değerlerini canlandırmak için Tweenmax'ı kullanacağız. dan değerlerine dizi için dizi. Animasyon tamamlandığında, için yeni olmak için dizi dan dizi.

İlk çalıştırta, dan Dizi, şu anda görünen çokgenlerin tüm noktaları değerlerini ve tüm doldurma renklerini içerecektir.

 & lt; a href = "# nat" ve GT; NAT; / A & GT;
& lt; a href = "# bwl" & gt; BWL; / A & GT;
& lt; a href = "# kevin" & gt; Kevin; / a & gt;

& lt; svg sınıfı = "svg tutucu" & gt;
  #nat için çokgenler buraya gidin
& lt; / svg & gt;

& lt; svg id = "nat" sınıfı = "gizlenmiş" & gt;
 #nat için çokgenler buraya gidin
& lt; / svg & gt;

& lt; svg id = "bwl" sınıfı = "gizlenmiş" & gt;
 #bwl için çokgenler buraya gidin
& lt; / svg & gt;
& lt; svg id = "Kevin" sınıfı = "Gizli" & GT;
 #Kevin için çokgenler buraya gidin
& lt; / svg & gt;

01. Görüntüleri çokgenlere dönüştürün

two images before and after Primitive — Görüntünün ilkel ile çalıştırıldıktan önce ve sonra nasıl görüneceğini

İlk adım aslında görüntüleri yapmaktır. Bunun için denilen bir araç kullandım. İlkel (kontrol et Github repo ). Eğitimde kullanılan görüntüler birkaç arkadaşın kişisel görüntüleridir.

Seçtiğiniz görüntüleri, komut satırını kullanarak ilkel yardımcı programı üzerinden çalıştırın:

 ilkel -i giriş.jpg -o çıkışı.svg -n 250 -m 1

-n 250 250 çokgen belirtir, -M 1 bir üçgen şekli belirtir ve -i input.jpg -o çıkış.svg giriş ve çıktıdır. Tüm SVG'lerin aynı sayıda çokgenlere sahip olması ve aynı şekil olması önemlidir. Çıkış.svg çokgen koleksiyon olacak.

02. SVG'lerinizi HTML'ye yapıştırın

SVG'leri oluşturduktan sonra onları HTML'nin gövdesine yapıştırın. İlk SVG'yi çoğaltın ve sınıftan birini verin .svg-tutucu .

.svg-tutucu teknik olarak görülebilen tek kişi olacak; Bundan animasyonlu tüm çokgenler için tutucu olacaktır. Sınıf sahibi hariç tüm SVG'leri verin gizli ve bir İD benzersiz bir adla. Bu eşleşmeli href Bağlantılarda. Gizli SVGS ile gizlenecek görüntü yok; . Emin olmak önemlidir href Her bağlantıın eşleşmesi İD ilgili SVG'nin.

Ardından değişkenleri ilan edin:

 topolygonarray = [];
frompolygonarray = [];

03. poligon koordinatlarını çıkarın

Şimdi her bir çokgenlerimizden geçmeliyiz ve koordinatları Puan Özniteliğinde almalıyız. Bunu Regex kullanarak yapabiliriz:

 Const Getcoordinates = (çokgen) = & gt; {
  polygon.getattribute ("noktaları") döndür. Eşleşme (/ (-? [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. Çokgen dizilerini güncelleyin

image saved as an SVG with text — SVG olarak kaydedildi, tüm üçgenler element olur

Bir bağlantı her tıklandığında, tıklanan bağlantının HREF'sini bir argüman olarak alacak ve eşleşen SVG'yi bulacak bir fonksiyonu çalıştıracağız, puan değerlerini al, anlatın ve Dizi'nden güncelle.

 Const UpdatePolyGonarrays = (Idtoanimateto) = & gt; {
  topolygonarray = createPolyGonPointsObject (Document.GetElementbyID (Idtoanimateto) .Queryselectorall ("çokgen"));

  animatepolygons ();

  frompolygonarray = topolygonarray;
}

Bu işlev başka iki işlevi çağırır - createPolygonPointsObject ve animatepolygons .

createPolygonPointsObject Tüm çokgen elemanları, değerlerini canlandırabildiğimiz nesnelere dönüştürür ve animatepolygons İçindeki çokgenleri canlandırır .svg-tutucu .

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

  poligons.foreach ((poligon, i) = & gt; {
    Const koordinatları = Getcoordinates (çokgen);

    poligonsarray.Push ({
      Doldur: poligon.getattribute ("Doldur"),
      Bir: Koordinatlar ,
      İki: Koordinatlar ,
      Üç: Koordinatlar ,
      Dört: Koordinatlar ,
      Beş: Koordinatlar ,
      Altı: Koordinatlar 
    });
  });

  poligonsarray dönüş;
}

Bu bizimizi kullanıyor Getcoordinates Tüm koordinatları nokta özniteliğinde almak ve her koordinata ve dolgulu bir nesne oluşturur. Bir dizi nesne döndürür. Onları nesneleri yapmaya karar verdim çünkü bu veri türü bir kerede çok fazla değer anlatıyorsanız, çalışması daha kolay görünüyor.

05. Çokgenleri canlandırın

Two images made up of SVG polygons — Son sürümde, SVG poligonları bir animasyon yoluyla geçiş yapacak

Çokgenleri canlandırmak için Tweenmax kullanalım.

 const animatepolygons = () = & gt; {
  Const Poligons = Document.queryselector (". SVG-Tutucu"). QuerySelectorall ("çokgen");
  frompolygonarray = createPolygonPointsObject (çokgenler);

  frompolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      Bir: topolygonarray [i] .one,
      İki: topolygonarray [i] .two,
      Üç: topolygonarray [i] .Three,
      Dört: topolygonarray [i] .four,
      Beş: topolygonarray [i] .five,
      Altı: TopolygonArray [i] .six,
      Kolaylık: Power3.easeout,
      onupdate: () = & gt;
      {
        çokgenler [i] .Setattribute ("Puan", `$ {Obj.Two} $ {{obj.two} $ {obj.four} $ {iblow {obj.four} $ {Obj.five}, $} } `);
      }
    });
  });
}

Animasyonun her çerçevesinde, bu döngü şu anda görünür çokgenlerin puan niteliğini canlandırıyor. .svg-tutucu yukarıda belirtilen yeni değerlere. devam etmek yöntem Tweenmax.to Animasyon güncellemeleri her zaman denir, bu yüzden burada her değişiklikte çalışacak obj.one , obj.two , obj.three , ve bunun gibi. Bu şekilde, noktalar değerleri canlandırıyor ve şekil morfları farklı koordinatlara sahip olacak.

Sonra dolguyu canlandırabiliriz. Her poligon için .svg-tutucu , dolguyu doldurun TopolyGonarray bu aynı endeksde.

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

    Tweenlite.to (poligon, 1, {
      Doldur: Tokolor,
      Kolaylık: Power3.easeout
    });
});

Şimdi çokgenler koordinatlarını ve doldurma renklerini beklendiği gibi canlandıracak. Ve sen bitti! Sayfalarınızı kaydetmek ister misiniz? Onları pdfs olarak dışa aktarın ve bunları bırakın Bulut depolama .

Web tasarım becerilerinizi daha da geliştirmek için, konferansımıza gidin, endüstri lideri konuşmacıların, atölye çalışmalarının ve değerli ağ fırsatlarının paketlenmiş bir programını oluşturun ve deneyimleyin. Kaçırmayın! Şimdi Üretim Biletinizi Alın .

Daha fazla oku:

SVG için tam kılavuz
Javascript ile SVG'yi Animate
İş akışınızı hızlandırmak için En İyi Web Tasarım Araçları

SVG Poligons oluşturun ve canlandırın

01. Görüntüleri çokgenlere dönüştürün

02. SVG'lerinizi HTML'ye yapıştırın

03. poligon koordinatlarını çıkarın

04. Çokgen dizilerini güncelleyin

05. Çokgenleri canlandırın

Nasıl Yapılır - En Popüler Makaleler

Portre Fotoğrafçılığı: Mükemmel portreler nasıl alınır

MO.JS kütüphanesiyle nasıl canlandırılır

Express.js ile başlayın

Procreate ile klasik bir masal sahnesini boya

Cinema 4D'de Çizgi Film Karakterleri Nasıl Oluşturulur

Modelleme Kompleksi Geometri: 5 Üst İpuçları

Web Tasarım Ajansı Nasıl Adlandırılır

Madde ressamını kullanarak oyun hazır dokular oluşturun

Kategoriler