1/3 İsminiz

 

2/3 E-Mail

 

3/3 Mesajınız

 

Mesajınız Gönderiliyor...
 

SVG Çizgi Animasyonları - 2

Web-Tasarım   02.12.17    812

SVG Çizgi Animasyonları - 2

Serimizin ilk bölümünde, SVG çizgi animasyonlarında kullanılan dasharray ve dashoffset komutlarından konuşarak, Illustrator programında oluşturduğumuz SVG grafiği ile çizgi animasyonumuzu oluşturmuştuk. Bu bölümde de oluşturacağımız SVG formatındaki harfler ile küçük bir kaç detay hariç, aynı şeyleri yapacağız.

 

Öncelikle konuların ayrıntılı anlatıldığı ilk bölüme göz atmadıysanız buraya tıklayınız.

 

Aşamalar

 

SVG grafiğini oluşturmak

Grafikteki en büyük elemanımızın çizgi uzunluğunu bulmak (dasharray ve dashoffset ayarlamaları için)

CSS komutları ile animasyonumuzu oluşturmak

 

İlk olarak SVG grafiğimizi oluşturalım. Bunun için yine Adobe Illustrator programını kullanıyoruz. Programda yazımızı yazdıktan sonra, yazılarımızın çizgilerini oluşturuyor ve yazı elemanlarımızı seçerek "create outlines - shft+ctrl+o" ile elemanlarımızı "path" haline dönüştürüyoruz. Son görünüm aşağıdaki gibi oldu.

  SVG  

Ayrıca programda, her elemana bir isim tanımlayabiliriz. Böylece CSS kısmında kullanacağımız elemanlarımızın kimlikleri otomatik olarak SVG yapısına eklenecek. Bunun için Illustratorde F7 tuşuna basmamız gerekiyor. Açılan "layers" (katmanlar) penceresinde oluşturulan elemanlarımızı görebilir ve istediğimiz gibi isimler verebiliriz.

  SVG  

Son olarak "Farklı Kaydet" seçeneği ile oluşturduğumuz grafiği SVG olarak kaydediyoruz.

 

Sıra geldi elemanlarımızın çizgi uzunluğun bulmaya, hazırladığımız örneğe göre en uzun çizgiye sahip harf, "G" harfi gibi gözüküyor. Bu yüzden bu harfin çizgi uzunluğunu hesaplamamız gerekiyor. Yine javascript komutlarımız ile bu harfin çizgi uzunluğunu bulalım. Önceki makalemizde bütün elemanlarımız aynı olduğu için, SVG'de yer alan "path" elemanlarımızın uzunluğunu bulmak yeterliydi. Fakat bu örneğimizde sadece G harfimizin uzunluğunu bulmamız gerekiyor. Illustrator programında elemanlarımıza isimler vermiş ve kimlikler oluşturmuştuk. Örneğimizde G harfi için "gharfi" ismini verdim. O yüzden çizgi uzunluğu için bu kimliği kullanmamız gerekiyor.

 
var cizgi = document.querySelector("#gharfi");
cizgi.getTotalLength();
  SVG  

Böylece G harfimizin uzunluğunu bulduk (695). Diğer harflerimizin uzunluğunu da kontrol ettik (S harfi : 540, V harfi : 554). Artık dash array ve dashoffset değerlerini belirleyebiliriz.

 

SVG grafiğimizi bir yazı editöründe açıyoruz. svg düğümünün kapatılmasından önce CSS komutlarımızı yazacağımız style düğümlerini açıyoruz. İlk olarak animasyonumuz için keyframes komutunu yazalım. Harflerimizin renkleri şu anda yok, fakat animasyonda harfleri renklendirmek istiyorum. Bu yüzden SVG'de "fill" komutundan yararlanacağız.

 
<style>
@keyframes don{
   0% {stroke-dashoffset:695;}
   50% {stroke-dashoffset:0;fill:transparent;}
   90% {stroke-dashoffset:0;fill:red;}
   100% {stroke-dashoffset:695;fill:transparent;}
}
</style>
 

Şimdi animasyonumuzu elemanlarımıza uygulayabiliriz. "path" elemanlarımız yani harflerimiz için dasharray, dashoffset ve animation komutlarını yazalım. Ayrıca animasyonların harflerde belirli zaman aralıklarla etkili olması için de harflerimize özel, animasyon gecikme komutunu yazmamız gerekiyor. Komutlarımızın son şekli;

 
<style>
@keyframes don{
   0% {stroke-dashoffset:695;}
   50% {stroke-dashoffset:0;fill:transparent;}
   90% {stroke-dashoffset:0;fill:red;}
   100% {stroke-dashoffset:695;fill:transparent;}
}

path{
   stroke-dasharray:695;
   stroke-dashoffset:695;
   animation:don 10s linear infinite;
}

#sharfi{animation-delay: 0s;}
#vharfi{animation-delay: 1s;}
#gharfi{animation-delay: 2s;}
</style>
 

Böylece SVG çizgi animasyonumuz hazır.

  SVG  

Yukarıda görünen tasarımımızı sağ tıklayıp, farklı kaydet seçeneği ile bilgisayarınıza indirebilir, bir yazı editörü ile açarak komutlarımızı inceleyebilirsiniz.

 

Bu Konular da İlginizi Çekebilir...

 

 

Yorum Yaz

 

Onay Bekleyen Yorum : 0

Yorumlar