Lottie: τι είναι, animation και πώς λειτουργεί σε κινητές πλατφόρμες

Τι είναι το Lottie και πώς λειτουργεί

Lottie — είναι μια βιβλιοθήκη ανοικτού κώδικα που δημιουργήθηκε από το Airbnb το 2015 για την απόδοση διανυσματικών animation σε πραγματικό χρόνο. Ο προγραμματιστής δημιουργεί το animation στο Adobe After Effects, το εξάγει μέσω του plugin Bodymovin σε JSON, και το Lottie αναπαράγει αυτό το JSON στη συσκευή-στόχο, ερμηνεύοντας επίπεδα, σχήματα, διαφάνεια και καμπύλες animation.

Σε αντίθεση με αρχεία βίντεο ή GIF, το Lottie δεν εξαρτάται από την ανάλυση οθόνης — το animation αποδίδεται διανυσματικά και εμφανίζεται ίδιο σε συσκευές με οποιοδήποτε DPI. Το μέγεθος ενός animation JSON είναι κατά μέσο όρο 5-10 φορές μικρότερο από ένα ισοδύναμο GIF ή βίντεο, πράγμα κρίσιμο για εφαρμογές κινητών με περιορισμένη κίνηση δεδομένων.

Σύμφωνα με το Airbnb Engineering, η εφαρμογή του Lottie μείωσε το μέγεθος των animation στην εφαρμογή κατά 80% σε σύγκριση με το Precomposed video, ενώ ο ρυθμός καδρών παρέμεινε 60 FPS σε όλες τις υποστηριζόμενες συσκευές. Σήμερα το Lottie υποστηρίζεται σε iOS, Android, Flutter, React Native, Web (HTML Canvas και SVG) και πλατφόρμες επιτραπέζιου υπολογιστή.

Η απόδοση του Lottie εξασφαλίζεται από την εγγενή απόδοση: σε iOS χρησιμοποιείται το Core Animation με CALayer, σε Android — ίδιο Canvas renderer σε C++ μέσω JNI. Αυτό επιτρέπει την αναπαραγωγή πολύπλοκων animation με δεκάδες επίπεδα χωρίς απώλεια καδρών ακόμη και σε συσκευές μεσαίας κατηγορίας. Σε αντίθεση με τις λύσεις WebView (GIF, APNG, βίντεο), το Lottie δεν δημιουργεί ξεχωριστή διεργασία για την απόδοση και δεν καταναλώνει επιπλέον μνήμη για την αποκωδικοποίηση καδρών.

Χρησιμοποιήστε το Lottie για δείκτες φόρτωσης, εικονίδια με μικρο-αλληλεπιδράσεις, οθόνες ενσωμάτωσης και εορταστικές διαφημιστικές animation, όπου η ομαλότητα και το μικρό μέγεθος είναι σημαντικά.

Το οικοσύστημα Lottie περιλαμβάνει επίσημους αναπαραγωγείς για οκτώ πλατφόρμες, τον επεξεργαστή LottieFiles για προεπισκόπηση στον browser και μια αγορά με χιλιάδες έτοιμα animation. Ο προγραμματιστής μπορεί να κατεβάσει JSON, να το ενσωματώσει στο έργο και να ρυθμίσει τα χρώματα και την ταχύτητα σύμφωνα με το σύστημα σχεδίασης χωρίς να ανοίξει το After Effects. Το LottieFiles παρέχει επίσης SDK για επιταχυνόμενη ενσωμάτωση με δυνατότητα φόρτωσης animation μέσω συνδέσμου AIR, που επιτρέπει την ενημέρωση animation στις συσκευές χωρίς δημοσίευση νέας έκδοσης της εφαρμογής στο App Store ή το Google Play.

Μορφή JSON του Lottie και Bodymovin

Το σχήμα JSON Lottie — είναι ένα ανοικτό πρότυπο για την περιγραφή διανυσματικού animation που αποτελείται από τρία επίπεδα: σύνθεση (composition), επίπεδα (layers) και σχήματα (shapes). Η σύνθεση περιέχει μεταδεδομένα: μέγεθος καμβά, ρυθμό καδρών και διάρκεια.

Δομή JSON

Το αντικείμενο ρίζας JSON περιέχει το πεδίο layers — μια συστοιχία επιπέδων animation. Κάθε επίπεδο μπορεί να είναι σχήμα (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 — plugin εξαγωγής

Bodymovin — είναι μια επέκταση για το Adobe After Effects που εξάγει τη σύνθεση σε αρχείο JSON Lottie. Το plugin υποστηρίζει τις περισσότερες δυνατότητες του After Effects: σχήματα, μάσκες, εφέ, επίπεδα κειμένου και παρακολούθηση. Οι περιορισμοί αφορούν 3D επίπεδα και ορισμένα plugin — δεν εξάγονται και απαιτούν απλοποίηση του animation σε 2D.

Ενσωμάτωση Lottie σε iOS

Σε iOS το Lottie ενσωματώνεται μέσω Swift Package Manager, CocoaPods ή Carthage. Η κύρια κλάση — LottieView για SwiftUI και LottieAnimationView για UIKit. Το πακέτο lottie-ios περιλαμβάνει υποστήριξη για animation από bundle, δίκτυο και αντικείμενα Data.

LottieView σε SwiftUI

LottieView — είναι ένα στοιχείο View για SwiftUI που δέχεται το όνομα αρχείου JSON από το bundle ή URL για φόρτωση από το δίκτυο. Το animation αναπαράγεται αυτόματα με την καθορισμένη ταχύτητα και αριθμό επαναλήψεων.

import Lottie

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

Για UIKit χρησιμοποιείται LottieAnimationView με διαμόρφωση μέσω Interface Builder ή προγραμματικά. Το View υποστηρίζει όλες τις καταστάσεις animation: play, pause, stop, καθώς και γραμμή προόδου για φόρτωση δεδομένων. Το LottieAnimationView μπορεί να ενσωματωθεί σε UITableViewCell ή UICollectionViewCell για κινούμενα εικονίδια σε λίστες — κατά την κύλιση, το animation του κελιού διακόπτεται και κατά την εμφάνιση στην οθόνη συνεχίζεται, εξοικονομώντας πόρους CPU και GPU.

Η σύγχρονη ανάπτυξη iOS χρησιμοποιεί ενεργά το Lottie σε συνδυασμό με SwiftUI για τη δημιουργία κινούμενων οθονών ενσωμάτωσης και διαδραστικών στοιχείων: κατά την κύλιση της οθόνης, η πρόοδος του animation συγχρονίζεται με τη θέση κύλισης μέσω του ScrollViewReader. Αυτό δημιουργεί ένα εφέ παράλλαξης όπου το animation ακολουθεί συνεχώς την κίνηση του δαχτύλου του χρήστη, αυξάνοντας την αφοσίωση χωρίς τη χρήση βαριών αρχείων βίντεο.

Διαχείριση αναπαραγωγής

Ο αναπαραγωγέας Lottie σε iOS παρέχει API για αναπαραγωγή από συγκεκριμένο καδρο σε συγκεκριμένο καδρο, αλλαγή χρώματος γεμίσματος/περιγράμματος μέσω KeyPaths και ακρόαση συμβάντων μέσω LottieAnimationDelegate. Μπορείτε να διακόψετε το animation κατά την κύλιση και να το συνεχίσετε κατά τη διακοπή για βελτιστοποίηση απόδοσης.

Ενσωμάτωση 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 renderer, ανεξάρτητο από επιτάχυνση υλικού.

Φόρτωση από RawRes και δίκτυο

Για στατικά animation, το JSON τοποθετείται στο res/raw και αναφέρεται μέσω RawRes. Για δυναμικά animation, το Lottie φορτώνει JSON από URL ή αντικείμενο Data με callback προόδου που δείχνει το ποσοστό φόρτωσης. Η κρυφή μνήμη Lottie αποθηκεύει αυτόματα τα φορτωμένα animation στη μνήμη για να αποφύγει την εκ νέου φόρτωση κατά την επαναλαμβανόμενη απόδοση.

Το Lottie για Android υποστηρίζει animation σε RecyclerView μέσω LottieAnimationView ενσωματωμένου απευθείας στο στοιχείο λίστας. Για βελτιστοποίηση απόδοσης, συνιστάται η χρήση setAnimation με καθυστερημένη φόρτωση και απενεργοποίηση του animation για μη ορατά στοιχεία στην οθόνη μέσω callback RecyclerView.OnChildAttachStateChangeListener. Αυτό αποτρέπει την πτώση FPS κατά την κύλιση μεγάλων λιστών με κινούμενα εικονίδια.

Προσαρμογή και διαχείριση animation Lottie

Το Lottie παρέχει ισχυρό API για προσαρμογή έτοιμων animation χωρίς τροποποίηση του αρχικού αρχείου After Effects. Αυτό επιτρέπει την προσαρμογή ενός animation σε διαφορετικά θέματα, χρώματα και μεγέθη εφαρμογής.

Αλλαγή χρώματος μέσω KeyPath

Τα χρώματα γεμίσματος και περιγράμματος μπορούν να αλλάξουν κατά τον χρόνο εκτέλεσης μέσω KeyPath — μιας διαδρομής συμβολοσειράς προς το στοιχείο animation. Για παράδειγμα, για να αντικαταστήσετε το χρώμα του εικονιδίου καλαθιού από κόκκινο σε μπλε, αρκεί να βρείτε το KeyPath του και να εφαρμόσετε μια νέα τιμή. Αυτό εξαλείφει την ανάγκη αποθήκευσης πολλαπλών εκδόσεων του ίδιου animation για διαφορετικά χρωματικά σχήματα.

Διαχείριση ταχύτητας και προόδου

Κάθε animation Lottie μπορεί να ελεγχθεί ως προς την ταχύτητα (animationSpeed), την πρόοδο (setProgress) και το εύρος καδρών (play(fromFrame:toFrame:)). Η λειτουργία προόδου επιτρέπει τον συγχρονισμό του animation με τη χειρονομία κύλισης: όσο πιο μακριά είναι κυλιέται η οθόνη, τόσο πιο προχωρημένο είναι το animation — αυτή είναι μια δημοφιλής τεχνική για οθόνες ενσωμάτωσης και εφέ παράλλαξης.