Anime.js nedir, ne işe yarar?

Anime.js ne işe yarar?

Anime.js, web sayfalarına animasyon eklemek için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. CSS özelliklerini, SVG çizimlerini, DOM niteliklerini ve JavaScript nesnelerini tek bir arayüzle hareketlendiriyor. Kurulumu bir komut: npm i animejs.

Hafif olması en çok tercih edilme sebebi.

Zaman çizelgesi yapısı sayesinde birden fazla animasyonu sıraya dizip birbirine bağlayabiliyorsun.

Anime.js nasıl kullanılır?

Kütüphaneyi projene ekliyorsun, hareketlendirmek istediğin ögeyi seçiyorsun, hedef değerleri yazıyorsun.

1. npm ile kur ya da doğrudan dosyayı sayfana ekle.
2. Hedef ögeyi seç ve değişecek özellikleri tanımla: konum, ölçek, opaklık, renk.
3. Süre ve yumuşatma eğrisini ayarla. Doğal görünüm için hazır easing seçenekleri kullanılıyor.
4. Birden fazla animasyonu zaman çizelgesinde sırala.
5. Tetikleyici ekle: sayfa yüklenince, kaydırınca ya da tıklayınca.

Dokümantasyon ve öğrenme bölümü ayrıntılı; yumuşatma eğrilerini görsel olarak deneyebileceğin bir sayfa da var.

Neden hafiflik önemli?

Animasyon kütüphaneleri sayfaya kod ağırlığı ekler ve bu ağırlık doğrudan açılış hızına yansır. Anime.js küçük dosya boyutuyla bu maliyeti düşük tutuyor. Yani sadece birkaç geçiş animasyonu için ağır bir kütüphane yüklemek zorunda kalmıyorsun.

Bir başka pratik fayda daha var: tek bir arayüzle hem CSS özelliklerini hem SVG çizimlerini hem de JavaScript nesnelerini hareketlendirebiliyorsun. Farklı işler için farklı kütüphane öğrenmiyorsun.

Anime.js ücretsiz mi?

Evet, açık kaynak ve ücretsiz. Abonelik ya da lisans ücreti bulunmuyor. Proje sponsorlarla destekleniyor, kullanım için ödeme istenmiyor.

Ticari projelerde de kullanabiliyorsun; açık kaynak lisansı buna izin veriyor.

Anime.js Türkçe destekliyor mu?

Dokümantasyon İngilizce. Kod yazarken dil zaten İngilizce olduğu için bu bir engel oluşturmuyor. Animasyon içindeki metinleri Türkçe kullanmak sorun çıkarmıyor.

Anime.js kimin işine yarar?

Ön yüz geliştiricileri, arayüz animasyonu ekleyen tasarımcı geliştiriciler ve web projelerine hareket katmak isteyen herkes için doğrudan iş görüyor. Ağır animasyon kütüphaneleri yerine hafif bir çözüm arayanların ilk baktığı yerlerden biri.

Kod yazmadan animasyon istiyorsan bu kütüphane sana göre değil. Hazır dosya indirip projene atmak için tasarlanmış araçlar var.

Anime.js alternatifleri

Hazır bileşen ve efekt kodları için Uiverse, hazır CSS efektlerini kopyalamak için Copy Paste CSS, kod yazmadan animasyon dosyası kullanmak için LottieFiles bakılabilir. Kod araçlarının tamamı dizinde.