Svelte ile özel animasyonlar nasıl oluşturulursunuz? Örnek eylemler

Svelte, yerleşik olarak solma, uçuş, kayma, ölçekleme ve bulanıklaştırma gibi temel geçiş efektlerini svelte/transition aracılığıyla sunar. Bu efektleri herhangi bir ek yük olmadan kullanabilirsiniz. Ancak Svelte’nin en güçlü yönlerinden biri, kendi özel eylemlerinizi ve geçişlerinizi oluşturmanıza olanak tanımasıdır. Bu eylemleri use: direktifiyle veya in:/out: parametreleriyle kolayca uygulayabilirsiniz. React’ta yerleşik bir direktif bulunmadığı için giriş/çıkış animasyonları genellikle ek kütüphaneler gerektirirken, Vue’da hem yerleşik direktifler hem de animasyon sistemleri mevcuttur. Gelin, tasarım sistemlerinde en sık kullandığımız üç özel Svelte eylemini inceleyelim.

Malzemeleştirme ve Demalzemeleştirme: Giriş/Çıkış Animasyonları

Modal pencereler, araç ipuçları ve bildirimler gibi overlay öğeler için basit ama etkili bir görsel geçiş sistemi oluşturabilirsiniz. Bu sistem, opacity, scale, blur ve dikey kaydırma efektlerini birleştirerek layout kaymalarını engeller. Svelte’in yerleşik fade efektinden farklı olarak, malzemeleştirme ve demalzemeleştirme yalnızca görsel bir geçiş sunar ve bileşenlerin mount/unmount süreçlerini yönetmez. Bu eylemleri kullanmak için aşağıdaki gibi bir bileşen oluşturabilirsiniz:

{#if open}
  <div in:materialize out:dematerialize>
    Modal / araç ipucu / bildirim içeriği
  </div>
{/if}

Bu yaklaşım, özellikle geçiş sırasında sayfa düzeninde kaymaların olmasını istemediğiniz durumlarda idealdir.

Morfolojik Uyum: Boyut Değişikliklerine Akıcı Geçişler

Morfolojik uyum (morph), bir öğenin içeriği değiştiğinde boyutunun sorunsuz bir şekilde yeniden ayarlanmasını sağlayan bir eylemdir. Bu eylem, özellikle uzun metinlerin kısaltılmış versiyonlarına geçiş yaparken kullanışlıdır. Örneğin, bir butona tıklandığında genişleyen bir içerikte bu eylemi kullanabilirsiniz. Aşağıdaki örnekte, width: false ve height: true seçenekleriyle yalnızca yüksekliğin animasyonla değiştirildiğini görebilirsiniz:

<div use:morph={{ width: false, height: true }}>
  {#if expanded}
    <LongContent />
  {:else}
    <ShortContent />
  {/if}
</div>

Bu eylem, bileşenin yeniden mount edilmesini gerektirmediği için performans açısından da avantajlıdır.

Ortaya Çıkma ve Çözülme: Akıcı Mount/Unmount Animasyonları

Ortaya çıkma (emerge) ve çözülme (dissolve) eylemleri, morfolojik uyumun aksine, yeni öğelerin mount edilmesini ve eski öğelerin unmount edilmesini yönetir. Bu eylemler, yeni bir kartın yüksekliğini ve kenar boşluklarını sıfırdan animasyonla artırarak, alttaki kartın düzgün bir şekilde aşağı kaymasını sağlar. Bu sayede, geçişler anında değil, akıcı bir şekilde gerçekleşir. Örneğin, bir listeye yeni öğeler eklendiğinde bu eylemleri kullanabilirsiniz:

{#each cards as card (card.id)}
  <div in:emerge out:dissolve>
    {card.title}
  </div>
{/each}

Bu yaklaşım, özellikle dinamik içeriklerin eklenip çıkarılmasında kullanıcı deneyimini önemli ölçüde iyileştirir.

Araç İpucu Eylemi: Konuma Duyarlı Görünümler

Araç ipuçları, bir butona hover edildiğinde veya odaklandığında görünen ve ekrana bağlı konumlandırılan küçük bilgilendirme kutularıdır. Bu eylemi kullanmak için, @floating-ui/dom paketinden faydalanabilirsiniz. Bu paket, konumlandırma matematiklerini (çarpışma tespiti, kaydırma ve otomatik güncelleme) yönetir. Aşağıdaki örnekte, butona hover edildiğinde araç ipucunun görünmesi ve konumunun ekrana göre ayarlanması sağlanmaktadır:

<script>
  import { tooltip } from '$lib/actions/tooltip';
</script>

<button use:tooltip={'Kütüphanenize kaydedildi'}>
  Üzerime gelin
</button>

Bu eylem, özellikle mobil cihazlarda araç ipuçlarının ekranın sınırlarına takılmadan doğru şekilde konumlandırılmasını sağlamak için gereklidir.

Lazer Hedefleme: Hareketli Kenarlık Animasyonu

Lazer hedefleme (laser aim) eylemi, bir butonun kenarlığında dönen bir gradient sınır oluşturur ve fare imleci butona yaklaştığında bu sınır durur. Bu efekt, kullanıcıların dikkatini önemli eylem butonlarına çekmek için kullanışlıdır. Örneğin, bir başlangıç butonuna uygulandığında, kullanıcı butona yaklaştıkça sınırın durması ve butonun vurgulanması sağlanır:

<button class="btn-cta" use:laserAim>
  Başlayın
</button>

Bu efekt, kullanıcı arayüzünde interaktifliği artırmak ve önemli eylemleri vurgulamak için idealdir.

Sonuç: Svelte’in Animasyon Esnekliğinden Faydalanın

Svelte, yerleşik animasyonlarının yanı sıra, özel eylemler ve geçişler oluşturmanıza da olanak tanır. Bu esneklik sayesinde, tasarım sistemlerinizdeki animasyonları tamamen kontrol edebilir ve kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz. Geliştirme sürecinde, bu özel eylemleri projelerinize entegre ederek, daha akıcı ve etkileyici arayüzler oluşturabilirsiniz. Unutmayın, Svelte’in sunduğu bu olanaklar, yalnızca yerleşik animasyonlarla sınırlı kalmanızı engeller ve projelerinize benzersiz bir dokunuş kazandırır.