فایل لاتی (Lottie)

جادوی انیمیشن در دنیای وب

دنیای وب امروز، دنیای سرعت، زیبایی و تجربه کاربری است. در این میان، انیمیشن‌ها نقشی حیاتی در جلب توجه کاربر، انتقال مفاهیم و ایجاد یک تجربه دلنشین ایفا می‌کنند. اما استفاده از انیمیشن‌های سنگین و حجیم مانند فایل‌های GIF یا ویدیو، می‌تواند سرعت بارگذاری وب‌سایت شما را به شدت کاهش دهد و به تجربه کاربری لطمه بزند. اینجاست که “فایل لاتی” (Lottie File) به عنوان یک راه‌حل مدرن و کارآمد وارد میدان می‌شود.

در این مقاله، به زبانی ساده به شما خواهیم گفت که فایل لاتی چیست، از کجا آمده است و چگونه می‌توانید از این فناوری شگفت‌انگیز برای افزودن انیمیشن‌های جذاب و سبک به وب‌سایت خود استفاده کنید.

فایل لاتی چیست؟

یک انیمیشن، اما از جنس کد!

تصور کنید یک انیمیشن باکیفیت و روان دارید که حجم آن به مراتب کمتر از یک عکس معمولی است. این تعریف ساده‌ای از فایل لاتی است. لاتی یک فرمت فایل انیمیشن مبتنی بر JSON است. به عبارت دیگر، انیمیشن شما به جای اینکه مجموعه‌ای از تصاویر پشت سر هم (مانند GIF) باشد، به صورت یک سری کد و داده‌های ریاضی ذخیره می‌شود.

این انیمیشن‌ها معمولاً در نرم‌افزار قدرتمند Adobe After Effects طراحی شده و سپس با استفاده از یک افزونه به نام Bodymovin، به یک فایل با فرمت .json تبدیل می‌شوند. این فایل JSON، تمام اطلاعات مربوط به حرکت، رنگ، شکل و زمان‌بندی انیمیشن را در خود جای داده است. سپس، یک کتابخانه جاوا اسکریپت در وب‌سایت شما این فایل را خوانده و انیمیشن را در لحظه برای کاربر “نقاشی” می‌کند.

مهم‌ترین مزایای فایل‌های لاتی:

• حجم فوق‌العاده کم: فایل‌های لاتی به طور شگفت‌انگیزی سبک هستند و در مقایسه با GIF و ویدیو، حجم آن‌ها تا چند صد برابر کمتر است. این یعنی سرعت بارگذاری بالاتر وب‌سایت و رضایت بیشتر کاربران.
• کیفیت بی‌نهایت (مقیاس‌پذیری): از آنجایی که لاتی مبتنی بر وکتور (بردار) است، می‌توانید اندازه انیمیشن را بدون هیچ‌گونه افت کیفیتی بزرگ یا کوچک کنید. انیمیشن شما در هر صفحه‌نمایشی، از موبایل گرفته تا دسکتاپ‌های بزرگ، واضح و شفاف دیده می‌شود.
• انعطاف‌پذیری و کنترل: شما می‌توانید از طریق کد، انیمیشن‌های لاتی را کنترل کنید. برای مثال، می‌توانید سرعت پخش را تغییر دهید، آن را به صورت تعاملی طراحی کنید تا با اسکرول یا کلیک کاربر شروع به پخش کند، یا حتی رنگ بخش‌های مختلف آن را به صورت پویا عوض کنید.
• پشتیبانی گسترده: لاتی در تمام پلتفرم‌های مدرن از جمله وب، اندروید، iOS و React Native پشتیبانی می‌شود و به شما اجازه می‌دهد تا یک انیمیشن را در همه جا به صورت یکپارچه به کار ببرید.

تاریخچه‌ای کوتاه:

داستان لاتی از شرکت معروف Airbnb آغاز شد. در سال ۲۰۱۷، تیم طراحی این شرکت به دنبال راهی بود تا انیمیشن‌های پیچیده و باکیفیتی را که در Adobe After Effects می‌ساختند، به راحتی و بدون افت کیفیت در اپلیکیشن‌های موبایل و وب‌سایت خود پیاده‌سازی کنند. راه‌حل‌های موجود مانند GIF و ویدیو، حجم بالایی داشتند و انعطاف‌پذیری لازم را ارائه نمی‌دادند.

نتیجه تلاش‌های این تیم، خلق یک کتابخانه متن‌باز (Open Source) به نام Lottie بود. نام “لاتی” به افتخار لوته راینیگر (Lotte Reiniger)، انیماتور آلمانی و پیشگام انیمیشن‌های سیلوئت (ضد نور) که یکی از اولین فیلم‌های بلند انیمیشن تاریخ را در دهه ۱۹۲۰ ساخت، انتخاب شد.

این فناوری به سرعت مورد استقبال جامعه طراحان و توسعه‌دهندگان در سراسر جهان قرار گرفت و شرکت‌های بزرگی مانند گوگل، مایکروسافت و اوبر نیز از آن در محصولات خود استفاده کردند. امروزه لاتی به یک استاندارد صنعتی برای انیمیشن‌های وب و اپلیکیشن تبدیل شده است.

چگونه از فایل لاتی در وب‌سایت خود استفاده کنیم؟

استفاده از لاتی در وب‌سایت بسیار ساده‌تر از چیزی است که به نظر می‌رسد. در اینجا چند روش متداول را بررسی می‌کنیم:

۱- استفاده از فایل های لاتی در وبفلو

برای استفاده از فایل های لاتی در وبفلو تنها لازمه که فایل .json رو به قسمت asset های پروژه خودتون اضافه کنید و مستقیم وارد پروژه خودتون کنید به همین سادگی !

۲. استفاده در وردپرس با افزونه‌ها (روش آسان)

اگر وب‌سایت شما با وردپرس ساخته شده است، ساده‌ترین راه استفاده از افزونه‌هاست. صفحه‌سازهای محبوبی مانند المنتور (Elementor) در نسخه پرمیوم خود، یک ویجت اختصاصی برای لاتی دارند. کافیست این ویجت را به صفحه خود اضافه کرده و فایل .json انیمیشن خود را آپلود کنید یا از کتابخانه‌های آنلاین مانند LottieFiles.com یک انیمیشن انتخاب کنید. افزونه‌های دیگری نیز به طور اختصاصی برای این کار در مخزن وردپرس موجود هستند.

۲. استفاده از کد HTML و جاوا اسکریپت (روش سفارشی)

برای کنترل کامل‌تر و استفاده در هر نوع وب‌سایتی، می‌توانید به صورت دستی لاتی را پیاده‌سازی کنید. این کار معمولاً در سه مرحله انجام می‌شود:

• دریافت فایل انیمیشن: ابتدا باید فایل .json انیمیشن خود را داشته باشید. می‌توانید خودتان آن را با After Effects بسازید یا از وب‌سایت LottieFiles.com هزاران انیمیشن آماده و رایگان را دانلود کنید.

• افزودن کتابخانه Lottie Player: کتابخانه جاوا اسکریپت لاتی را به وب‌سایت خود اضافه کنید. ساده‌ترین راه، افزودن کد زیر در بخش <head> یا قبل از بسته شدن تگ <body> در فایل HTML شماست:

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

نمایش انیمیشن: در هر کجای صفحه که می‌خواهید انیمیشن نمایش داده شود، از تگ سفارشی dotlottie-player استفاده کنید:

<dotlottie-player
  src="[آدرس فایل .json شما]"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;"
  loop
  autoplay>
</dotlottie-player>

در کد بالا، src را با آدرس فایل JSON خود جایگزین کنید. ویژگی‌هایی مانند speed (سرعت)، loop (تکرار) و autoplay (پخش خودکار) به شما کنترل کاملی بر روی نحوه نمایش انیمیشن می‌دهند.

نتیجه‌گیری: آینده انیمیشن اینجاست!

فایل‌های لاتی دیگر یک فناوری نوظهور نیستند، بلکه یک ابزار استاندارد و قدرتمند در جعبه ابزار طراحان و توسعه‌دهندگان وب مدرن محسوب می‌شوند. با حجم کم، کیفیت بالا و انعطاف‌پذیری بی‌نظیر، لاتی به شما این امکان را می‌دهد که بدون قربانی کردن سرعت و عملکرد، وب‌سایت‌هایی پویاتر، جذاب‌تر و حرفه‌ای‌تر بسازید. پس اگر به دنبال راهی برای ارتقای تجربه کاربری وب‌سایت خود هستید، جادوی لاتی را دست کم نگیرید.