Lottie tüm platformlarda kullanabileceğiniz JSON yapılı bir animasyon kütüphanesidir. Tüm mobil ve web platformlarında çalışma imkanı sunmaktadır. Lottie’yi gif gibi formatlardan ayıran en temel yapısı boyutunun küçük olmasıdır. Bu sayede hızla yüklenir ve depolama alanında fazla yer doldurmaz.
Açık kaynaklı ve de GitHub üzerinde erişime açık bir haldedir. Kolaylık sağlaması adına örnek projelerin mevcut olduğunun altını çizelim.
İçindekiler
Lottie İsmi Nereden Gelmekte?
Lotte Reineger Alman yönetmen ve de animasyonların annesi olarak bilinmektedir. 1889 yılında dünyaya gelen Lotte, gölge oyunlarına merakıyla bilinirdi. Sonrasında kağıt parçalarını kesip, onları beyaz yüzey üzerine yerleştirerek bir senaryo üzerinde oynatmaya başlamıştır. Bu da animasyonların ilham aldığı noktadır. Prenses ve Yedi Cücelerden, Prens Achmed’in Maceraları gibi uzun metrajlı filmlerde yer almıştır.
Onun anısını ve ismini yaşatmak amaçlı adı konulmuştur.
Adobe After Affects & BodyMovin
Lottie Android, iOS, Web ve Windows için Adobe After Affects animasyonlarını Bodymovin ile işleyebilen bir kütüphanedir. Adobe After Affects film, video oyunları, televizyon yapımları gibi alanlarda kullanılan dijital efektlerin, animasyonların, grafiklerin yer aldığı bir programdır.
Yukarıda gördüğünüz tüm animasyonlar After Effects ile yaratılmış, Bodymovin ile transfer edilmiş animasyonlardır.
Bodymovin; Hernan Torrisi tarafından geliştirilmiş bir plugin’dir. After Effects dosyalarını json gibi dışarıya aktarmaktadır. Bu sayede Android, iOS, React Native ve Windows ortamında kullanılabilmektedir.
Ben After Effects bilmiyorum ya da Bodymovin öğrenmek için zamanım yok diyorsanız sizin için bir alternatifimiz var.
Lottie açık kaynak oluşuyla herkesin yaptıklarını paylaştığı bir LottieFiles adında bir web sayfasına sahip. Bu sayede beğendiğiniz Lottie dosyalarını seçebilir ve de projenize ekleyebilirsiniz.
Shopify, Netflix, Google, Uber, Microsoft gibi büyük şirketler tarafından da tercih edilmektedir.
Neden Lottie Ortaya Çıktı?
Lottie’nin yaratıcıları Airbnb Lottie’nin ortaya çıkışı hakkında düşüncelerini şu şekilde aktarıyor:
Geçmişte Android, iOS ya da React Native uygulamaları için animasyon oluşturmak karmaşık ve de oldukça uzun bir süreçti. Her ekran boyutuna özel bir resim dosyası bulacaktınız ya da bunun yerine binlerce satır kod yazacaktınız. Bu nedenle çoğu uygulama animasyon kullanmıyordu ki animasyonlar iletişim için en güçlü araçlardan biri iken. Bunu değiştirmek istedik. Lottie ile yeni bir dönem başlatmak istedik.
Lottie vs Alternatifler
GIF
GIF, lottie animasyonlarına göre boyutları iki katına ulaşan uzun süredir kullanılmakta olan bir formattır. GIF’ler sabit bir boyuta sahiptir. Bu nedenle farklı cihazlarda daha iyi görünmesi adına değişiklik yapılamamaktadır. Lottie animasyonları ise istediğiniz ölçüde oynayabilme, değişiklik yapabilme imkanı tanımaktadır.
PNG
PNG grafiklerinin en büyük dezavantajı boyutlarının fazlasıyla büyük olmasıdır. Bu nedenle işlem yaparken ve de depolanırken bir dezavantaja dönüşmektedir. Lottie dosyaları ise PNG’ye göre çok daha küçük, çok az yer kaplamaktadır. Bu sayede çabucak indirilebilir, web sayfasını sekteye uğratmaz.
Kodlanmış Animasyonlar
Kendi elinizde kodlanmış bir animasyon yaratabilirsiniz elbette o kadar zamanınız varsa. Diğer formatlara göre oldukça zaman alacağı için çoğu tasarımcı ya da geliştiricinin ilk tercihi olmayacaktır. Bu nedenle alternatif animasyonları kullanmak çok daha işe yarar bir çözümdür. Lottie bu çözümler arasında en yenilikçi olanıdır.
Zaman içerisinde yeni teknolojiler ortaya çıkmaya devam ediyor. Yıllarca kullandığımız GIF, PNG ya da diğer alternatiflerin yerine gelmiş; daha az boyuta sahip özelliğiyle Lottie son zamanlarda oldukça popüler. Siz kullanmayı düşünüyor musunuz? Animasyonların daha güçlü bir iletişim aracı olduğuna inanmıyor musunuz? Düşüncelerinizi bizimle paylaşın.
Kaynakça:
Why should you prefer Lottie over other forms of animation?
merhabalar. embed olarak sitemde kullandığımda…
animasyonun üzerine gelindiğinde animated by yazan kısmı nasıl kaldırabilirim
Merhaba,
Bu söylediğiniz hepsinde mi oluyor? Ücretsizlerden 1-2 tanesini denedim üzerine gelince animated by yazısı çıkmadı. Örnek için link paylaşabilir misiniz?