Τα προβλήματα απόδοσης Lottie συνήθως προέρχονται από το αρχείο και όχι από τη συσκευή αναπαραγωγής. Το After Effects διευκολύνει την προσθήκη λειτουργιών που είναι δαπανηρή η απόδοση καρέ καρέ σε ένα τηλέφωνο.
Ξεκινήστε με το αρχείο. Οι μάσκες και τα ματ πίστας είναι συχνά το μεγαλύτερο κόστος. αντικαταστήστε τα με πιο απλά σχήματα όπου είναι δυνατόν. Αφαιρέστε εφέ και θολώματα που δεν χρειάζεται η συσκευή αναπαραγωγής. Συγχωνεύστε σχήματα, μειώστε τον αριθμό των στρώσεων και προσυνθέστε προσεκτικά. Οι μεγάλες ενσωματωμένες εικόνες προσθέτουν κόστος μνήμης και αποκωδικοποίησης, επομένως βελτιστοποιήστε ή αντικαταστήστε τις με διανύσματα. Ένας επιθεωρητής Lottie, όπως το δωρεάν πρόγραμμα προβολής Lottie JSON, σας βοηθά να δείτε τι υπάρχει μέσα σε ένα αρχείο.
Στη συνέχεια, ελέγξτε πώς το παίζει η εφαρμογή. Τα κινούμενα σχέδια που συνεχίζουν να εμφανίζονται όταν είναι εκτός οθόνης, μέσα σε μια κλειστή καρτέλα ή σε ένα κελί λίστας που απομακρύνθηκε με κύλιση, εξακολουθούν να χρησιμοποιούν τη CPU και την μπαταρία. Σταματήστε τα όταν δεν είναι ορατά και σταματήστε τους βρόχους που δεν χρειάζονται. Αποφύγετε την αναπαραγωγή δεκάδων κινούμενων εικόνων ταυτόχρονα.
Διαλέξτε τις σωστές επιλογές για την πλατφόρμα σας. Στον ιστό, οι αποδόσεις SVG και καμβάς αποδίδουν διαφορετικά ανάλογα με το κινούμενο σχέδιο, επομένως δοκιμάστε και τα δύο. Η συμπιεσμένη μορφή .lottie (dotLottie) μειώνει το μέγεθος λήψης. Σε Android, δοκιμάστε με επιτάχυνση υλικού όπου το υποστηρίζει η συσκευή αναπαραγωγής σας.
Τέλος, μετρήστε σε μια συσκευή χαμηλού επιπέδου. Εάν ένα κινούμενο σχέδιο εξακολουθεί να είναι πολύ βαρύ, μπορεί να είναι το λάθος εργαλείο για τη δουλειά: ένα απλό CSS ή εγγενές κινούμενο σχέδιο μπορεί να αντικαταστήσει έναν διακοσμητικό βρόχο και τα διαδραστικά στοιχεία μπορεί να ενσωματωθούν καλύτερα σε ένα εργαλείο που βασίζεται σε κατάσταση όπως το Rive ή το ExodeUI, που κατασκευάζουμε.