Lottie — چیست، انیمیشن برداری در برنامه‌های موبایل

Lottie چیست؟

Lottie — یک کتابخانه چندسکویی برای پخش انیمیشن برداری است که در سال 2015 در Airbnb توسعه یافت. این کتابخانه مشکل فایل‌های ویدیویی سنگین و صفحات اسپرایت شطرنجی را حل می‌کند: طراح انیمیشن را در After Effects می‌سازد، از طریق Bodymovin به JSON صادر می‌کند و توسعه‌دهنده این فایل را در برنامه موبایل جاسازی می‌کند. Lottie انیمیشن را بسته به پلتفرم از طریق Canvas، Core Animation یا Skia به صورت برنامه‌ای رندر می‌کند.

مزیت اصلی Lottie — انیمیشن برداری بدون افت کیفیت در هر صفحه‌ای مقیاس می‌شود: از ساعت‌های Apple Watch تا تلویزیون‌های 4K. اندازه فایل JSON انیمیشن معمولاً 5–50 کیلوبایت است که ده‌ها برابر کوچک‌تر از فایل ویدیویی معادل است. بر اساس داده‌های Airbnb Engineering (2025)، Lottie بیش از 80% از قابلیت‌های Adobe After Effects از جمله ماسک‌ها، افکت‌ها، منحنی‌ها و عبارت‌ها را پشتیبانی می‌کند.

Bodymovin — یک پلاگین برای After Effects (رایگان، GitHub) است که ترکیب را به فرمت JSON قابل فهم برای زمان اجرای Lottie سریالی می‌کند. نسخه‌های After Effects CC 2018 و جدیدتر پشتیبانی می‌شوند. برای انیمیشن‌های پیچیده با تعداد زیادی فریم کلیدی، استفاده از dotLottie — فرمتی مبتنی بر Lottie JSON اما فشرده و بسته‌بندی شده در یک فایل — توصیه می‌شود.

معماری Lottie: رندرینگ چگونه کار می‌کند

Lottie از معماری رندرینگ لایه‌ای استفاده می‌کند که با قابلیت‌های پلتفرم تطبیق می‌یابد. در Android انیمیشن از طریق Canvas API کشیده می‌شود — رندرر اختصاصی Lottie (LottieDrawable) که از انیمیشن‌های سیستمی استفاده نمی‌کند. در iOS Lottie بر Core Animation Layers تکیه می‌کند که عملکرد بالا و 60 FPS را فراهم می‌کند. در Flutter Lottie از Skia Canvas از طریق CustomPainter استفاده می‌کند.

رندرینگ سه مرحله را طی می‌کند: تجزیه JSON — تحلیل انیمیشن در LottieComposition (همه لایه‌ها، اشکال، فریم‌های کلیدی)؛ درون‌یابی — محاسبه مقادیر میانی بین فریم‌های کلیدی با در نظر گرفتن منحنی‌های easing؛ رسم — رندر فریم جاری روی Canvas یا از طریق Core Animation. Lottie از شتاب‌دهی سخت‌افزاری پشتیبانی می‌کند: در Android — شتاب از طریق Canvas با Hardware Accelerator، در iOS — CALayer با شتاب‌دهی GPU داخلی Core Animation.

استفاده از Lottie در Android (Kotlin)

در Android LottieAnimationView AppCompatImageView را گسترش می‌دهد و کل چرخه بارگذاری و رندرینگ را بر عهده می‌گیرد. فایل JSON در پوشه res/raw یا assets قرار می‌گیرد. LottieAnimationView از مدیریت پخش — play، pause، resume، setFrame، setProgress، repeat، speed — و شنود از طریق AnimatorUpdateListener و AnimatorListener پشتیبانی می‌کند.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// تنظیم برنامه‌ای LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// بارگذاری از assets و کش کردن
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — رسم سفارشی بدون View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

بهترین روش‌های Android: برای انیمیشن‌های مکرر از setCacheStrategy(CacheStrategy.Strong) استفاده کنید — ترکیب در حافظه کش می‌شود و هر نمونه جدید JSON را دوباره تجزیه نمی‌کند. برای لیست‌ها (RecyclerView) از LottieAnimationView با enableMergePathsForKitKatAndAbove(true) و disableExtraScaleModeForOlderWorkarounds() برای بهینه‌سازی رندر استفاده کنید. برای انیمیشن‌های با پس‌زمینه شفاف android:layerType="hardware" را برای شتاب GPU تنظیم کنید.

استفاده از Lottie در iOS (Swift)

در iOS AnimationView — کلاس اصلی Lottie برای UIKit و SwiftUI است. از طریق Swift Package Manager یا CocoaPods متصل می‌شود. فایل‌های JSON به bundle پروژه اضافه می‌شوند. AnimationView به طور خودکار scale (تراکم منطقی صفحه) را تعیین می‌کند و از Core Animation برای رندر لایه‌ها با 60 FPS استفاده می‌کند.

import Lottie

// UIKit: AnimationView با کنترل دستی
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("بخش انیمیشن تمام شد: \(finished)")
}
view.addSubview(animationView)

// UIKit: انیمیشن با پیشرفت (برای اتصال به رویداد)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView به عنوان UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// استفاده در SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

بهترین روش‌های iOS: برای انیمیشن‌هایی که بلافاصله پس از بارگذاری شروع می‌شوند، از animationView.play(fromProgress: 0, toProgress: 1) با loopMode = .playOnce برای افکت‌های تاکیدی یک‌باره استفاده کنید. برای Lottie در UITableView/UICollectionView از AnimationView با فایل انیمیشن کش شده از طریق LottieAnimation.cached استفاده کنید. رندر تعداد زیادی لایه (50+) ممکن است باعث افت FPS شود — در چنین مواردی renderingEngine = .mainThread (پیش‌فرض) یا .coreAnimation را برای macOS فعال کنید.

Lottie در مقابل ویدیو: مقایسه فرمت‌های انیمیشن

Lottie اساساً با فایل‌های ویدیویی متفاوت است: پیکسل ذخیره نمی‌کند، بلکه اشکال برداری، تبدیل‌های آنها و منحنی‌های تغییر در زمان را توصیف می‌کند. ویدیو (MP4، WebM) — دنباله‌ای از فریم‌های شطرنجی با وضوح ثابت است. تفاوت در اندازه فایل، کیفیت مقیاس‌پذیری، تعاملی بودن و عملکرد نمایان می‌شود.

چه زمانی Lottie را انتخاب کنیم: آیکون‌های بارگذاری، لایک/انیمیشن‌های واکنش، صفحه خوش‌آمدگویی، میکروانیمیشن‌های تاکیدی دکمه‌ها. برای صحنه‌های پیچیده با افکت‌های سه‌بعدی، نورپردازی واقع‌گرایانه یا شخصیت‌های فوتورئالیستیک، ویدیو انتخاب عملی‌تری باقی می‌ماند. Lottie برای پخش صحنه‌های طولانی (بیش از 10 ثانیه) طراحی نشده است — مدت زمان بهینه یک انیمیشن 2–5 ثانیه است.

بهینه‌سازی عملکرد Lottie

عملکرد Lottie به تعداد لایه‌ها، پیچیدگی ماسک‌ها و افکت‌ها و همچنین به رندرر بستگی دارد. برای حفظ 60 FPS در دستگاه‌های میان‌رده، توصیه‌ها را دنبال کنید: تعداد لایه‌ها را به 30–40 در هر صحنه محدود کنید، از تداخل pre-compositions تو در تو خودداری کنید، برای انیمیشن‌های پیچیده از dotLottie استفاده کنید.

// بهینه‌سازی Lottie برای RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// کش کردن ترکیب در حافظه
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// استخر LottieAnimationView برای استفاده مجدد
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// غیرفعال کردن قابلیت‌های غیرضروری
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // محدود کردن تعداد فریم‌ها

بهینه‌سازی‌های اضافی: enableMergePathsForKitKatAndAbove(true) را برای دستگاه‌های با Android 4.4+ فعال کنید — این کار خطوط همپوشان را در یک مسیر ادغام کرده و تعداد draw calls را کاهش می‌دهد. به جای JSON از dotLottie استفاده کنید — فرمت باینری با استفاده از سریال‌سازی protobuf انیمیشن را 50–80% فشرده می‌کند که زمان تجزیه را کاهش می‌دهد. برای انیمیشن‌های RecyclerView repeatCount = 0 (پخش یک‌باره) تنظیم کنید و انیمیشن را هنگام اسکرول از طریق recyclerView.addOnScrollListener متوقف کنید. به گفته Airbnb Engineering Blog (2025)، این اقدامات بار CPU را تا 40% کاهش می‌دهد.