CSS ile SVG Animasyonuna Yeni Başlayanlar İçin Kılavuz

Ölçeklenebilir Vektör Grafikleri (SVG'ler) yalnızca görüntü dosyalarından daha fazlasıdır. Bir XML uygulaması olarak SVG'ler, HTML'ye çok benzeyen ve çalışan biçimlendirme içerir. Bunları ayrıca CSS ve JavaScript koduyla birlikte kullanabilirsiniz. Bu, web tasarımı ve diğer dinamik ortamlar için iyi çalışan karmaşık görüntüler oluşturarak SVG dosyalarını canlandırmayı mümkün kılar.

Ancak bir SVG animasyonunu nasıl yaparsınız? Bir SVG şekliyle başlayın, CSS kullanarak canlandırın ve animasyonu kendi çalışmanızda kullanmak için bu ilkeleri geliştirin.

SVG'leri HTML ve CSS ile Canlandırma

SVG'leri programlı olarak canlandırmak için JavaScript'i kullanabilmenize rağmen, CSS'nin artık animasyonlar için de iyi bir desteği var. Tüm örnek kodu adresinde bulabilirsiniz. Bu proje için CodePen.

HTML İçinde SVG Görüntüsü Oluşturma

Bu süreçteki ilk adım, birlikte çalışacağınız SVG görüntüsünü oluşturmaktır. SVG işaretlemesini CodePen'deki HTML panelinde bulabilirsiniz.

SVG Yapısı

SVG'ler HTML ile benzer bir biçimi paylaşırken, bunları oluşturmak için kullandığınız etiketler farklıdır. Bir SVG'de açılış ve kapanış etiketleri bulunur () çeşitli farklı özellikler içerebilir. Bizim durumumuzda, kullanıyoruz

İD ve görünüm kutusu özellikleri. id özelliği, diğer tüm HTML kimlikleri gibi çalışır ve size CSS/JS'nizde kullanmanız için benzersiz bir tanımlayıcı sağlar. viewBox özelliği, SVG'mizin boyutunu ayarlar.

<!-- Duyarlı bir boyuta sahip SVG -->
<svg kimliği="MUOSVGAanimasyon" görünüm kutusu="0 0 800 600">
<!-- SVG içeriği -->
</svg>

Aşağıdaki örnekte gösterildiği gibi bunun yerine genişlik ve yükseklik özelliklerini kullanabilirsiniz. Ancak viewBox, en-boy oranını bozmadan görünüm alanının boyutuyla eşleşecek duyarlı bir SVG oluşturur.

 statik boyutunda  olan SVG 
<svg kimliği="MUOSVGAanimasyon" genişlik="800" yükseklik="600">
<!-- SVG içeriği -->
</svg>

SVG Şekilleri

Hizmetinizde olan bir dizi farklı şekil aracıyla SVG'lerle ayrıntılı görüntüler oluşturabilirsiniz. Bu SVG örneği, mevcut şekillerden üçünü kullanır, ancak başkaları da vardır. Bu örnekteki şekillerin her birinin, CSS animasyonlarının daha sonra kullanabileceği benzersiz bir kimliği vardır.

• SVG Elips: Bu bir daire/oval araçtır. Y/x eksen yarıçapı (rx/ry), dolgu rengi ve kontur genişliği için özellikleri belirtir. Bu araçla seçeceğiniz yarıçapın şeklin çapının yarısı olacağını unutmamak önemlidir.

<elips kimliği="daire" rx="100" ry="100" doldur="#ffed00" kontur genişliği="0"/>

• SVG Rect: SVG rect aracı bir kare veya dikdörtgen oluşturur. Bu, genişlik/yükseklik, dönüştürme, dolgu rengi ve kontur genişliği özelliklerine sahiptir.

<doğru kimliği="Meydan" genişlik="200" yükseklik="200" dönüştürmek="tercüme et (300 200)" doldur="#05f"
 kontur genişliği="0"/>

• SVG Çokgeni: Belirli sayıda nokta belirlemek ve farklı boyutlarda rastgele şekiller oluşturmak için bir SVG çokgeni kullanın. Örnekteki çokgen üç kenarlıdır, bu onu bir üçgen yapar ve özelliklerinde çizilen her noktanın konumunu görebilirsiniz. Bununla birlikte, üçgenin konumu, dolgu rengi ve kontur genişliği için özelliklerimiz var.

<çokgen kimliği="üçgen" puan="15,-97 115,102 -84,102 15,-97"
 dönüştürmek="çevir (0,0)" doldur="#f00" kontur genişliği="0"/>

Animasyon yerleştirildikten sonra şekiller yan yana sıralanacaktır.

Bu üç SVG şekli en yaygın olanlardan bazılarıdır, ancak aralarından seçim yapabileceğiniz daha fazlası vardır. Aşağıdaki şekilleri aşağıdaki durumlarda kullanabilirsiniz: bir SVG animasyonuyla çalışmak:

• SVG Çemberi: Bu şekil bir elipse benzer, ancak her zaman eşit X ve Y yarıçaplarına sahiptir.
• SVG Çizgisi: Bir SVG çizgisi, her iki ucunda birer nokta bulunan tek bir çizgi parçasıdır.
• SVG Çoklu Çizgi: Çoklu çizgiler temel çizgiler gibidir, sadece ikiden fazla noktası olabilir.
• SVG Çokgeni: SVG çokgenleri dikdörtgenler gibidir, yalnızca dörtten fazla noktaya sahip olabilirler, bu da karmaşık şekilleri mümkün kılar.
• SVG Yolu: SVG yolları, Adobe Photoshop'taki kalem aracına benzer şekilde çalışır. Çizgiler bir çoklu çizgi/çokgen gibi bağlanabilir, ancak bunlara uygulanan eğriler de olabilir.

SVG'leri CSS ile Canlandırma

Artık SVG'nizde bazı şekiller olduğuna göre, CSS animasyonuna geçme zamanı. Şekillerin her biri, sahip olduğunuz seçeneklerden bazılarını göstermek için farklı bir animasyona sahiptir, ancak kendi tasarımlarınızla keşfedebileceğiniz daha çok şey vardır. Daire ekranda hareket eder, karenin köşeleri yuvarlaklaşır ve üçgen döner. Bütün bunlar kullanım Düzgün animasyonlar oluşturmak için CSS ana kareleri.

Çemberi Dönüştür ve Çevir Kullanarak Taşıma

SVG örneğindeki daire, animasyon döngüsü sırasında ekranın altından üstüne doğru hareket eder. Dairenin hareket edebilmesi için bir CSS özelliği aracılığıyla daireye bir animasyon atamanız gerekir:

#daire {
 animasyon: circle_anim 2000ms doğrusal sonsuz normal ileri
}

Değerdeki ilk kelime, daire_anim, animasyonun adıdır. İki saniye boyunca çalışır (2000ms). bir doğrusal hızını sabit tutan ve bir sonsuz içinde kaç kez ileri yön. Animasyonun ayrı aşamalarını tanımlamak için ana kareleri kullanabilirsiniz:

@ana kareler çember_anim {
 0% { dönüştürmek: Çevirmek(155 piksel, 305 piksel) }
 45% { dönüştürmek: Çevirmek(155 piksel, -123 piksel) }
 50% { dönüştürmek: Çevirmek(-123 piksel, -123 piksel) }
 55% { dönüştürmek: Çevirmek(-123 piksel, 728 piksel) }
 60% { dönüştürmek: Çevirmek(155 piksel, 728 piksel) }
 100% { dönüştürmek: Çevirmek(155 piksel, 305 piksel) }
}

Bu animasyonda altı ana kare vardır, bu nedenle daire her döngüde altı farklı konuma hareket edecektir. bu dönüştürmek: çevirmek özellik, her aşamada dairenin konumunu belirler. %0'da daire ekranın ortasındadır ve %45 yukarı ve görüş dışında hareket eder. %55'te görünümün altına inmeden önce %50 oranında ekranın soluna hareket etti. Daire %60 oranında yatay konumuna geri döner ve daire ekranın ortasına geri döndüğünde animasyon %100 oranında tamamlanır.

Meydanın Sınır Yarıçapı Özelliğini Canlandırın

Örnekteki kare, genel özellik animasyonları için iyi bir referans sunar. Kullanılacak doğru söz dizimini bildiğiniz sürece, herhangi bir CSS özelliğini canlandırabilirsiniz. border-radius özelliği bunun iyi bir göstergesidir. Kare, yuvarlak köşelere dönüşen ve ardından tekrar kare köşelere dönüşen keskin köşelere sahiptir.

#Meydan { animasyon: kare_anim 2000ms kolay giriş-çıkış sonsuz normal ileri }

Kare animasyon square_anim olarak adlandırılır ve iki saniyelik bir çalışma süresine sahiptir. bu giriş-çıkış kolaylığı eğrisi, animasyonu başında ve sonunda yavaşlatarak pürüzsüz bir efekt oluşturur.

@ana kareler square_anim {
 0% { rx: 0 piksel; ry: 0 piksel }
 45% { rx: 40 piksel; ry: 40 piksel }
 55% { rx: 40 piksel; ry: 40 piksel }
 100% { rx: 0 piksel; ry: 0 piksel }
}

Gördüğünüz gibi, bu animasyonun dört ana karesi var. X ve Y kenarlık yarıçapı, %0 ile %45 arasında 0 pikselden 40 piksele değişir ve 40 pikselde %55'e kadar duraklar. Ardından, animasyon %100'e ulaştığında her yarıçap için 0 piksele geri döner.

SVG Üçgenini Dönüştürerek Döndür

Örnekteki son SVG animasyonu, merkez noktasının etrafında dönen üçgen ile en basit olanıdır. Şekil, her iki saniyede bir tam bir devrimi tamamlar ve sonsuz bir şekilde çalışmaya devam eder. Sonunda animasyonun yavaşlamasına neden olan bir gevşeme eğrisine sahiptir. Animasyona üçgen_anim adı verilir.

#üçgen { animasyon: üçgen_anim 2000ms serbest bırakma sonsuz normal ileri }

Bu animasyonda biri %0 ve diğeri %100 olmak üzere iki ana kare vardır. Dönüştürme döndürme özelliği, üçgeni %0'da 0 dereceden %100'de 360 ​​dereceye çevirerek tam bir dönüş oluşturur.

@ana kareler üçgen_anim {
 0% { dönüştürmek: Çevirmek(644 piksel, 297 piksel) döndürmek(0 derece) }
 100% { dönüştürmek: Çevirmek(644 piksel, 297 piksel) döndürmek(360 derece) }
}

Diğer Özellikler Nasıl Canlandırılır

Yukarıda ele alınan üç animasyon, SVG'lerle çalışırken iyi bir başlangıç ​​noktasıdır, ancak muhtemelen bunu daha da ileri götürmek isteyeceksiniz. SVG'nize atayabileceğiniz hemen hemen tüm özellik değerlerini ayarlamak için CSS animasyon kuralını kullanabilirsiniz. Bu, boyutlandırma ve konumlandırma gibi temel değerlerin yanı sıra kenarlıklar, gölgeler ve karışım modları gibi daha gelişmiş değerleri içerir.

CSS'nin işi yapamadığı nadir durumlarda, SVG görüntülerini canlandırmak için JavaScript kodunu kullanabilirsiniz. SVG'lerinizle bir sonraki adımı atmaya hazır olduğunuzda, bu konuda size yardımcı olacak birçok kılavuz bulabilirsiniz.

Kendi SVG Animasyonlarınızı Yapmak

İster bir web tasarımcısı, ister yazılım geliştiricisi veya sadece yaratıcı bir kişi olun, SVG animasyonlarını yapmak eğlenceli ve tatmin edici olabilir. Temel bilgilere alıştıktan sonra, web'de size web tabanlı animasyon konusunda yardımcı olabilecek pek çok kaynak bulabilirsiniz.

Web Sitenizde Kullanabileceğiniz 10 CSS Arka Plan Deseni

Sonrakini Oku