Animasyon Kütüphanesi Lottie

En son güncellendiği tarih: 5 gün önce

Yazılımcılar olarak uygulamamıza animasyon koymak bizi zorlayan süreçlerden biridir. Genelde bir resim dizisi kullanılarak animasyon yapılmaya çalışılır ve her türlü cihaz boyutuna uyması için de çeşitli sorunlarla boğuşmamız gerekir. Bu tür sorunlarla uğraşan airbnb yazılımcıları bu durumdan sıkılmış olacaklar ki buna bir çözüm getirip Lottie kütüphanesini açık kaynak olarak yazılımcıların hizmetine sundular.


Lottie Nedir?


Lottie Android, iOS, react native, Windows ve web platformlarında After Effects animasyonlarını gerçek zamanlı olarak işleyen ve bu animasyonların mümkün olduğunca en basit şekilde kullanılmasını sağlayan bir kütüphanedir. Lottie kullanabilmemiz için After Effects programında oluşturulan animasyonların Bodymovin eklentisi sayesinde json formatına çevrilmesi gerekiyor.


Dosyaların json formatında olmasının en büyük avantajı da png resimlere göre oldukça az yer kaplaması. Eğer bir kurumsal şirkette çalışıyorsak zaten önümüze ilgili ekipler tarafından hazırlanan json dosyası gelecektir. Bireysel kullanıcıysak https://lottiefiles.com üzerinden binlerce ücretli ve ücretsiz animasyondan birini seçebilirsiniz. Hatta animasyon yapabiliyorsanız yine bu site üzerinden satışa da sunabilirsiniz.



Lottie Files sitesi üzerinden uygulamamız için gerekli animasyonu bulduktan sonra animasyona tıklayıp direk indirebilir ya da Edit Layer Colors'a tıklayarak Lottie Editor ile animasyon üzerindeki renkleri veya yazıları değiştirip ardından da indirebilirsiniz.


Nasıl Kullanılır?


Bu bölümde Android için lottie kütüphanesinin nasıl kullanılacağından bahsedeceğim. Farklı kullanımları görmek amacıyla aşağıda görülen iki tane animasyonu seçtim.




İlk olarak buradan güncel versiyonu bulup gradle'a eklememiz gerekiyor. Uygulamalarımızda lottie kullanabilmemiz için minimum api versiyonunun en az 16 olması gerektiğini de belirteyim.


Daha sonra json dosyalarını koyacağımız src/main/assets klasörünü oluşturuyoruz. Ardından indirdiğimiz json dosyalarını buraya koyuyoruz. Belirtilen yerde klasörü oluşturmamız önemli aksi takdirde json dosyalarını bulamayacaktır. Bu da uygulamamızda crash'e sebep olur. Ardından activity_main.xml dosyasını aşağıdaki gibi oluşturdum.


LottieAnimationView imageView'den kalıtım alarak oluşturulmuş Lottie animasyonlarını en kolay şekilde kullanabileceğimiz view'dır. İlk olarak kredi kartı animasyonunu ele alalım.


  • app:lottie_fileName : Kullanacağımız json dosyasının adını verdiğimiz alandır.

  • app:lottie_loop: Eğer bu alan true olursa animasyon tekrar tekrar çalışacaktır. Eğer false verirsek bir defa çalışacak ve ardından duracaktır.

  • app:lottie_autoPlay :Bu alan true olursa animasyon ekran açıldığında herhangi bir şey yapmamıza gerek kalmadan otomatik olarak çalışacaktır. Eğer false verirsek animasyonu kod içerisinden başlatmamız gerekir.


Projeyi çalıştırdığımızda herhangi bir kod yazmadan kredi kartı animasyonu otomatik olarak çalışacaktır. Buton içinse farklı bir yöntem olarak tüm süreçi kod içerisinden yönettim. Butonda özel bir koşul daha bulunuyor. Yukarıdaki animasyonu dikkatli şekilde incelerseniz animasyon başlamadan önce butonun üzerinde sadece buy now yazılı olduğunu görürsünüz. Butona basıldıktan sonra ise animasyon devreye giriyor ve sepete ürünler doluyor, sepet sağa doğru gidiyor ve ardından teşekkür yazısı çıkıp animasyon %100 olarak tamamlanıyor.


Ancak burada dikkat edilmesi gereken bir şey var. Satın alma süreci bir network sürecini de gerektireceğinden işlem tamamlanmadan animasyonun bitmesini istemiyorum. Hatta animasyonun belirli yüzde aralıklarda tekrar etmesi güzel bir görünüm oluşturabilir. Buradaki animasyon için konuşacak olursak network süreci boyunca yukarından sepete ürünlerin dolması ve ardından sağa doğru gitmesi sürekli tekrar edilebilir. Bunun için deneme yanılma yoluyla animasyonun %20'sinden itibaren sepete ürünlerin düşmeye başladığını, %50'ine kadar ise sağa doğru gidişini tamamladığını buluyorum. Kullanıcı butona tıkladığında network süreci bitene kadar animasyonun bu aralıkta tekrar etmesini, bittikten sonra ise tamamlamasını yöneteceğim.


İlk olarak onCreate içerisinde hangi animasyonu kullanacağımı set ediyorum. Ardından butonu tıkladığında yapılacak olan işlemleri.



Butonu tıklandıktan sonra setMinProgress ile animasyonun başlayacağı yüzdeyi setMaxProgress ile de biteceği yüzdeyi belirtiyorum. Animasyonun sürekli tekrar etmesini istediğimden dolayı repeatCount'un sonsuz olmasını istediğimi belirtiyorum. Son olarak playAnimation() diyerek animasyonu başlattım. 3 saniyelik bir gecikme koyarak network işleminin temsil edilmesini sağladım. İşlem bittiğinde ise tekrar sayısını 1 ve biteceği yüzdeyi de %100 olarak set ettim. Böylelikle işlem bittiğinde animasyon kaldığı yerden bir kere çalışacak ve tamamlanıp teşekkür yazısı çıkacaktır.


Böylelikle oldukça basit bir şekilde animasyonlarımızı gerçekleştirdiğimiz uygulamamızı yazmış olduk. Butonu tıklama öncesi ve sonrası görüntülerini aşağıda bulabilirsiniz. En altta bulunan github linkinde projeyi indirip deneyebilirsiniz.






Son olarak faydalı olabileceğini düşündüğüm bir iki özelliğe daha yer vermek istiyorum. Animasyonlar tekrar ederken default özellik olarak baştan sona doğru tekrar eder. Örneğin yukarıdaki buton için %20'den başlayarak %50'de biter ve tekrar %20'ye geri dönerek oradan başlar. Peki ya animasyon %50'de bittikten sonra %50'den başlayıp %20'e gitmesini istersem ne yapabilirim. Aşağıdaki kod ile tekrar modunu reverse yaparsak bu şekilde bir davranış sergileyecektir.


Bir animasyon belirli bir yüzdeyi geçtiğinde ekranda bir mesaj göstermek ya da çeşitli aksiyonlar almak istediğinizde ise aşağıdaki method ile animasyon yüzdesini sürekli dinleyebilirsiniz.



Lottie gerçekten kullanışlı ve oldukça basit bir kütüphane. İçinde oldukça faydalı özellikler bulunuyor. Daha detaylı bilgiye sahip olmak isterseniz buradan ulaşabilirsiniz.


Github repository: https://github.com/onurkaragunlu/LottieExample


Referanslar :

https://medium.com/@mbayryamali/how-to-use-lottie-animations-effectively-848fa59551a7

https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e

https://airbnb.io/lottie/#/android


#android #lottie



Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın