GSAP kütüphanesi kullanarak SVG animasyonu yapma konusunu ele aldığımız bu makalede, Makeba Dansı'nı SVG kuklasıyla canlandırmayı deneyeceğiz. GSAP (GreenSock Animation Platform), web animasyonları oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bu kütüphane olmadan da SVG nesnelerini animasyona çevirebileceğimizi unutmayın. Yine de böyle bir aracı kullanmak işlerinizi epey kolaylaştıracaktır.
Öncelikle arka planın renklendirilmesi için "background-styles" adında bir stil kodu tanımladık. Bu stil kodu, 6 farklı arka plan rengiyle oluşturulan bir renk geçişi animasyonunu tanımlamaktadır. Makalede kullanacağımız koda başlamadan önce, dökümanımızın içerisinde yer alan CSS ve JavaScript kütüphanelerini eklemeliyiz. CSS stil kodları "background-styles" adlı id'ye sahip bir style etiketi içerisinde yer almaktadır. Bu stil kodları arka plan rengini belirlemekte ve renk geçiş animasyonunu gerçekleştirmektedir. Ayrıca, GSAP kütüphanesini eklemek için bir JavaScript bağlantısı kullanıyoruz.
Bu animasyonun arkaplanında bir de müzik var, tabii ki Jain'in Makeba adlı parçası. Müziği çalmak için HTML <audio> etiketini kullanıyoruz ve bu etikete "myAudio" id'sini atıyoruz. JavaScript kodu içerisinde sayfa yüklendiğinde bu etikete erişerek müziği çalıyoruz ve istediğimiz başlama süresini belirliyoruz.
SVG animasyonu için kullanacağımız SVG kuklasını <svg> etiketi içerisinde tanımlıyoruz. Kuklanın boyutlarını ve şekil kalitesini belirtmek için "viewBox", "shape-rendering" ve "text-rendering" gibi özellikleri kullanıyoruz. SVG içerisinde "path", "polygon" ve "g" gibi etiketlerle şekiller ve gruplar oluşturuyoruz. Her bir şekil ve grup, farklı id değerleriyle tanımlanmıştır. Böylece onlara ulaşmak daha kolay olacaktır.
JavaScript kodunda animate() adında bir async fonksiyon tanımlanmıştır. Bu fonksiyon, SVG animasyonunu gerçekleştirmek için kullanılacaktır. İçerisinde animateFoot() adında başka bir fonksiyonun çağrıldığı görülmektedir. Bu fonksiyon ayak animasyonunu gerçekleştirmektedir.
animate() fonksiyonunda GSAP kütüphanesinin gsap.to() metodu kullanılarak farklı SVG öğelerine animasyonlar uygulanmaktadır. Örneğin, gsap.to("#svg-main-group", {...}) koduyla "svg-main-group" id'li öğeye scaleX özelliğiyle ters dönme animasyonu uygulanmaktadır. Benzer şekilde diğer SVG öğelerine de dönme animasyonları uygulanmaktadır.
Son olarak, animate() fonksiyonunda animasyonun biraz yavaşlatılması için sleep() adında bir fonksiyon kullanılmaktadır. sleep() fonksiyonu, belirli bir süre boyunca animasyonun durmasını sağlayan bir fonksiyondur. Bu fonksiyon, setTimeout işlevini kullanarak belirtilen süre kadar bekler ve ardından bir Promise nesnesini çözer. Böylece animasyonun zamanlama yapması sağlanır.
Kodların içerisinde farklı bir kullanım dikkatinizi çekti mi? Aşağıdaki kod bloğu ne işe yarar?
if (!(i % 3)) gsap.to("#svg-main-group", {
scaleX: i % 2 ? 1 : -1
});Bu kod bloğundaki i%3 ifadesi bilindiği üzere i'nin 3'e bölümünden kalanı verir. İşte biz burada JavaScript'te 0'ın değilinin true olması özelliğinden yararlanıyoruz. Böylece i'nin değeri 3'e tam bölündüğünde kuklamız ters yöne dönüyor. scaleX'in değerindeki ternary ifade de 0 ve 1 değerleri alarak her 6'nın katında -1, her 3'e bölünüp 2'ye bölünmeyen değerde 1 yönüne döner.
