SVG Animation için Nasıl Yapılır Kılavuzu

Her ön uç mühendisi, parçalanmış cihaz ekosisteminin getirdiği zorlukların farkındadır. Farklı ekran boyutları, çözünürlükler ve en boy oranları tutarlı bir deneyim sunmayı zorlaştırıyor. Dahası, mükemmel piksel deneyimi sunmak isteyenler için.

Ölçeklenebilir Vektör Grafikleri (SVG'ler), bu sorunun bir kısmının çözülmesine yardımcı olur ve bunu çok iyi yapar. Sınırları olmasına rağmen, SVG'ler belirli durumlar için çok yardımcı olabilir ve iyi bir tasarım ekibiniz varsa, web tarayıcısına aşırı yük bindirmeden veya yükleme sürelerini engellemeden görsel olarak daha çarpıcı bir deneyim yaratabilirsiniz.

Son birkaç aydır, SVG'yi ve onun animasyon ve efekt yeteneklerini kapsamlı bir şekilde kullanan bir proje üzerinde çalışıyorum. Bu yazıda, web ön uç çalışmanıza yeni bir hayat getirmek için SVG'yi ve animasyon tekniklerini nasıl kullanabileceğinizi paylaşacağım.

ölçeklendirilebilir Vektör Grafiği

SVG, HTML'nin nasıl çalıştığına çok benzer şekilde XML tabanlı bir görüntü formatıdır. İki boyutlu grafikler oluşturmak için işaretlemede birleştirilebilen bir dizi tanıdık geometrik şekil için farklı öğeler tanımlar.

SVG belirtimi, 1999 yılında World Wide Web Consortium (W3C) tarafından geliştirilen açık bir standarttır.

Tüm büyük web tarayıcıları bir süredir SVG oluşturma desteğine sahiptir.

SVG grafikleri XML belgeleri olduğundan, web tarayıcıları, görüntülerle etkileşim kurmak için kullanılabilecek DOM düğümü tabanlı API'ler sağlar. Resimleri hayata geçirmek hakkında konuşun!

SVG Yolları

SVG'de aşırı güçlü bir öğe varsa, bu <path> öğesi olur.

Yol öğesi, hayal edebileceğiniz hemen hemen her türlü gelişmiş 2B şekli oluşturmak için kullanılabilecek temel bir şekildir.

Öğe, bir dizi çizim komutu alarak çalışır. 1967'deki Logo programlama diline çok benziyor, sadece modernize edildi ve süslü grafikler için tasarlandı. Öğe, bu çizim komutları dizisini d özniteliği aracılığıyla alır.

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Ekranda çizim yapan sanal bir kalem düşünebilirsiniz ve yol öğesindeki çizim yorumları yalnızca kalemi kontrol eder. Yukarıdaki örnekte, kaleme (10, 10) ( M10 10 ) konumuna hareket etmesi, (75, 10) ( L75 10 ) konumuna bir çizgi çizmesi, (75, 75) L75 75 bir çizgi çekmesi talimatı verilmektedir. L75 75 ve ardından başlangıç ​​noktasına ( Z ) dönerek yolu kapatmak için.

Arcs ( A ), karesel bezier eğrileri ( Q ), kübik bezier eğrileri ( C ) vb. gibi diğer çizim komutlarını kullanarak SVG'de çok daha karmaşık şekiller ve grafikler oluşturabilirsiniz.

Burada yol öğesi hakkında çok daha fazla bilgi edinebilirsiniz.

SVG Yolları ve CSS

"Tamam Juan, anladım. Yollar güçlüdür, ama onları nasıl canlandırırım?” diyorsun.

İlk tekniğimiz için iki SVG özelliğinden yararlanacağız: stroke-dasharray ve stroke-dashoffset .

Strok-dasharray niteliği, yolu konturlamak için kullanılan tire ve boşluk modelini kontrol eder. Çizgilerinizi sürekli bir mürekkep darbesi yerine bir grup tire ve boşluk olarak çizmek isterseniz, kullanacağınız özellik budur.

SVG görüntüleri web tarayıcısının DOM'sinin bir parçası ve kontur-dasharray bir sunum öğesi olduğundan, öznitelik CSS kullanılarak da ayarlanabilir.

Benzer şekilde, kontur-dashoffset özniteliği (ki bu, tireyi başlatmak için tire deseninin ne kadar ilerisinde olduğunu belirtir) CSS kullanılarak da kontrol edilebilir.

Bu iki SVG özelliği birlikte, SVG yollarını canlandırmak için kullanılabilir ve izleyiciye yolların kademeli olarak çizildiği yanılsamasını verir.

Bu ikinci dereceden bezier eğrisini alın, örneğin:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Bu yolu ekranda yavaş yavaş ve düzgün bir şekilde çiziliyormuş gibi canlandırmak için, tire (ve boşluk) uzunluklarını, vuruş-dasharray özniteliğini kullanarak yol uzunluğuna eşit olarak ayarlamamız gerekecek. Bu, kesikli eğrideki her bir çizginin ve boşluğun uzunluğunun tüm yolun uzunluğuna eşit olacağı şekildedir.

Daha sonra, vuruş-dashoffset özniteliğini kullanarak çizgi ofsetini 0'a ayarlayacağız. Bu, yolun ekranda katı bir eğri olarak görünmesini sağlayacaktır (esas olarak ilk çizgiye bakıyoruz ve zaten her çizgiyi tüm alana yaydık) eğrinin uzunluğu). Çizgi ofsetini eğrinin uzunluğuna eşitleyerek, görünmez bir eğri elde edeceğiz (şimdi eğrinin tam bir boşluk olarak -bir tireyi hemen takip eden kısım- olarak oluşturulan eğrisine bakıyoruz).

Şimdi Strok-dashoffset özelliğini canlandırarak, eğrinin kademeli olarak ekranda görünmesini sağlayabilirsiniz.

CodePen'de Toptal Blog (@toptalblog) tarafından kalem Toptal - SVG ve CSS yollarına bakın.

Gördüğünüz gibi, eğri her zaman oradadır. Sadece tire ofsetini, kesikli kısmın azar azar görünmesi için değiştiriyoruz.

Aynı prensibi kullanarak ancak daha fazla yolla bunu bir adım daha ileri götürebilirsiniz:

CodePen'de Toptal Blog (@toptalblog) tarafından kalem Toptal - SVG ve CSS yollarına bakın.

Burada sabit bir siyah eğriniz var, yol boyunca hareket eden kırmızı bir eğri ve kırmızı olanı takip eden ancak 40 piksel geride olan başka bir siyah eğri.

Stroke-dasharray ve Stroke-dashoffset, SVG yollarınıza çok sayıda animasyon ve efekt uygulamak için kullanılabilecek çok güçlü iki özelliktir. İki özelliği denemek için kullanabileceğiniz bu kullanışlı aracı deneyebilirsiniz.

SVG Yolları Boyunca Nesneleri Canlandırma

SVG ve CSS ile yapabileceğiniz bir başka harika şey de, bir yolu izleyen nesneleri veya öğeleri canlandırmaktır.

Animasyon için kullanacağımız 2 SVG özelliği var:

• offset-path: offset-path CSS özelliği, öğenin konumlandığı ofset yolunu belirtir.

• offset-distance: offset-distance CSS özelliği, bir ofset yolu boyunca bir konumu belirtir.

Bu iki özelliği birleştirerek aşağıdaki gibi animasyonları kolayca oluşturabilirsiniz:

CodePen'de Toptal Blog (@toptalblog) tarafından kalem Toptal - SVG ve CSS yollarına bakın.

Gördüğünüz gibi yeni bir div.ball elementimiz var.

Bu öğe herhangi bir şey olabilir, bir div, bir resim, metin, her neyse. Bu örnekteki fikir, offset-path ve offset-mesafe kullanımıyla, öğeye izlemesi ve mesafeyi canlandırması için bir yol verebilmeniz ve öğenin yol boyunca hareket etmesidir.

JavaScript Kullanan SVG Animasyonları

Bunların hepsi zaten yeterince süslü değilse, her zaman JavaScript'e başvurabilirsiniz.

SVG öğelerini JavaScript ile canlandırmak, DOM öğelerini canlandırmak gibi olabilir. Ancak JavaScript ile yukarıda incelediğimiz animasyon tekniklerini daha kolay bir şekilde elde edebilirsiniz.

Önceden, CSS'mizde yol uzunluklarını sabit kodlamamız gerekiyordu. JavaScript işlevi path.getTotalLength() yardımıyla, yolun uzunluğunu anında hesaplamak ve gerektiğinde kullanmak mümkündür. Burada daha fazla bilgi edinebilirsiniz.

Ayrıca, SVG animasyonlarını olduğundan çok daha kolay hale getirebilecek bir dizi kitaplık zaten hizmetinizdedir.

Snap.svg, JavaScript kullanarak SVG resimleri çizmeyi kolaylaştırmakla kalmaz, aynı zamanda onları canlandırmayı .animate({}) çağırmak kadar basit hale getirir.

Başka bir kitaplık olan anime.js, bir div öğesinin yalnızca birkaç satır kodla bir SVG yolunu izlemesini sağlar.

Kendi başına daha fazlasını yapan ancak sonuçların yine de çarpıcı görünmesini sağlayan bir kitaplık arıyorsanız, aradığınız şey Vivus. SVG yol animasyonuna farklı, daha yapılandırma odaklı bir yaklaşım getiriyor. Bu kütüphane ile sadece çizmek istediğiniz SVG elementine bir ID eklemeniz ve o ID ile bir Vivus nesnesi tanımlamanız yeterli. Gerisini Vivus halledecek.

Daha fazla okuma

Aşağıda, SVG görüntüleri ile uğraşırken ve onları canlandırırken faydalı bulabileceğiniz kaynakların bir listesi bulunmaktadır:

SVG animasyonuyla daha derine inmek için, SVG görüntülerini canlandırmanın üç yolu hakkında bu kısa makaleyi okuyabilir ve CSS Tricks tarafından video ekran görüntüsünü izleyebilirsiniz.

Bu makalenin kapsamadığı bir şey, SVG görüntülerini Senkronize Multimedya Entegrasyon Dili (SMIL) ile canlandırmaktır. SVG için CSV kullanmak size zaten aşina olduğunuz bir şeyle çalışma avantajı sağlarken, SMIL işleri bir sonraki düzeye taşır.

SMIL ile, yalnızca SVG kullanarak şekil değiştirme gibi gelişmiş animasyon efektleri uygulayabilirsiniz. Bu tür efektler için SMIL kullanımına yönelik kısa ama etkili bir kılavuz burada mevcuttur.

Her ne kadar, SMIL desteği şu anda biraz sinirli olsa da (punto amaçlanmamıştır).

Web için Ödün Vermeyen Animasyonlar

Bu makalede, SVG yollarında CSS veya HTML öğesi kullanarak SVG öğelerini canlandırmanın birkaç yolunu incelediniz.

SVG hafiftir ve ekran boyutu, yakınlaştırma düzeyi ve ekran çözünürlüğünden bağımsız olarak keskin grafikler oluşturmak için kullanılabilir. SVG ile, standart web teknolojilerini kullanmanın avantajlarından yararlanırken, modern ve canlı bir deneyim sunmak artık her zamankinden daha kolay.

Ve bu kadar! Umarım bu SVG animasyon eğitimini faydalı bulmuşsunuzdur ve okumaktan keyif almışsınızdır.

Toptal Mühendislik Blogunda Daha Fazla Okuma:

• CSS'de SVG Animasyonlarına Nasıl Yaklaşılır?