Lottie β bu Airbnb tomonidan yaratilgan kutubxona bo'lib, Adobe After Effects'da yaratilgan animatsiyalarni JSON formatga aylantirib veb va mobile platformalarda foydalanishga imkon beradi. Klassik GIF animatsiya katta fayl, sifat past. Video animatsiya og'ir. Lottie β kichik fayl, yuqori sifat, scalable. Hozir Lottie veb dizaynda standart.
Lottie nima va u qanday ishlaydi
Designer Adobe After Effects'da animatsiya yaratadi. \"Bodymovin\" plugin orqali JSON faylga eksport qilinadi. Developer JSON'ni Lottie player kutubxonasi orqali sayt'da ishlatadi.
Brauzer real-time animation render qiladi. JSON kichik (10-100KB), GIF yoki video ko'p og'irroq.
Lottie'ning afzalliklari
Fayl o'lcham: 10-100KB (GIF 1-5MB, video 5-50MB).
Scalable: vector-based, har o'lchamda aniq.
Interactive: JavaScript bilan boshqarish mumkin (play, pause, speed, frame).
Cross-platform: web, iOS, Android, React Native.
Designer-friendly: After Effects bilan yaratish.
Lottie qaerda ishlatish
Hero section animation β sayt boshida e'tibor tortuvchi.
Loading animation β spinner o'rniga jozibali animation.
Empty state β \"Mahsulot topilmadi\" o'rniga sevimli kichik animation.
Success/error feedback β form yuborilganda yashil check animation.
Onboarding β yangi foydalanuvchi xush kelishi.
Microinteractions β like tugmasi animation.
LottieFiles platforma
lottiefiles.com β Lottie animation marketplace. Bepul va pulli animation'lar.
Yuzlab kategoriyalar: business, e-commerce, tech, lifestyle, abstract.
Search va filter bilan kerakli animation topish oson.
Free planda 100+ animation download mumkin.
Lottie sayt'ga qo'shish
Eng oson β lottie-player web component. CDN orqali:
<script src=\"https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js\"></script>
<lottie-player src=\"https://assets.lottiefiles.com/anim.json\" speed=\"1\" autoplay loop></lottie-player>
Bu kod β animation darrov sayt'da ishlaydi.
JavaScript control
Lottie API bilan animation boshqarish:
play(), pause(), stop(), goToAndPlay(frame), setSpeed(speed).
Event listener: onComplete, onLoopComplete.
Interactive animation β scroll'da tezligini o'zgartirish.
Customization
Lottie animation customizable. Rang o'zgartirish JSON'ni edit qilish orqali.
LottieFiles Editor β online tool, animation o'zgartirish.
After Effects'da to'g'ridan-to'g'ri tahrirlash mumkin (agar source bor bo'lsa).
Performance
Lottie GPU accelerated, smooth animation.
Lekin har Lottie animation CPU foydalanadi. Bir sahifada 5+ Lottie animation bo'lsa, performance pasayishi mumkin.
Lazy loading: foydalanuvchi animation joyiga scroll qilgandagina yuklash.
Lottie vs SVG animation
SVG animation: native veb texnologiya, oddiy animatsiyalar uchun.
Lottie: kompleks animatsiyalar, After Effects'dan eksport.
Strategiya: oddiy uchun SVG, murakkab uchun Lottie.
Lottie vs CSS animation
CSS animation: oddiy, fast, no library kerak.
Lottie: complex multi-layer animation.
Button hover β CSS yetadi. Onboarding character animation β Lottie.
Lottie va React/Vue
React: npm install @lottiefiles/react-lottie-player. Component sifatida ishlatish.
Vue: vue-lottie. Va h.k.
Framework'lar uchun maxsus library'lar bor.
File size optimization
Animation oddiy bo'lsa β kichik JSON. Murakkab bo'lsa β katta.
LottieFiles \"Optimize\" tool β file size kamaytirish.
Optimal: 50KB'dan kam.
Mobile va Lottie
Mobile'da Lottie performance ehtiyot. Past quvvatli qurilma sekin render qiladi.
Lazy load β foydalanuvchi animation ekranda ko'rsa yuklash.
Scrolling davomida pause qilish.
Accessibility
Lottie animation accessibility ehtiyot. Vestibular disorder'li foydalanuvchilar uchun muammo.
prefers-reduced-motion qo'llab-quvvatlash β animation o'chirish.
aria-hidden=\"true\" agar dekorativ.
Common Lottie xato
1. Juda katta JSON file (1MB+) β sahifa sekin.
2. Auto-play loop β foydalanuvchini bezor qiladi.
3. Mobile performance ignorate.
4. Accessibility yo'q.
5. Brand bilan mos kelmaydi β generic animation.
Lottie misol use case'lar
Dropbox 404 page β sevimli kichik character animation.
Mailchimp onboarding β characters foydalanuvchini xush kelishi.
GitHub error pages β Octocat animation.
Headspace β calmcing animations meditation app uchun.
Sayt.uz Lottie strategiyasi
Sayt.uz da Lottie subtle ishlatiladi. Hero section'da kichik hosting/domen animation.
Success feedback: form yuborilganda yashil check Lottie animation.
Empty state: blog'da \"Maqola topilmadi\" β kichik character animation.
404 page: sevimli illustration animation.
File size: 30-60KB har animation. Performance yaxshi.
Lazy loading: hero animation darhol, qolganlari scroll'da.
prefers-reduced-motion: animation o'chiriladi.
Natija: sayt yuksak qiymatli ko'rinadi, brand impression mustahkam.