İçeriğe geç

Lottie nedir?

Merhaba dostlar! Bugün Lottie adındaki animasyon kütüphanesi hakkında konuşacağız. Lottie airbnb tarafından IOS, Android ve Web ortamı için geliştirilen bir animasyon kütüphanesidir. Lottie nereden ulaşabilirim veya nasıl oluşturabilirim? Lottie Animasyonlar oluşturmak için After effects programında animasyonların Bodymovin eklentisi sayesinde json formatına çevrilmesi gerekiyor. Peki nereden ulaşabilirim? En büyük lottie animasyon sayfası/topluluğu lottiefiles.com‘dur bura binbir çeşit animasyonlara ulaşabilirsiniz. Aynı şekilde tasarımcı isteniz bu site üzeri satışta yapabilirsiniz!

Nasıl kullanılır?

Ben size kısa ve öz olması açısından HTML entegrasyonunu göstereceğim. Örnekte kullanacağım tasarım.

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_5n8yfkac.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

Sağ tarafta gördüğünüz gibi bir çıktı alacaksınız. Belirlediğimiz lottie-player elementimiz’in src attribute’u kullanacağımız animasyonun JSON dosyasına giden bir bağlantı veya dosya yolu belirtmeniz gerek aksi taktirde çalışmayacaktır!

Son olarak!

Lottie teknolojisi önü açık bir teknoloji performans açısından olsun dosya boyutunu düşük tutarak hızlı ve akıcı bir görüntü sağlamaktadır. İlerleyen zamanlarda bir çok projede yerini alacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir