Lottie: چیست، انیمیشن‌ها و نحوه کار در پلتفرم‌های موبایل

Lottie چیست و چگونه کار می‌کند

Lottie — این یک کتابخانه متن‌باز است که توسط Airbnb در سال ۲۰۱۵ برای رندر انیمیشن‌های برداری در زمان واقعی ساخته شده است. توسعه‌دهنده انیمیشن را در Adobe After Effects ایجاد می‌کند، آن را از طریق پلاگین Bodymovin به JSON صادر می‌کند و Lottie این JSON را در دستگاه هدف با تفسیر لایه‌ها، اشکال، شفافیت و منحنی‌های انیمیشن پخش می‌کند.

برخلاف فایل‌های ویدیویی یا GIF، Lottie به وضوح صفحه نمایش وابسته نیست — انیمیشن به صورت برداری رندر شده و در دستگاه‌هایی با هر DPI یکسان به نظر می‌رسد. اندازه انیمیشن JSON به طور متوسط ۵-۱۰ برابر کوچک‌تر از GIF یا ویدیوی معادل است که برای برنامه‌های موبایل با ترافیک محدود حیاتی است.

به گفته Airbnb Engineering، پیاده‌سازی Lottie اندازه انیمیشن‌ها را در برنامه در مقایسه با ویدیوی Precomposed ۸۰٪ کاهش داده است، در حالی که نرخ فریم در تمام دستگاه‌های پشتیبانی‌شده ۶۰ FPS باقی مانده است. امروزه Lottie در iOS، Android، Flutter، React Native، Web (HTML Canvas و SVG) و پلتفرم‌های دسکتاپ پشتیبانی می‌شود.

عملکرد Lottie توسط رندر بومی تضمین می‌شود: در iOS از Core Animation با CALayer استفاده می‌شود، در Android — رندرر Canvas خود به زبان C++ از طریق JNI. این اجازه می‌دهد انیمیشن‌های پیچیده با ده‌ها لایه حتی در دستگاه‌های میان‌رده بدون افت فریم پخش شوند. برخلاف راه‌حل‌های WebView (GIF، APNG، ویدیو)، Lottie یک فرآیند جداگانه برای رندر ایجاد نمی‌کند و حافظه اضافی برای رمزگشایی فریم‌ها مصرف نمی‌کند.

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

اکوسیستم Lottie شامل پخش‌کننده‌های رسمی برای هشت پلتفرم، ویرایشگر LottieFiles برای پیش‌نمایش در مرورگر و بازار با هزاران انیمیشن آماده است. توسعه‌دهنده می‌تواند JSON را دانلود، در پروژه یکپارچه کرده و رنگ‌ها و سرعت را مطابق با سیستم طراحی بدون باز کردن After Effects تنظیم کند. LottieFiles همچنین SDK را برای یکپارچه‌سازی سریع‌تر با قابلیت بارگذاری انیمیشن‌ها از طریق لینک AIR فراهم می‌کند که به‌روزرسانی انیمیشن‌ها را در دستگاه‌ها بدون انتشار نسخه جدید برنامه در App Store یا Google Play امکان‌پذیر می‌سازد.

فرمت JSON Lottie و Bodymovin

طرح JSON Lottie — این یک استاندارد باز برای توصیف انیمیشن برداری است که از سه سطح تشکیل شده است: ترکیب‌بندی (composition)، لایه‌ها (layers) و اشکال (shapes). ترکیب‌بندی شامل فراداده‌ها: اندازه بوم، نرخ فریم و مدت زمان.

ساختار JSON

شیء ریشه JSON شامل فیلد layers — آرایه‌ای از لایه‌های انیمیشن است. هر لایه می‌تواند یک شکل (Shape Layer)، تصویر (Image Layer)، متن (Text Layer) یا پیش‌ترکیب (PreComp Layer) باشد. برای هر لایه ویژگی‌های تبدیل مشخص می‌شود: موقعیت، مقیاس، چرخش و شفافیت با پیوند به فریم‌های کلیدی.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

فریم‌های کلیدی (Keyframes) با آرایه‌هایی از مهرهای زمانی، مقادیر و منحنی‌های Bezier برای درون‌یابی مشخص می‌شوند. Bodymovin به طور خودکار منحنی‌های After Effects را به فرمت قابل فهم برای Lottie تبدیل می‌کند، زمان‌بندی و توابع ease را با دقت فریم حفظ می‌کند.

Bodymovin — پلاگین صادرات

Bodymovin — این افزونه‌ای برای Adobe After Effects است که ترکیب‌بندی را به فایل JSON Lottie صادر می‌کند. این پلاگین از بیشتر قابلیت‌های After Effects پشتیبانی می‌کند: اشکال، ماسک‌ها، افکت‌ها، لایه‌های متنی و ردیابی. محدودیت‌ها مربوط به لایه‌های سه‌بعدی و برخی پلاگین‌ها است — آنها صادر نمی‌شوند و نیاز به ساده‌سازی انیمیشن به دو بعد دارند.

یکپارچه‌سازی Lottie در iOS

در iOS Lottie از طریق Swift Package Manager، CocoaPods یا Carthage یکپارچه می‌شود. کلاس اصلی — LottieView برای SwiftUI و LottieAnimationView برای UIKit. بسته lottie-ios شامل پشتیبانی از انیمیشن‌های باندل، شبکه و اشیاء Data است.

LottieView در SwiftUI

LottieView — این یک کامپوننت View برای SwiftUI است که نام فایل JSON را از باندل یا URL برای بارگذاری از شبکه دریافت می‌کند. انیمیشن به طور خودکار با سرعت و تعداد تکرار مشخص پخش می‌شود.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

برای UIKit از LottieAnimationView با پیکربندی از طریق Interface Builder یا برنامه‌نویسی استفاده می‌شود. View از تمام حالت‌های انیمیشن پشتیبانی می‌کند: play، pause، stop و همچنین نوار پیشرفت برای بارگذاری داده. LottieAnimationView را می‌توان در UITableViewCell یا UICollectionViewCell برای آیکون‌های متحرک در لیست‌ها جاسازی کرد — هنگام اسکرول سلول، انیمیشن متوقف می‌شود و پس از ظاهر شدن روی صفحه از سر گرفته می‌شود که باعث صرفه‌جویی در منابع CPU و GPU می‌شود.

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

مدیریت پخش

پخش‌کننده Lottie در iOS API را برای پخش از فریم مشخص تا فریم مشخص، تغییر رنگ پر/حاشیه از طریق KeyPaths و گوش دادن به رویدادها از طریق LottieAnimationDelegate فراهم می‌کند. می‌توان انیمیشن را هنگام اسکرول متوقف کرد و پس از توقف برای بهینه‌سازی عملکرد از سر گرفت.

یکپارچه‌سازی Lottie در Android

در Android Lottie از طریق وابستگی Gradle com.airbnb.android:lottie متصل می‌شود. کامپوننت اصلی — LottieAnimationView که می‌تواند در طرح XML به عنوان یک View معمولی قرار گرفته و از طریق ویژگی‌ها یا برنامه‌نویسی پیکربندی شود.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

در طرح XML LottieAnimationView از طریق ویژگی‌ها پیکربندی می‌شود: lottie_rawRes (ارجاع به JSON در res/raw)، lottie_autoPlay، lottie_loop. بارگذاری از شبکه از طریق lottie_url یا برنامه‌نویسی از طریق setAnimationFromUrl پشتیبانی می‌شود. نسخه Android Lottie از رندرر Canvas خود استفاده می‌کند که مستقل از شتاب سخت‌افزاری است.

بارگذاری از RawRes و شبکه

برای انیمیشن‌های ایستا، JSON در res/raw قرار گرفته و از طریق RawRes ارجاع داده می‌شود. برای انیمیشن‌های پویا، Lottie JSON را از URL یا شیء Data با بازخورد پیشرفت که درصد بارگذاری را نشان می‌دهد بارگیری می‌کند. حافظه نهان Lottie به طور خودکار انیمیشن‌های بارگیری شده را در حافظه ذخیره می‌کند تا از بارگیری مجدد هنگام رندر مجدد جلوگیری کند.

Lottie برای Android از انیمیشن در RecyclerView از طریق LottieAnimationView تعبیه شده مستقیماً در عنصر لیست پشتیبانی می‌کند. برای بهینه‌سازی عملکرد، توصیه می‌شود از setAnimation با بارگذاری تأخیری استفاده کرده و انیمیشن را برای عناصر نامرئی روی صفحه از طریق بازخورد RecyclerView.OnChildAttachStateChangeListener غیرفعال کنید. این از افت FPS هنگام اسکرول لیست‌های طولانی با آیکون‌های متحرک جلوگیری می‌کند.

شخصی‌سازی و مدیریت انیمیشن‌های Lottie

Lottie API قدرتمندی برای شخصی‌سازی انیمیشن‌های آماده بدون تغییر فایل اصلی After Effects فراهم می‌کند. این امکان تطبیق یک انیمیشن با تم‌ها، رنگ‌ها و اندازه‌های مختلف برنامه را فراهم می‌کند.

تغییر رنگ از طریق KeyPath

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

مدیریت سرعت و پیشرفت

هر انیمیشن Lottie را می‌توان از نظر سرعت (animationSpeed)، پیشرفت (setProgress) و محدوده فریم (play(fromFrame:toFrame:)) کنترل کرد. حالت پیشرفت امکان همگام‌سازی انیمیشن با ژست اسکرول را فراهم می‌کند: هرچه صفحه بیشتر اسکرول شود، انیمیشن پیشرفته‌تر است — این تکنیک محبوبی برای صفحه‌های خوش‌آمدگویی و افکت‌های پارالاکس است.