Lottie Animasyonları [VİDEOLU] | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

Lottie - Animasyona Yeni Bir Yaklaşım

Lottie, airbnb'nin geliştirdiği iOS, Android, React Native ve Web'de kullanabileceğimiz bir animasyon aracıdır.

After Effects'de hazırlanan animasyonları Bodymovin eklentisi ile json formatında çıktı alıp Lottie ile kullanabiliyoruz. İşin güzel yanı png ve gif'ten çok daha düşük boyutta ve performanslı.

Eğer siz de benim gibi After Effects kullanmayı bilmiyorsanız ancak bu animasyonlardan faydalanmak istiyorsanız ücretli-ücretsiz bir çok animasyonun yer aldığı https://lottiefiles.com/ adresini ziyaret edebilirsiniz.

Lottie Web Player

İsterseniz direk web player versiyonunu kullanabilirsiniz. https://lottiefiles.com/web-player adresine girerek json dosyanızı belirlemeniz yeterli olacaktır. Gerekli ayarları yaparak embed kodunuzu alabilirsiniz. Örnek bir embed işlemi;

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/gUENLc1262ccKIO/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

Editörde Görüntüle

Lottie Editor

Ayrıca animasyonlardaki frame'leri, renkleri, yazıları vs. değiştirip yeniden bir json oluşturmak için Lottie editörünü kullanabilirsiniz.

https://lottiefiles.com/editor adresinden json dosyanızı yüklerek düzenlemeye başlayabilir ve düzenlediğiniz yeni haline ait json dosyasını indirerek yine https://lottiefiles.com/preview sayfasından bunu publish edip kullanabilirsiniz.

Lottie'yi Web Sayfanıza Ekleyin

Web sayfasına eklerken Lottie Web Player'ı değilde javascript implementasyonu istiyorsanız http://airbnb.io/lottie/#/web adresine bakabilirsiniz.

Kısaca ilk olarak Bodymovin kütüphanesini sayfamıza dahil ediyoruz. İster https://github.com/airbnb/lottie-web buradan indirin isterseniz cdnjs kullanarak cdn'den çekin.

<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- YA DA -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

<div id="lottie"></div>

Editörde Görüntüle

Daha sonra animasyonu çalıştırmak için container ile oynatacağımız etiketi seçiyoruz, path ile animasyonun json dosya yolunu veriyoruz, tekrar etmesi için loop ve otomatik başlaması için autoplay ayarlarını true yapıyoruz.

let animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Zorunlu
  path: 'data.json', // Zorunlu
  renderer: 'svg/canvas/html', // Zorunlu
  loop: true, // Opsiyonel
  autoplay: true, // Opsiyonel
  name: "Hello World" // Opsiyonel
})

Sonuç ise şöyle