- Lottie, vektör grafik animasyonları için açık bir dosya formatıdır ve Adobe After Effects'te oluşturulan animasyonların web ve mobilde kolayca oynatılmasını sağlar
- Animasyonlar JSON formatında saklanır; keyframe'ler, easing eğrileri, katman bilgileri gibi tüm animasyon öğelerini içerir
- Bu format; genişletilebilirlik, çözünürlükten bağımsızlık, çeşitli renderer implementasyonları gibi özelliklere sahip açık bir standarttır ve çok sayıda şirket tarafından kullanıcı deneyimini iyileştirmek için kullanılmaktadır
- Lottie Animation Community (LAC), Linux Foundation bünyesindeki kâr amacı gütmeyen bir açık kaynak proje olup bu formatı sektör standardı hâline getirmeyi amaçlar
- Spesifikasyon dokümanları, doğrulama araçları, implementasyonlar ve yol haritası topluluk tarafından geliştirilip yayımlanır; herkesin katılabildiği şeffaf ve işbirlikçi bir yapıyla işletilir
Lottie nedir
Genel bakış
- Lottie, 2015 yılında Hernan Torrisi tarafından geliştirilen açık kaynaklı bir vektör animasyon formatıdır
- After Effects'te oluşturulan animasyonlar Lottie JSON dosyası olarak dışa aktarılıp çeşitli platformlarda oynatılabilir
- Günümüzde web, mobil, TV ve diğer birçok platformda yaygın olarak kullanılan standart bir formattır
Özellikler
- Vektör grafik tabanlı
- Piksel tabanlı değil, geometrik şekillerden (çizgiler, eğriler vb.) oluşur; bu sayede çözünürlükten bağımsız, net görüntü sunumu sağlar
- Tweening
- Animatörün tanımladığı keyframe'ler arasındaki değişimi otomatik olarak interpolate eden bir yöntemdir
- Karmaşık hareketleri elle oluşturmaya gerek kalmadan akıcı animasyonlar üretilebilir
- JSON tabanlı format
- JSON ile ifade edildiği için web üzerinden aktarımı kolaydır; mevcut araçlarla düzenleme veya otomasyon işlemleri yapmak da rahattır
- Açık standart olduğu için herkes implementasyon geliştirebilir ve birlikte çalışabilirlik yüksektir
- Olgun ekosistem
- Player'lar, asset'ler, üretim araçları ve kütüphaneler gibi çeşitli ekosistem bileşenleri güçlü biçimde oluşmuştur
- Airbnb, Google gibi çok sayıda şirket tarafından kullanılmakta ve farklı araçlar ile framework'ler tarafından desteklenmektedir
Lottie Animation Community (LAC)
- Lottie'nin standartlaşması ve yaygınlaşması için Linux Foundation bünyesinde kurulan kâr amacı gütmeyen bir topluluk
- Lottie dosya formatını platformlar arası bir animasyon standardı olarak yerleştirmeyi hedefler
- Joint Development Foundation yönetişimi altında faaliyet gösterir ve açık işbirliği modelini benimser
- Açık spesifikasyon dokümanları, doğrulama araçları (Validator), implementasyon listesi ve yol haritası ile ekosistem için temel sağlar
- Herkesin katılıp katkı verebildiği bir yapı olarak şeffaflık ve topluluk odaklı gelişimi vurgular
1 yorum
Hacker News yorumu
Lottie’yi her kullandığımda içimde bir hayal kırıklığı kalıyor; fikir gerçekten harika ve animatörlerin zaten kullandığı araçlardan doğrudan animasyon çıkarabilmek çok cazip, ama uygulama şekli fazlasıyla kötü. Bu alan için çok daha kompakt bir ikili biçim çok daha uygun olurdu, ama sayısal veri yığınları gereksiz yere JSON içinde tutuluyor. Üstelik JSON harici dosyalara başvurabildiği için, pratikte ya bir klasör dolusu dosya oluyor, ya dosyalar JSON içine base64 olarak gömülüyor, ya da her şey sıkıştırılmış tek bir dosya halinde sunuluyor. Web’de yüklendiğinde devasa bir SDK çekmek gerekiyor ve bu animasyon ya birden fazla dosyayı ayrı ayrı yüklüyor ya da tek bir dosya üzerinde JSON, base64, png, lottie, zip gibi çeşitli ayrıştırıcıları tekrar tekrar çalıştırıyor.
.lottiedosyası kullanırsanız JS bundle’ına bir de zip açıcı eklemek zorunda kalıyorsunuz; ayrı.lottieoynatıcısı da 2MB’lık bir wasm blob içeriyor, nedenini pek anlayamıyorum. Uygulamamızda bu yüzden uygulama boyutunu küçültmek için çok uğraştık ve neyse ki kritik akışta kullanılmıyordu, bu yüzden durumu bu seviyeye kadar toparlayabildik. Animasyon optimizasyonu, path ve inline sorunlarını elle düzeltme, vektörlerin png’ye dönüşmesi hatalarıyla uğraşma derken epey angarya çıktı. Üstelik tarayıcılar aynı anda birden fazla animasyonu oynatırken pek dayanamıyor, özellikle düşük seviye cihazlarda; JS ve DOM tarafında animasyon işlemenin verimi beklediğimden kötüydü. Bir ara hafta sonu projesi olarak bunu optimize edilmiş SVG sprite’lara dönüştürüp CSS transition’larla oynatmanın daha iyi olup olmayacağını denemeyi düşünüyorumKesinlikle katılıyorum; özellikle After Effects’ten Lottie’ye dışa aktarma iş akışı korkunçtu. Birçok katman ve stil export sırasında düzgün çalışmadığı için motion designer’a hangi özellikleri kullanıp hangilerinden kaçınması gerektiğini tek tek anlatmak zorunda kaldık ve tasarımcılar bundan hiç hoşlanmıyor. Aslında basitçe videoya render alıp etkileşime göre oynatmak çok daha hafifti ve iş yükü de daha azdı. Rive’ı da duydum; sanki Lottie’nin sorunlarını telafi etmeye odaklanıyor gibi görünüyor. Ama henüz kendim kullanmadım, sonuçlar duruma göre değişebilir
Önceki çalıştığım şirkette web uygulaması bundle boyutu 8MB’tı (sıkıştırılınca yaklaşık 2MB) ve inceleyince bunun büyük kısmının Lottie kütüphanesi (2MB) ile sadece dört animasyondan geldiğini gördüm. Bu animasyonlardan ikisini kaldırdık, kalanları da Lottie ile birlikte lazy-load ettik. Yine de tasarımcıları ve diğer geliştiricileri 8MB bundle’ın ne kadar büyük bir sorun olduğuna ikna edemedim; sonunda bu savaşı kaybetmişim gibi hissettim
Tarayıcıların birden fazla Lottie animasyonunu aynı anda oynatırken zorlandığı kısmına katılıyorum. 2000’lerin başında da Flash reklam animasyonlarıyla kaplı web sayfaları çoktu; performans sorunları vardı ama yine de o dönemin tek çekirdekli CPU’larıyla bile yeterince çalışıyordu
Öte yandan JSON formatı sıkıştırıldığında oldukça küçülüyor ve JavaScript VM’e yükleme açısından da verimli sayılır
Ben Lottie kullandığımda seçenekler mp4 ile Lottie arasındaydı. mp4 ile kıyaslayınca Lottie çok daha küçüktü
Açık ve ortak bir formatla animasyon yönetme fikrini seviyorum. Ama pratikte web geliştiricilerinin CSS veya SVG animasyonlarını öğrenmek yerine —ki bunlar çok daha küçük ve ayarlanması daha kolay— Lottie’ye yönelmesi biraz üzücü; sadece kütüphane/wrapper tarafı bile birkaç yüz KB ekliyor, animasyon başına da ayrıca yük getiriyor. Lottie’nin ana sitesi dosya boyutunun küçük olduğunu övüyor ama karşılaştırmayı sadece GIF ve PNG ile yapıp SVG/CSS animasyonlarıyla yapmıyor; bu da hoşuma gitmiyor. Yine de native mobil uygulamalarda gayet uygun olabilir
Lottie’nin asıl değeri, CSS transition gibi basit animasyonlarda değil; çok daha karmaşık ve serbest animasyonlarda, küçük bir çizgi film hissi veren türde işlerde ortaya çıkıyor. Telegram Messenger’daki Lottie ile yapılmış hareketli sticker’lara bakınca bu net görülüyor (örnek: https://tlgrm.eu/stickers/Princess)
Deneyimime göre Lottie’nin gerçekten parladığı yer, tasarım üretim araçlarında —özellikle After Effects’te— hedef format olarak kullanılması. Bağlantı verilen yazıda da Lottie’nin ve dosya formatının asıl avantajı tam olarak bu nokta diye anlatılıyor. Kimse bunu elle yazmıyor. Ben bir mobil uygulama geliştiricisi olarak Lottie animasyonlarıyla çalıştım ama doğrudan üreticisi hiç olmadım
“İnsanlar CSS veya SVG animasyonlarını daha çok öğrenmeli” fikrine bir şey ekleyeyim: Web 1.0 döneminde Flash en iyisiydi. CSS ve diğer standartlar, Flash’ın sunduğu deneyimi hâlâ tam olarak yakalayamadı. Flash; video formatı, animasyon formatı, programlama ortamı, video oynatıcı, etkileşimli UI sistemi, oyun motoru, MMO geliştirme motoru, infografik aracı gibi her şeyi yapan bir çok amaçlı araçtı. Adobe formatı ve oynatıcıyı açmış olsaydı bugün hâlâ yaşıyor olurdu. CSS/SVG/HTML/JS’nin tek yol olduğu dogmasını kırmak gerekiyor; 40 yıl geçmesine rağmen hâlâ benzer sorunları yaşamamız, tekerleği yeniden icat etmeyi denemenin gerekli olduğunu gösteriyor
Lottie animasyonlarını SVG+JS’ye derlemek mümkün olmalı, değil mi? Bence mesele sadece buna yönelik bir aracın olmaması
CSS animasyonları (ve modern Web Animations API) donanım hızlandırmadan yararlanabilirken, bu tür kütüphaneler (Lottie vb.) bundan yararlanmıyor
Hem Lottie hem de Rive ile gömme ve uygulama tarafında az da olsa deneyimim oldu; Rive çok daha iyi bir deneyimdi. Gelecekte Lottie ile Rive arasında seçim yapmam gerekirse gözden kaçırdığım bir nokta var mı merak ediyorum
Rive’ı bizzat kullanmadım ama gidişatını takip ediyorum. Lottie’yi yapan geliştiricinin yaklaşık iki yıl önce Rive ekibine katılmış olması ilginç. Bu alanda yeni araçları değerlendirirken Rive’ı kesinlikle dikkate alacağım. İçinde bulunduğum projelerde, tasarımcıların istediği animasyonlara kıyasla Lottie’nin dosya boyutunu haklı çıkarmak zordu ve bu yüzden aktif olarak karşı çıkıyordum. SVGator’ı da başarıyla kullandım. Lottie’nin dosya boyutu konusu anılmadan pek çok yerde fazlasıyla parlatılması —özellikle Webflow gibi araçlarda ve sektör etkileyicileri tarafından— da sinir bozucu; Lottie için tam uygun kullanım alanları elbette vardır ama çoğu genel senaryoda daha iyi alternatifler olduğunu düşünüyorum
Rive diye bir araç duymamıştım; projemde işe yarayabilecek gibi görünüyor ve bu keşif beni heyecanlandırdı. İşte bu yüzden HN’den kopamıyorum
Şirketimizin UI kütüphanesi animated component’lerde (spinner, progress bar vb.)
lottie-webkullanıyor. Ama https://airbnb.io/lottie/#/community-showcase sayfasını ziyaret ettiğim anda şirket laptopumun fanı çıldırmış gibi dönmeye başlıyor. CSS ile yapılmış olsaydı böyle bir etkisi olmazdı diye düşünüyorumLottie’nin konsepti gerçekten harika ama pratikte kullanması çok zor. Rive, Lottie’de sorun olan kısımları çözmeye çalışan yeni bir platform. Özellikle dinamik veri güncelleme Lottie’de neredeyse imkânsıza yakın. Buna rağmen biz Lottie ile Tracker.GG’nin Valorant Backtrack’inde (Spotify Wrapped’e benzer bir format) verisi dinamik olarak güncellenen animasyonlar yaptık (demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Bunu yapmak için kaynak dosyada (After Effects) isimlendirilmiş katmanlara doğrudan eriştik ve her slide’ın ayrı bir Lottie dosyası olmasını sağlayarak slide’lar arası akıcı geçişleri elle kurduk. Lottie’nin kendisi dinamik katman erişimini doğal olarak desteklemediği için, Lottie instance’larını kontrol eden ayrı bir kütüphane yazıp üstüne kendi veri kontrol katmanımızı inşa ettik. Tasarımcı ile mühendis arasında tekrar tekrar yapılan sayısız iş gerekiyordu; işbirliğine çok elverişli bir format değil. Bazı durumlarda katman özelliklerini gerçek varsayılan değerlere göre (örneğin renk) hedefleme gibi hilelere de başvurmak zorunda kaldık. Formatın kendisi gerçekten uğraştırıcı. Gelecekte Rive kullanmayı denemek istiyorum
PBS KIDS marka animasyonlarında yıllardır Lottie kullanıyoruz. Diğer formatlara göre çeşitli avantajları var ve 2D düzlemde çalışma zamanında render arttığında performans düşse de, birden fazla pipeline’a (oyun, uygulama, video) makul şekilde entegre oluyor. Görece düşük güçlü cihaz ve platformlara (Roku vb.) ise genelde statik görseller veriyoruz. After Effects ile olan iş akışı sayesinde tek bir tasarımcı döngüsel bir animasyon hazırlayıp bunu Lottie/Bodymovin json, Mov (yayın/YouTube için) ve SVG (düşük güçlü cihazlar için) olarak dışa aktarabiliyor. Flash sonrası dönemde oldukça iyi bir geçiş çözümüydü. Şimdi Rive’ı da kullanıyoruz ve mevcut json animasyonları yeni iş akışına da taşıyabiliyoruz. Bu alandaki önemli isimlerle (ör. Pixi’den Mat Groves, CloudKid’den Matt Karl) birlikte çalışma fırsatım oldu; Flash’tan geçiş döneminde herkes farklı yöntemler, eklentiler, matematik ve dışa aktarma formatları deniyordu. Bu çabaların her birinin kendi yeri var ve timeline tabanlı animasyonların yazılım mimarisi gereği formatlar arası birlikte çalışabilirlik sorunları hep olacaktır. Sonuçta önemli olan, projeye en uygun aracı seçmek
Sitemizin (https://resonancy.io) animasyonlarını yapmak için lottielab kullandık ve editör gerçekten SVG tabanlı çok iyi tasarlanmıştı; kullandığım çevrimiçi araçlar arasında en iyisiydi. Genel olarak deneyim akıcıydı. Ama lottielab’in kendi özel sıkıştırmalı hosting hizmetine export etmeden animasyon boyutları o kadar büyüktü ki landing page’de kullanmak neredeyse zordu. Sıkıştırmalı hosting ortalama %400 boyut azaltımı sağladığı için sonunda aylık 30 dolar ödeyip barındırdık. Başka format alternatiflerine bakacağım ama animasyon üretim sürecini baştan tekrar yaşamak da istemiyorum. Daha önce React tabanlı animasyon kütüphaneleriyle deneyimime göre, karmaşık animasyonları elde kodlamak çok zordu; lottielab’de ise kafamdakini nispeten kolay üretebildim. Rive’ı henüz denemedim ama test etmeyi planlıyorum. Lottie formatını iyi sıkıştıran harici araç veya kütüphane önerisi almak isterim
SWF’nin neden sorun olduğunu anlamıyorum. Spesifikasyonu açık ve çok verimli. Güvenlik kaygısı varsa Turing-complete ileri özellikleri çıkartılmış bir uygulama yine de yapılabilir. Kardeş yorumdaki “bu da sadece bir başka JSON formatı” değerlendirmesine katılıyorum. Verimsiz web ortamına alışmış geliştirici kuşağı sanki verimlilik kavramının kendisini unutmuş gibi
Bugün animasyonlu vektör grafik üretiminde SOTA’nın ne olduğunu merak ediyorum. LLM’ler SVG path’leri estetik biçimde üretmekte iyi değil, diffusion tabanlı görsel modeller de yalnızca bitmap destekliyor. After Effects ile birleşen üretken yapay zeka destekli Illustrator benzeri bir araca ciddi talep var; umarım biri bu alanda yenilikçi bir şey yapar
Rive’ın (rakip hizmet) sorunu, sanatsal açıdan sezgisel olmaması. Kalem ya da blob aracıyla doğrudan çizim yapamıyorsunuz, belirli bir iş akışına uymanız gerekiyor (çoğunlukla SVG import), yani Flash kadar sezgisel bir arayüzden uzak. Tabii ilginç özellikleri var ama Flash kadar kolay ve doğal hissettirmiyor