Cube, JavaScript animasyonlarını dört kararla sadeleştiriyor
Öne çıkanlar
- Cube, çekirdek çalışma zamanında bağımlılık kullanmıyor.
- rise ve leave, öğeleri 12 piksellik hareket ve opaklık değişimiyle animasyonlandırıyor.
- React, Vue, Solid ve Svelte bağdaştırıcıları isteğe bağlı sunuluyor.
- Kütüphane zaman çizelgesi ve düzen animasyonları yerine dört temel kullanım alanına odaklanıyor.
Cube, giriş, çıkış, durum değişimi ve görünüm alanına girme animasyonlarını sadeleştiren bir JavaScript kütüphanesi olarak sunuldu. Kütüphane, Web Animations API üzerine kuruluyor ve çekirdek çalışma zamanında bağımlılık kullanmıyor. rise, leave, morph ve reveal işlevleri; her kullanım için önceden belirlenmiş süre, eğri ve hareket mesafesiyle çalışıyor. Geliştiriciler yalnızca animasyonun ne zaman başlayacağını stagger ve delay seçenekleriyle kontrol ediyor.
rise, öğeleri opaklık ve 12 piksellik yukarı hareketle gösteriyor. leave, öğeyi opaklığını azaltarak 12 piksel aşağı taşıyor ve düğüm kaldırılana kadar son durumu koruyor. morph, metin değişiminde ortak başlangıç harflerini korurken kalan bölümü bulanıklaştırarak geçiş yaptırıyor; simgeleri de yüzey olarak çapraz geçişli biçimde değiştiriyor. reveal ise öğeyi görünüm alanına girdiğinde bir kez gösteriyor ve reduced-motion tercihini dikkate alıyor. Kütüphane sabit bir cubic-bezier eğrisi kullanıyor, yay fiziğine dayalı seçenekler sunmuyor.
Cube, React, Vue, Solid ve Svelte için isteğe bağlı bağdaştırıcılar sağlıyor. Çekirdek, tarayıcının Web Animations API ve IntersectionObserver özelliklerini kullanıyor; dolayısıyla kare döngüsü veya ek polyfill gerektirmiyor. Kütüphane zaman çizelgeleri, hareket tabanlı etkileşimler ve düzen animasyonları için başka araçların kullanılmasını öneriyor. Basit basınç geri bildirimi ise CSS geçişleri ve :active seçicisiyle ele alınıyor.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.