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

Animasyonlar, web'in her yerde bulunan bir parçasıdır. İnternetin ilk günlerinde web sitelerini rahatsız eden yanıp sönen GIF resimlerinin aksine, bugünün animasyonları daha incelikli ve zevkli. Tasarımcılar ve ön uç uzmanları, web sitelerinin daha gösterişli görünmesini sağlamak, kullanıcı deneyimini geliştirmek, önemli öğelere dikkat çekmek ve bilgi iletmek için bunları kullanır.

Web geliştiricileri, harici kitaplıklar kullanmadan animasyonlar oluşturmak için SVG ve CSS'nin gücünü birleştirmekten yararlanabilir. Bu SVG animasyon öğreticisi, gerçek dünya projeleri için özel animasyonların nasıl oluşturulacağını gösterir.

CSS Kullanarak SVG Animasyonu: Temel Kavramlar

SVG'leri CSS ile canlandırmadan önce, geliştiricilerin SVG'lerin dahili olarak nasıl çalıştığını anlamaları gerekir. Neyse ki HTML'ye benziyor: SVG öğelerini XML sözdizimi ile tanımlıyor ve sanki HTMLymiş gibi CSS ile biçimlendiriyoruz.

SVG öğeleri özellikle grafik çizmek için oluşturulmuştur. Bir dikdörtgen çizmek için <rect> , daire çizmek için <circle> kullanabiliriz.—SVG ayrıca <ellipse> , <line> , <polyline> , <polygon> ve <path> tanımlar.

Not: SVG öğelerinin tam listesi, senkronize multimedya entegrasyon dilini (SMIL) kullanarak animasyonlar oluşturmanıza olanak tanıyan <animate> öğesini bile içerir. Bununla birlikte, geleceği belirsizdir ve Chromium ekibi, mümkün olduğunda SVG'leri canlandırmak için CSS veya JavaScript tabanlı bir yaklaşım kullanılmasını önerir.

Kullanılabilir öznitelikler öğeye bağlıdır, bu nedenle <rect> width ve height özniteliklerine sahipken, <circle> öğesi yarıçapını tanımlayan r özniteliğine sahiptir.

Çoğu HTML öğesinin alt öğesi olabilirken, çoğu SVG öğesinin alt öğesi olamaz. Bir istisna, CSS stillerini ve dönüşümlerini aynı anda birden çok öğeye uygulamak için kullanabileceğimiz grup <g> .

<svg> Öğesi ve Nitelikleri

HTML ve SVG arasındaki bir diğer önemli fark, özellikle belirli bir dış <svg> öğesinin viewBox özniteliği aracılığıyla öğeleri nasıl konumlandırdığımızdır. Değeri boşluk veya virgülle ayrılmış dört sayıdan oluşur: min-x , min-y , width ve height . Bunlar birlikte, tarayıcının SVG çizimimizin ne kadarını oluşturmasını istediğimizi belirler. Bu alan, <svg> öğesinin width ve height öznitelikleri tarafından tanımlandığı gibi, görünüm alanının sınırlarına uyacak şekilde ölçeklenecektir.

Mektup kutusu oluşturma söz konusu olduğunda, görünümün width ve height niteliklerinin oranı, gerçekten de, görünüm viewBox niteliğinin width ve height bölümlerinin oranından farklı olabilir.

Varsayılan olarak, SVG tuvalinin en boy oranı, belirtilenden daha büyük bir viewBox pahasına korunur ve böylece görünüm alanında daha küçük, mektup kutulu bir işlemeye neden olur. Ancak preserveAspectRatio özniteliği aracılığıyla farklı bir davranış belirleyebilirsiniz.

Bu, görüntüleri ayrı ayrı çizmemize ve bağlam veya işleme boyutu ne olursa olsun tüm öğelerin doğru şekilde yerleştirileceğinden emin olmamızı sağlar.

SVG görüntülerini elle kodlayabilirsiniz, ancak daha karmaşık görüntüler bir vektör grafik programı gerektirebilir (SVG animasyon öğreticimiz her iki tekniği de gösterir). Editör seçimim Affinity Designer'dır, ancak herhangi bir düzenleyici burada ele alınan basit işlemler için yeterli işlevsellik sağlamalıdır.

CSS Geçişleri ve Animasyonları

CSS geçişleri, özellik değişikliklerinin oranını ve süresini tanımlamamıza izin verir. Başlangıç ​​değerinden bitiş değerine anında atlamak yerine, fare ile üzerine geldiğinizde bir SVG dairesinin renginin değiştiği bu örnekte olduğu gibi değerler sorunsuz bir şekilde geçiş yapar:

CodePen'de Filip Defar (@dabrorius) tarafından kaleme geçiş örneğine bakın.

Geçiş yapmak istediğimiz özelliğin adını, geçişin süresini, bir geçiş zamanlama işlevini (yavaşlatma işlevi olarak da bilinir) ve etki başlamadan önceki gecikmenin uzunluğunu kabul eden transition özelliği ile geçişleri tanımlayabiliriz. :

 /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s;

Her biri ayrı geçiş değerlerine sahip olabilen birden çok CSS özelliği için geçişler tanımlayabiliriz. Ancak, bu yaklaşımın iki belirgin sınırlaması vardır.

İlk sınırlama, bir özellik değeri değiştiğinde geçişlerin otomatik olarak tetiklenmesidir. Bu, bazı kullanım durumlarında sakıncalıdır. Örneğin, sonsuz döngüye sahip bir animasyonumuz olamaz.

İkinci sınırlama, geçişlerin her zaman iki adımı olmasıdır: ilk durum ve son durum. Animasyonun süresini uzatabiliriz, ancak farklı ana kareler ekleyemiyoruz.

Bu yüzden daha güçlü bir konsept var: CSS animasyonları. CSS animasyonlarıyla birden çok ana kareye ve sonsuz bir döngüye sahip olabiliriz:

CodePen'de Filip Defar'ın (@dabrorius) kalem animasyonu örneğine bakın.

CSS özelliklerini birden çok ana kare üzerinde canlandırmak için, önce bir @keyframes kareler kuralı kullanarak ana kareleri tanımlamamız gerekir. Ana karelerin zamanlaması göreceli birimler (yüzdeler) olarak tanımlanır çünkü bu noktada animasyon süresini henüz tanımlamadık. Her animasyon karesi, o andaki bir veya daha fazla CSS özelliğinin değerlerini tanımlar. CSS animasyonları, ana kareler arasında sorunsuz geçişler sağlayacaktır.

animation özelliğini kullanarak istenen öğeye açıklanan ana karelere sahip animasyonu uygularız. transition özelliğine benzer şekilde, bir süre, bir hareket hızı işlevi ve bir gecikme kabul eder.

Tek fark, ilk parametrenin bir özellik adı yerine @keyframes :

 /* @keyframes name | duration | easing-function | delay */ animation: my-sliding-animation 3s linear 1s;

Hamburger Menü Geçişini Canlandırma

Artık SVG'leri canlandırmanın nasıl çalıştığına dair temel bir anlayışa sahip olduğumuza göre, klasik bir animasyon oluşturmaya başlayabiliriz—bir "hamburger" simgesi ile bir kapat düğmesi ("X") arasında sorunsuz geçiş yapan bir menü geçişi:

CodePen'de Filip Defar (@dabrorius) tarafından kaleme alınan Hamburger Kalemine bakın.

Bu ince ama değerli bir animasyon. Simgenin menüyü kapatmak için kullanılabileceğini bildirerek kullanıcının dikkatini çeker.

Gösterimize üç satırlı bir SVG öğesi oluşturarak başlıyoruz:

 <svg class="hamburger"> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--top" /> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--mid" /> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--bot" /> </svg>

Her satırın iki özniteliği vardır. x1 ve y1 , satırın başlangıcının koordinatlarını, x2 ve y2 ise satırın sonunun koordinatlarını temsil eder. Konumları belirlemek için göreli birimleri kullandık. Bu, görüntü içeriğinin, içerdiği SVG öğesine sığacak şekilde yeniden boyutlandırılmasını sağlamanın basit bir yoludur. Bu yaklaşım bu durumda işe yararken, büyük bir dezavantaj var: Bu şekilde konumlandırılan öğelerin en boy oranını koruyamıyoruz. Bunun için <svg> öğesinin viewBox niteliğini kullanmamız gerekir.

SVG öğelerine CSS sınıfları uyguladığımızı unutmayın. CSS aracılığıyla değiştirilebilecek birçok özellik vardır, bu yüzden SVG öğelerimize bazı temel stiller uygulayalım.

<svg> öğesinin boyutunu ayarlayacağız, ayrıca tıklanabilir olduğunu belirtmek için imleç türünü değiştireceğiz. Ancak çizgilerin rengini ve kalınlığını ayarlamak için stroke ve stroke-width özelliklerini kullanacağız. color veya border kullanmayı beklemiş olabilirsiniz, ancak <svg> kendisinden farklı olarak SVG alt öğeleri HTML öğeleri değildir, bu nedenle genellikle farklı özellik adlarına sahiptirler:

 .hamburger { width: 62px; height: 62px; cursor: pointer; } .hamburger__bar { stroke: white; stroke-width: 10%; }

Bu noktada render yaparsak, her üç çizginin de aynı boyut ve konuma sahip olduğunu ve tamamen örtüştüğünü göreceğiz. Ne yazık ki, başlangıç ​​ve bitiş konumlarını CSS ile bağımsız olarak değiştiremiyoruz, ancak tüm öğeleri taşıyabiliriz. transform CSS özelliği ile üst ve alt çubukları hareket ettirelim:

 .hamburger__bar--top { transform: translateY(-40%); } .hamburger__bar--bot { transform: translateY(40%); }

Çubukları Y ekseninde hareket ettirerek güzel görünümlü bir hamburger elde ederiz.

Şimdi ikinci durumumuzu kodlama zamanı: kapat düğmesi. İki durum arasında geçiş yapmak için SVG öğesine uygulanan bir .is-opened CSS sınıfına güveniyoruz. Sonucu daha erişilebilir kılmak için, SVG'mizi bir <button> öğesine saralım ve bu düzeydeki tıklamaları ele alalım.

Sınıf ekleme ve kaldırma işlemi basit bir JavaScript pasajı ile gerçekleştirilecektir:

 const hamburger = document.querySelector("button"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("is-opened"); });

X'imizi oluşturmak için hamburger barlarımıza farklı bir transform özelliği uygulayabiliriz. Yeni transform özelliği eskisini geçersiz kılacağından, başlangıç ​​noktamız üç çubuğun orijinal, paylaşılan konumu olacaktır.

Buradan, üst çubuğu merkezi etrafında saat yönünde 45 derece, alt çubuğu ise saat yönünün tersine 45 derece döndürebiliriz. Orta çubuğu, X'in merkezinin arkasına gizlenecek kadar dar olana kadar yatay olarak küçültebiliriz:

 .is-opened .hamburger__bar--top { transform: rotate(45deg); } .is-opened .hamburger__bar--mid { transform: scaleX(0.1); } .is-opened .hamburger__bar--bot { transform: rotate(-45deg); }

Varsayılan olarak, SVG öğeleri için transform-origin özelliği normalde 0,0 . Bu, çubuklarımızın görünümün sol üst köşesinde döndürüleceği anlamına gelir, ancak biz onların merkez etrafında dönmesini istiyoruz. Bunu düzeltmek için transform-origin özelliğini .hamburger__bar sınıfı için center şekilde ayarlayalım.

transition CSS Özelliklerini Canlandırma

transition CSS özelliği, tarayıcıya iki farklı CSS özelliği durumu arasında sorunsuz geçiş yapmasını söyler. Burada, çubukların konumlarını, yönünü ve ölçeğini belirleyen transform özelliğindeki değişikliklerimizi canlandırmak istiyoruz.

Ayrıca transition-duration özelliğini kullanarak geçişin süresini de kontrol edebiliriz. Animasyonun hızlı görünmesi için 0,3 saniyelik kısa bir süre ayarlayacağız:

 .hamburger__bar { transition-property: transform; transition-duration: 0.3s; ... }

İhtiyacımız olan tek JavaScript parçası, simge durumunu değiştirilebilir yapan bittir:

 const hamburger = document.querySelector("button"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("is-opened"); });

Burada, querySelector() kullanarak .mute sınıfına göre dış SVG öğesini seçiyoruz. Ardından bir tıklama olay dinleyicisi ekliyoruz. Bir click olayı tetiklendiğinde, .is-active sınıfını yalnızca <svg> üzerinde değiştiririz; hiyerarşide daha derinde değil. CSS animasyonunu yalnızca .is-active sınıfına sahip öğelere uyguladığımız için, bu sınıfın değiştirilmesi animasyonu etkinleştirecek ve devre dışı bırakacaktır.

Son bir dokunuş olarak, HTML gövdesini, simgeyi yatay ve dikey olarak ortalamamıza yardımcı olacak esnek bir kapsayıcıya dönüştüreceğiz. Ayrıca şık bir "karanlık mod" görünümü ve hissi elde etmek için arka plan rengini çok koyu griye ve simge rengini beyaza güncelleyeceğiz:

 body { display: flex; justify-content: center; align-items: center; background-color: #222; height: 100vh; }

Bununla, bazı temel CSS'leri ve kısa bir JavaScript pasajını kullanarak tamamen işlevsel bir animasyonlu düğme oluşturduk. Çeşitli animasyonlar yapmak için uyguladığımız dönüşümleri değiştirmek kolaydır. Okuyucular, cila için biraz fazladan CSS içeren CodePen'i kolayca çatallayabilir ve yaratıcı olabilir.

Harici Düzenleyicilerden SVG Verileriyle Çalışma

Hamburger menümüz son derece basittir. Ya bir şeyi daha karmaşık hale getirmek istersek? İşte bu noktada SVG'yi elle kodlamak zorlaşır ve vektör grafik düzenleme yazılımı yardımcı olabilir.

İkinci SVG animasyonumuz, kulaklık simgesini gösteren bir sessiz düğmesidir. Müzik aktif olduğunda, simge titreşecek ve dans edecek; sesi kapatıldığında, simgenin üstü çizilir:

CodePen'de Filip Defar (@dabrorius) tarafından kalemin sesini kapatma düğmesi - 5 - kırmızı üstü çizili bölüme bakın.

Çizim simgeleri bu öğreticinin (ve muhtemelen iş tanımınızın) kapsamı dışında olacaktır, bu nedenle önceden çizilmiş bir SVG simgesiyle başlayacağız. Hamburger menü örneğimizle aynı body stilini de isteyeceğiz.

Onunla çalışmadan önce SVG kodunu temizlemek isteyebilirsiniz. Bunu, açık kaynaklı, Node.js tabanlı bir SVG optimize edici aracı olan svgo ile yapabilirsiniz. Bu, gereksiz öğeleri kaldıracak ve sınıfları eklemek ve farklı öğeleri birleştirmek için yapmanız gereken kodu elle düzenlemeyi kolaylaştıracaktır.

Görüntü düzenleme yazılımında oluşturulan SVG simgelerinin göreli birimleri kullanması olası değildir. Ek olarak, simgeyi içeren SVG öğesinin en boy oranından bağımsız olarak simgenin en boy oranının korunduğundan emin olmak istiyoruz. Bu kontrol seviyesini mümkün kılmak için viewBox özniteliğini kullanacağız.

ViewBox'ın kullanımı kolay bazı değerlere ayarlanabilmesi için viewBox yeniden boyutlandırmak iyi bir fikirdir. Bu durumda, onu 100 x 100 piksel olan bir viewBox dönüştürdüm.

Simgenin ortalandığından ve uygun boyutta olduğundan emin olalım. mute sınıfını temel SVG öğemize uygulayacağız ve ardından aşağıdaki CSS stillerini ekleyeceğiz:

 .mute { fill: white; width: 80px; height: 70px; cursor: pointer; }

Burada, animasyonumuzun dönüşleri sırasında kırpmayı önlemek için width height biraz daha büyüktür.

SVG Animasyon Başlangıç ​​Noktamız

Artık temiz olan SVG, üç <path> öğesi içeren tek bir <g> öğesi içerir.

Yol öğesi, çizgiler, eğriler ve yaylar çizmemizi sağlar. Yollar, şeklin nasıl çizilmesi gerektiğini açıklayan bir dizi komutla tanımlanır. Simgemiz birbirine bağlı olmayan üç şekilden oluştuğundan, onları tanımlamak için üç yolumuz var.

g SVG öğesi, diğer SVG öğelerini gruplamak için kullanılan bir kapsayıcıdır. Titreşimli ve dans eden dönüşümleri her üç yolda aynı anda uygulamak için kullanıyoruz.

 <svg class="mute" viewBox="0 0 100 100"> <g> <path d="M92.6,50.075C92.213,26.775 73.25,7.938 50,7.938C26.75,7.938 7.775,26.775 7.388,50.075C3.112,51.363 -0.013,55.425 -0.013,60.25L-0.013,72.7C-0.013,78.55 4.575,83.3 10.238,83.3L18.363,83.3L18.363,51.6C18.4,51.338 18.438,51.075 18.438,50.813C18.438,33.275 32.6,19 50,19C67.4,19 81.563,33.275 81.563,50.813C81.563,51.088 81.6,51.338 81.638,51.6L81.638,83.313L89.763,83.313C95.413,83.313 100.013,78.563 100.013,72.713L100.013,60.263C100,55.438 96.875,51.362 92.6,50.075Z" /> <path d="M70.538,54.088L70.538,79.588C70.538,81.625 72.188,83.275 74.225,83.275L74.225,83.325L78.662,83.325L78.662,50.4L74.225,50.4C72.213,50.4 70.538,52.063 70.538,54.088Z" /> <path d="M25.75,50.4L21.313,50.4L21.313,83.325L25.75,83.325L25.75,83.275C27.788,83.275 29.438,81.625 29.438,79.588L29.438,54.088C29.45,52.063 27.775,50.4 25.75,50.4Z" /> </g> </svg>

Kulaklıkların titreşmesini ve dans etmesini sağlamak için transition yeterli olmayacaktır. Bu, ana karelere ihtiyaç duyacak kadar karmaşık bir örnektir.

Bu durumda, başlangıç ​​ve bitiş anahtar karelerimiz (sırasıyla animasyonun %0'ında ve %100'ünde) hafifçe küçültülmüş bir kulaklık simgesi kullanır. Animasyonun ilk %40'ı için görüntüyü biraz büyütüyor ve 5 derece yatırıyoruz. Ardından, animasyonun sonraki %40'ı için onu tekrar 0,9x'e küçültür ve diğer tarafa 5 derece döndürürüz. Son olarak, animasyonun son %20'si için, sorunsuz döngü sağlamak için simge dönüşümü aynı başlangıç ​​parametrelerine döner.

 @keyframes pulse { 0% { transform: scale(0.9); } 40% { transform: scale(1) rotate(5deg); } 80% { transform: scale(1) rotate(-5deg); } 100% { transform: scale(0.9) rotate(0); } }

 100% { transform: scale(0.9); }

 0%, 100% { transform: scale(0.9); }

Artık animasyon ana karelerini tanımladığımıza göre animasyonu uygulayabiliriz. .mute__headphones sınıfını, kulaklık simgesinin üç bölümünü de etkilemesi için <g> öğesine ekliyoruz. İlk olarak, simgenin merkezi etrafında dönmesini istediğimiz için transform-origin bir kez daha center ayarladık. Ayrıca, boyutu ilk animasyon ana karesiyle eşleşecek şekilde ölçeklendiririz. Bu adım olmadan, statik "sessiz" simgeden animasyonlu simgeye geçiş, her zaman boyutta ani bir sıçrama ile sonuçlanacaktır. (Her iki durumda da, sessize geri dönmek, ölçek 0,9x'ten büyükken kullanıcı tıklarsa, ölçekte bir sıçramaya ve muhtemelen rotasyona da neden olacaktır. Bu etkiyi yalnızca CSS ile yapamayız.)

Animasyonu, animation CSS özelliğini kullanarak uygularız, ancak hamburger menümüzü nasıl canlandırdığımıza benzer şekilde, yalnızca .is-active ana sınıfı mevcut olduğunda uygularız.

 .mute__headphones { transform-origin: center; transform: scale(0.9); } .is-active .mute__headphones { animation: pulse 2s infinite; }

Durumlar arasında geçiş yapmamıza izin vermemiz gereken JavaScript de hamburger menüsüyle aynı kalıbı takip ediyor:

 const muteButton = document.querySelector(".mute"); muteButton.addEventListener("click", () => { muteButton.classList.toggle("is-active"); });

Ekleyeceğimiz sonraki parça, simge etkin olmadığında görünen üstü çizili bir çizgidir. Bu basit bir tasarım öğesi olduğu için manuel olarak kodlayabiliriz. Basit ve makul viewBox değerlerine sahip olmanın yararlı olduğu yer burasıdır. Tuvalin kenarlarının 0 ve 100'de olduğunu biliyoruz, bu nedenle çizgimiz için başlangıç ​​ve bitiş konumlarını hesaplamak kolaydır:

 <line x1="12" y1="12" x2="88" y2="88" class="mute__strikethrough" />

Bir sınıfı doğrudan üstü çizili <line> öğemize uyguladığımız için, onu CSS aracılığıyla biçimlendirebiliriz. Simge aktifken satırın görünmediğinden emin olmamız yeterli:

 .mute__strikethrough { stroke: red; opacity: 0.8; stroke-width: 12px; } .is-active .mute__strikethrough { opacity: 0; }

İsteğe bağlı olarak, .is-active sınıfını doğrudan SVG'ye ekleyebiliriz. Bu, sayfa yüklenir yüklenmez animasyonun başlamasını sağlar, bu nedenle simgenin başlangıç ​​durumunu animasyonlu olmayandan (sessiz) animasyonlu (sessiz olmayan) olarak değiştiririz.

CSS Tabanlı SVG Animasyonu Kalıcıdır

Sadece CSS animasyon tekniklerinin yüzeyini ve görünüm alanlarının nasıl çalıştığını çizdik. Basit animasyonları basit tutmak için SVG kodunun elle nasıl yazılacağını bilmek önemlidir, ancak harici düzenleyicilerle oluşturulan grafiklerin nasıl ve ne zaman kullanılacağını bilmek de önemlidir. Modern tarayıcılar, (çok) karmaşık kullanım durumları için yalnızca yerleşik işlevleri kullanarak etkileyici animasyonlar oluşturmamızı sağlarken, geliştiriciler GSAP veya anime.js gibi animasyon kitaplıklarını keşfetmek isteyebilir.

Animasyonların abartılı projeler için ayrılması gerekmez. Modern CSS animasyon teknikleri, basit, çapraz tarayıcı uyumlu bir şekilde çok çeşitli ilgi çekici ve gösterişli animasyonlar oluşturmamıza olanak tanır.

Bu makalenin teknik incelemesi için Mike Zeballos'a özel teşekkürler!