SVG Çizgi Animasyonları - 1
Bu makalemde, SVG'lerin nasıl oluşturulduğundan ve SVG çizgi animasyonlarının nasıl yapıldığından bahsetmek istiyorum. Daha önce de belirttiğim gibi SVG, vektör türündeki bir grafik formatıdır. Yani matematiksel formüllerle oluşturulurlar. Matematiksel formülleri oluşturmak için bir program kullanmak, en kolay yoldur. SVG oluşturabileceğimiz programlardan bir tanesi Adobe Illustrator programıdır. Konu sonundaki videomuzda bu programı kullanarak bir SVG grafiği oluşturacağız ve CSS komutları ile animasyonumuzu elde edeceğiz.
Eğer SVG ve diğer grafik fotmatları hakkında temel bilgilere ulaşmak isterseniz, Resim Formatları ve Kullanım Yerleri (JPG, PNG, GIF, SVG) adlı makalemi okuyabilirsiniz.
İlk olarak, çok basit bir SVG grafiğinin komutlarına göz atalım.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="400px" viewBox="0 0 1000 400" enable-background="new 0 0 1000 400" xml:space="preserve">
<g>
<path fill="none" stroke="#000000" d="M457.935,119.021h-1.978H457.935c8.593,13.477,18.604,14.209,30.029,2.197
c-4.834,15.479-19.092,26.294-42.773,32.446c19.336,18.311,29.15,43.751,29.443,76.318c-6.592,25.243-24.805,30.639-54.639,16.187
c-6.396-17.432-7.079-36.425-2.051-56.982c3.466,38.331,10.814,57.325,22.046,56.982c24.218,1.465,32.201-10.937,23.95-37.207
l-9.448-14.355l-8.936-13.77l-15.161-18.018c0.586-12.255,9.106-26.854,25.562-43.799H457.935z"/>
<path fill="none" stroke="#000000" d="M583.766,111.989c1.512,0.049,2.074,0.928,1.684,2.637
c-3.467,4.786-6.811,11.329-10.033,19.629l-1.686,1.758l-0.879,2.637l-1.611,2.637l-1.684,3.589
c-11.379,5.566-23.365,5.273-35.963-0.879l-4.248,0.879v27.539v2.637c1.709-1.123,3.394-2.88,5.055-5.273l16.699-0.952h2.563h4.176
c2.93-0.586,5.98-2.344,9.154-5.273l-8.35,19.556c-0.537,0.146-1.098,0.732-1.684,1.758h-25.928l-1.686,2.637
c-3.613,44.63,1.416,69.701,15.088,75.22v2.637c-7.666,2.93-17.139,7.812-28.418,14.648c-3.564,1.366-7.08,3.101-10.547,5.2
h-15.234c-11.913-8.888-12.817-18.311-2.71-28.271c7.324,0.83,11.23,5.566,11.719,14.209c-3.125-0.586-6.738-0.293-10.84,0.879
c0.146,3.027,1.538,5.98,4.175,8.862h6.665c10.008-5.812,14.746-21.509,14.209-47.095c-2.883,0.099-4.834,1.856-5.859,5.273
c-2.59-1.416-3.126-3.76-1.611-7.031c2.147-1.709,4.638-2.904,7.471-3.589v-73.755l-3.297-2.71l4.176-0.879
c9.521-5.517,10.912-9.668,4.174-12.451c-13.086-5.566-24.243-2.611-33.471,8.862c-1.271,11.475,3.466,16.822,14.209,16.04v-4.395
c-9.814-2.88-10.646-5.273-2.49-7.178c2.88-2.344,3.71-5.297,2.49-8.862c4.052,1.318,7.397,4.273,10.034,8.862
c-1.074,10.303-6.934,15.65-17.578,16.04c-12.158-6.738-13.817-17.406-4.98-32.007c5.224-4.834,12.182-8.983,20.875-12.451h15.088
C550.807,133.768,571.168,129.91,583.766,111.989z"/>
</g>
</svg>
Yukarıdaki komutlar ile aşağıdaki SVG grafiği elde edilir.
Gördüğünüz gibi çok basit bir grafik için bile çokça matematiksel formüllerin üretilmesi gerekiyor. Bu yüzden SVG'leri oluşturmak için SVG desteği olan programlardan yardım almak en mantıklı yol olacaktır. Bu tür programlarda yapmamız gereken tek şey, çizim araçlarını kullanarak istediğimiz grafiği elde etmek ve bu grafiği SVG olarak kaydetmek olacaktır. Yani bu programlar ile SVG'leri oluşturmak oldukça kolaydır.
SVG çizgi animasyonlarında kullanılan ve öğrenmemiz gereken iki SVG komutu vardır.
stroke-dasharray
stroke-dashoffset
stroke-dasharray
SVG ile oluşturulan çizgiler, "stroke-dasharray" komutu ile kesikli hale getirilir. Örneğin,
stroke-dasharray="10"
komutu, çizginin, 10 piksel kesikli çizgi ve 10 piksel boşluk şablonu ile oluşturulmasını sağlar. 10 piksellik kesikli çizgi ve boşluk, çizgi tamamlanana kadar sıra ile uygulanır.
stroke-dasharray="20,10,5"
komutu, çizginin, 20, 10, 5 piksel kesikli çizgi ve boşluk tekrarları ile oluşturulmasını sağlar.
stroke-offset
Bu komut, stroke-dasharray ile oluşturulan kesikli çizgi şablonunun başlangıç yerini, belirlenen değer kadar sola taşır. Taşıma sonrasında dasharray ile belirlenen şablon (çizgi ve boşluklar) ile çizginin kalan kısımları oluşturulur. dashoffset komutunun gözlenebilmesi için mutlaka dasharray komutunun uygulanmış olması gerekmektedir. Örneğin,
stroke-dasharray="500"
stroke-dashoffset="0"
1000 piksellik çizgimiz, 500 piksel kesikli çizgi ve 500 piksel boşluk şablonu ile oluşturulmuş.
stroke-dasharray="500"
stroke-dashoffset="200"
Çizgimizin dasharray şablonu başlangıç yerinden 200 piksel sola kaydırılmış. Bu yüzden ilk kesikli çizgi elemanımızın boyutu 500 piksel değil, 300 piksellik uzunluğa sahip. Geri kalan kısımlar dasharray ile belirlenen şablona göre oluşturulur.
Videomuzda kullandığımız dasharray ve dashoffset ile ilgili uygulamaya ulaşmak için buraya tıklayınız.
SVG Çizgi Animasyonu Aşamaları
Öncelikle bir program ile SVG yapımızı oluşturuyoruz. Burada dikkat etmemiz gereken sadece iki nokta var; Bunlar, SVG elemanlarımızın çizgi özelliğinin olması ve yazı şeklindeki SVG elemanlarımızın (varsa) "path" biçimine dönüştürülmesi.
Oluşturduğumuz yapımızdaki elemanımızın çizgi uzunluğunu bulmamız gerekiyor. Eğer uzunlukları birbirinden farklı elemanlarımız varsa, en büyük elemanımızın çizgi uzunluğunu kullanmamız gerekiyor. Bu uzunluğa göre bazı dasharray ve dashoffset değerleri belirleyeceğiz. Çizgi uzunluğunun bulunmasında deneme yanılma yöntemi veya javascript yöntemi kullanılabilir. Şahsen deneme yanılma ile uğraşmamanızı ve 2 satır javascript komutu ile tam olarak çizgi uzunluğunu bulmanızı öneririm. Javascript komutlarımız için tarayıcılarda yer alan konsol (console) kısmını kullanabiliriz. Örneğin Chrome'dayken sağ tıklayıp incele seçeneği ile açılan pencerede console kısmını seçerek, javascript komutlarımızı yazabileceğimiz alana ulaşabiliriz. Yazmamız gereken komutlar;
var cizgi = document.querySelector("path");
cizgi.getTotalLength();
Çizgi uzunluğunu bulduktan sonra SVG yapımızı bir yazı editörü ile açıyoruz. svg düğümünün bitişinden hemen önce CSS komutlarımızı yazacağımız style düğümlerini açıyoruz. CSS ile SVG yapımızı oluşturan path elemanlarımızın dasharray değerlerini, bulduğumuz çizgi uzunluğu olarak belirliyoruz. Yani dasharray şablonundaki ilk kesikli çizgi, bütün elemanımızı kaplıyor.
Daha sonra bir animasyon oluşturmak için CSS keyframes komutu ile dashoffset değerleri belirliyoruz. Bu değeri bulduğumuz çizgi uzunluğundan başlatarak sıfıra doğru azaltıyoruz. İlk offset değeri, elemanımızın çizgi uzunluğuna eşit olduğu için, ekranda sadece dasharray şablonundaki boş kısım gözüküyor. Animasyonumuzun çalışmasıyla offset değeri azalıyor ve dasharray ile belirlenen kesikli çizgi görünür hale geliyor. Offset değerinin azalması ile şablondaki kesikli çizgi sanki elemanımızın etrafını sararak, elemanımızın ortaya çıkmasını sağlıyor. Offset değeri sıfır olduğunda, sadece dasharray şablonundaki çizgi kısmı görünür hale geliyor ve elemanımızın etrafı tamamen çizgi ile kaplanmış oluyor.
Şimdi bu işlemleri yaptığımız videomuzu izleyerek hem SVG yapımızı oluşturalım hem de CSS işlemleri ile animasyonumuzu hazırlayalım,
Serimizin ikinci bölümü için burayı tıklayınız
- Yayın Süresi : 2636 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 246119 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Napier'in Kemikleri (Matematik) 151 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.