Lottie — τι είναι, διανυσματικά κινούμενα σχέδια σε εφαρμογές κινητών

Τι είναι το Lottie;

Lottie — μια cross-platform βιβλιοθήκη για αναπαραγωγή διανυσματικών κινούμενων σχεδίων, που αναπτύχθηκε στην Airbnb το 2015. Λύνει το πρόβλημα των βαριών αρχείων βίντεο και των raster sprite sheet: ο σχεδιαστής δημιουργεί το κινούμενο σχέδιο στο After Effects, το εξάγει μέσω Bodymovin σε JSON και ο προγραμματιστής ενσωματώνει αυτό το αρχείο στην εφαρμογή κινητού. Το Lottie αποδίδει το κινούμενο σχέδιο προγραμματιστικά μέσω Canvas, Core Animation ή Skia, ανάλογα με την πλατφόρμα.

Το κύριο πλεονέκτημα του Lottie — το διανυσματικό κινούμενο σχέδιο κλιμακώνεται χωρίς απώλεια ποιότητας σε οποιαδήποτε οθόνη: από τα ρολόγια Apple Watch έως τις τηλεοράσεις 4K. Το μέγεθος του αρχείου JSON κινούμενου σχεδίου είναι συνήθως 5–50 KB, που είναι δεκάδες φορές μικρότερο από ένα ισοδύναμο αρχείο βίντεο. Σύμφωνα με το 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 vs βίντεο: σύγκριση μορφών κινούμενων σχεδίων

Το Lottie διαφέρει θεμελιωδώς από τα αρχεία βίντεο: δεν αποθηκεύει pixel, αλλά περιγράφει διανυσματικά σχήματα, τους μετασχηματισμούς τους και καμπύλες αλλαγής στο χρόνο. Το βίντεο (MP4, WebM) — είναι μια ακολουθία raster καρέ σταθερής ανάλυσης. Η διαφορά εκδηλώνεται στο μέγεθος αρχείου, την ποιότητα κλιμάκωσης, τη διαδραστικότητα και την απόδοση.

Πότε να επιλέξετε Lottie: εικονίδια φόρτωσης, like/αντιδράσεις κινούμενα σχέδια, οθόνη υποδοχής, μικροκινήσεις έμφασης κουμπιών. Για σύνθετες σκηνές με 3D εφέ, ρεαλιστικό φωτισμό ή φωτορεαλιστικούς χαρακτήρες, το βίντεο παραμένει η πιο πρακτική επιλογή. Το 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)

// Pool 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. Χρησιμοποιήστε dotLottie αντί για JSON — η δυαδική μορφή συμπιέζει το κινούμενο σχέδιο κατά 50–80% μέσω σειριοποίησης protobuf, μειώνοντας το χρόνο ανάλυσης. Για κινούμενα σχέδια σε RecyclerView, ορίστε repeatCount = 0 (εφάπαξ αναπαραγωγή) και σταματήστε το κινούμενο σχέδιο κατά την κύλιση μέσω recyclerView.addOnScrollListener. Σύμφωνα με το Airbnb Engineering Blog (2025), αυτά τα μέτρα μειώνουν το φορτίο CPU έως 40%.