LottieFiles Nedir?
LottieFiles, JSON tabanlı açık bir animasyon formatı olan Lottie etrafında kurulmuş bir platformdur; JSON, veriyi düz metin olarak tutan basit bir biçimdir. Lottie animasyonu kareler yerine vektör biçimler ve onların hareketi olarak tanımlar; bu yüzden her boyutta keskin kalır ve aynı hareketin GIF ya da video hâlinden genellikle çok daha hafiftir. Format, After Effects için geliştirilen Bodymovin eklentisinden doğdu; 2017'de Airbnb ekibi bu animasyonları iOS ve Android'de oynatan ilk Lottie kütüphanelerini yayımladı.
2018'de kurulan LottieFiles, Lottie animasyonlarının paylaşıldığı bir topluluk olarak başladı ve zamanla format etrafında bir araçlar bütününe dönüştü. Hazır animasyonlardan oluşan bir kütüphane, After Effects ve Figma'dan dışa aktaran eklentiler, doğrudan tarayıcıda animasyon yapmayı sağlayan Lottie Creator, açık kaynak bir web oynatıcısı ve dosyaları önizleme, hafifletme ve dönüştürme araçları sunar. Bir ya da birden çok animasyonu görselleri ve yazı tipleriyle tek bir sıkıştırılmış dosyada toplayan açık dotLottie (.lottie) formatını da LottieFiles geliştirdi.
Bir dotLottie dosyası temalar da taşıyabilir; örneğin aynı animasyonun açık ve koyu sürümleri. Durum makineleri (state machines) ise animasyonun fareyle üzerine gelmeye ve tıklamaya ek kod gerekmeden tepki vermesini sağlar. Lottie'nin 2024'ten beri Lottie Animation Community tarafından yayımlanan açık bir spesifikasyonu var. LottieFiles'ta animasyonları önizlemek, test etmek ve paylaşmak ücretsizdir; bireyler ve ekipler için ücretli planlar da bulunur.
LottieFiles'ı Nerede Kullanıyoruz?
Web sitelerindeki küçük vektör animasyonlarda ilk tercihimiz Lottie; LottieFiles ile onları şu işler için hazırlıyoruz:
Hareketli İkonlar
Fareyle üzerine gelindiğinde tepki veren ya da bir işlemi onaylayan ikonlar: kapat butonuna dönüşen menü ikonu ya da form gönderildiğinde beliren onay işareti gibi. Dosyaları çok küçüktür ve her ekranda keskin kalır.
Yükleme ve Durum Mesajları
Yükleme göstergeleri, boş sayfa durumları ve başarı ya da hata mesajları biraz hareketle daha sıcak görünür. Onları kısa ve sakin tutuyoruz; ziyaretçiyi bilgilendiriyor ama yoluna çıkmıyorlar.
İllüstrasyon ve Tanıtım Ekranları
Markanın üslubundaki illüstrasyonlar açılış sayfalarında canlanıyor, adım adım ekranlar bir ürünü ya da bir uygulamanın ilk kullanımını anlatıyor. Lottie sayesinde telefonlarda da hızlı yükleniyorlar.
Sitede Marka Animasyonu
After Effects'te tasarladığımız logo animasyonu, Lottie dosyası olarak sitenin üst bölümünde ya da açılış ekranında da oynayabiliyor; marka videoda ve webde aynı şekilde hareket ediyor.
Neden LottieFiles?
Hafif ve Keskin
Vektör animasyonlar bulanıklaşmadan her ekrana ölçeklenir ve aynı hareketin GIF ya da video hâlinden genellikle çok daha küçüktür; sayfalar daha hızlı yüklenir.
Kodla Kontrol
Sitede animasyonu oynatabilir, durdurabilir, döngüye alabilir ya da kaydırmaya ve fare hareketine bağlayabiliriz. dotLottie temalarıyla animasyon, sitenin açık ve koyu moduna da uyum sağlar.
Tasarımdan Koda Tek Adımda
After Effects ve Figma eklentileri doğrudan Lottie'ye aktarır; paylaşılan bir önizleme bağlantısıyla animasyonu siteye eklenmeden önce kendi telefonunuzda inceleyebilirsiniz.
Projenizde Nasıl İlerliyoruz?
Animasyonu After Effects'te, daha basit olanları Lottie Creator'da tasarlıyor ve yalnızca Lottie formatının desteklediği özellikleri kullanıyoruz. LottieFiles eklentisiyle dışa aktarıyor, masaüstünde ve telefonda önizliyor, siteye eklemeden önce incelemeniz için size bir bağlantı gönderiyoruz.
Yayından önce her dosyayı hafifletiyor, JSON ile daha küçük dotLottie arasında seçim yapıyor ve animasyonları yalnızca ekrana girdiklerinde yüklüyoruz. Cihazında “hareketi azalt” tercihini açmış ziyaretçiler animasyon yerine sabit bir kare görür; sayfa hızını da PageSpeed Insights ve Lighthouse ile ölçüyoruz.
