Lottie Nedir? Lottie Animasyonları Hakkında

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.

lottie animasyonu

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.

lottie ismi nereden gelmekte?

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.

lottie örnekleri
lottie örnekleri

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.

lottie örnekleri
lottie örnekleri

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?

Teknoloji'den geri kalmamak için e-posta listemize abone olun!

teknoloji, hayal gücü ve sanat dünyalarını seven, üçünü bir araya getirmeye hevesli bir bilgisayar mühendisliği öğrencisi.

“Lottie Nedir? Lottie Animasyonları Hakkında” üzerine 2 yorum

  1. 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?

Yorumlar kapalı.