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.

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.

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();

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.

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.