Animations στο React Native. Πώς να επιτύχετε εξαιρετικές επιδόσεις και συμβουλές - 1x04

Αυτή η ιστορία είναι μέρος μιας σειράς όπου μοιράζομαι τις εμπειρίες μου στο React Native: πώς προσέγγισα και εργαζόμουν με τα RN Components, API, εξωτερικά πακέτα και όλα τα είδη των θεμάτων. Ελπίζω ότι αυτή η σειρά θέσεων θα αποδειχθεί χρήσιμη στην κοινότητα React Native και θα προσφέρει χρήσιμες γνώσεις.

Γιατί είναι σημαντικές οι κινούμενες εικόνες;

Οι κινούμενες εικόνες είναι σημαντικές για τη δημιουργία μιας βέλτιστης εμπειρίας χρήστη, ειδικά στον κόσμο των κινητών τηλεφώνων. Οι χρήστες των εφαρμογών έχουν ήδη εκτεθεί σε πολλά από αυτά και έχουν εξοικειωθεί με την ευχρηστία και την ομορφιά τους. Και δεδομένου ότι έχουν εμπειρία hands-on μαζί τους, περιμένουν τους ως δεδομένο σε κάθε εφαρμογή που κατεβάζουν. Σύμφωνα με την τεκμηρίωση των αντιγράφων Native animations:

Τα αντικείμενα σε κίνηση έχουν ορμή.
Οι κινούμενες εικόνες σάς επιτρέπουν να μεταφέρετε τη σωματικά πιστευτή κίνηση στη διεπαφή σας.
Εικόνα 1: Οι κινούμενες εικόνες είναι φοβερό!

Συστήματα κίνησης σε Reactive Native

Αντίστοιχα, το Native παρέχει δύο συμπληρωματικά συστήματα κινούμενων σχεδίων: κινούμενα animation και animation animation. Αυτά είναι 2 διαφορετικά API με διαφορετική χρησιμότητα και σκοπό.

Το προσωπικό μου αίσθημα είναι ότι το Animated χρησιμοποιείται ευρύτερα από τους προγραμματιστές, πιθανότατα επειδή παρέχει περισσότερο έλεγχο - και έρχεται επίσης με καλύτερη τεκμηρίωση.

Σε αυτό το άρθρο υποθέτω ότι είστε εξοικειωμένοι με το Animated API και θα μπω στο blog για το πώς θα επιτύχουμε τις καλύτερες επιδόσεις από αυτό, μαζί με κάποιες άλλες πρακτικές συμβουλές.

Ζωντανές συμβουλές API: Απόδοση και πολλά άλλα

Για να δημιουργήσετε μια κινούμενη εικόνα μπορείτε να βρείτε πολύ καλά τεκμηρίωση και παραδείγματα "πώς να ξεκινήσετε" στην τεκμηρίωση Reactive Native animations.

Πώς να επιτύχετε εξαιρετική απόδοση

Για να επιτύχετε εξαιρετική απόδοση, πρέπει πάντα να χρησιμοποιήσετε τη ρύθμιση use prop useNativeDriver (με τιμή που έχει οριστεί σε true). Για παράδειγμα, για να ενεργοποιήσουμε την περιστροφή μιας εικόνας, η λειτουργία χρονισμού θα μοιάζει με αυτή:

Animated.timing (
  this.state.spinValue,
  {
    toValue: 1,
    διάρκεια: 3000,
    χαλάρωση: Easing.linear,
    useNativeDriver: true
  }}
).αρχή();

Αυτή η ρύθμιση παραμέτρων είναι πολύ σημαντική επειδή με αυτόν τον τρόπο το RN στέλνει το animation να εκτελείται στην εγγενή σφαίρα που περνά απευθείας από τη γέφυρα μόνο μία φορά, επιτυγχάνοντας έτσι την καλύτερη δυνατή απόδοση. Εάν δεν είστε εξοικειωμένοι με τη σφαίρα JavaScript και τις γειτονικές σφαίρες, μπορείτε να λάβετε περισσότερες πληροφορίες σε αυτή την ανάρτηση από το @TalKol.

Τώρα, σύμφωνα με την τεκμηρίωση RN useNativeDriver prop δεν μπορεί να χρησιμοποιηθεί για όλους τους τύπους κινούμενων σχεδίων:

Όχι μόνο τα πράγματα που μπορείτε να κάνετε με το Animated υποστηρίζεται αυτή τη στιγμή στο Native Animated. Ο κύριος περιορισμός είναι ότι μπορείτε να ζωντανέψετε μόνο τις ιδιότητες χωρίς διαμόρφωση, πράγματα όπως ο μετασχηματισμός και η αδιαφάνεια θα λειτουργούν, αλλά οι ιδιότητες flexbox και θέσης δεν θα είναι.

Υπάρχει ένας τρόπος να ξεπεραστεί αυτό, αν συνθέτετε κινούμενα σχέδια. Για παράδειγμα, ας πάρουμε ένα παράδειγμα από την εφαρμογή Math Warriors Android όπου αλλάζουμε το μέγεθος της εικόνας του λογότυπου όταν ο χρήστης κάνει κλικ στο κουμπί παιχνιδιού εκκίνησης.

Εικόνα 2: Το μέγεθος του λογότυπου αυξάνει το κινούμενο σχέδιο όταν το κουμπί παιχνιδιού εκκίνησης έχει πατηθεί στο Math Warriors

Αυτό που κάνουμε σε αυτό το σημείο είναι ότι αλλάζουμε ταυτόχρονα το πλάτος και το ύψος του λογότυπου και ότι αυτές οι ιδιότητες δεν υποστηρίζουν τη χρήση της ιδιότητας του κινούμενου οδηγού. Η παράλληλη εκτέλεση τους υποστηρίζει, όπως φαίνεται παρακάτω:

Animated.parallel (
  [
    Animated.timing (
      this.state.rankImageWidth,
      {
        toValue: 110
      }}
    ),
    Animated.timing (
      this.state.rankImageHeight,
      {
        toValue: 110
      }}
    )
  ],
  {
    useNativeDriver: true
  }}
).αρχή();

Πώς να εκτελέσετε κινούμενα σχέδια σε βρόχους

Το RN δεν υποστηρίζει κινούμενα σχέδια βρόχου από το κιβώτιο, οπότε έπρεπε να βρούμε έναν τρόπο. Ένα δεύτερο παράδειγμα από το παιχνίδι Math Warriors, το οποίο είναι στην πραγματικότητα η επέκταση του προηγούμενου παραδείγματός μας, είναι το εξής: Μόλις ο χρήστης πιέσει το κουμπί παιχνιδιού εκκίνησης, το λογότυπο αυξάνει το μέγεθός του και αρχίζει να κινείται προς τα πάνω και προς τα κάτω σε βρόχο η εφαρμογή αντιστοιχεί στον παίκτη με έναν αντίπαλο.

Εικόνα 3: Λογότυπο κίνησης λογοτύπου σε βρόχο όταν ξεκινάει το παιχνίδι με κλικ στους πολεμιστές του Math

Εκτελέσαμε αυτό δημιουργώντας ένα αναγνωριστικό διαστήματος JavaScript. Το catch here είναι ότι για να αποφύγετε δυσλειτουργίες και χρόνο αναμονής, πρέπει να εκτελέσετε την πραγματική κίνηση δύο φορές: την πρώτη και όλες τις άλλες που θα ακολουθήσουν μέσα σε ένα βρόχο (διάστημα JavaScript).

// Κινούμενη λειτουργία που μετακινεί ένα στοιχείο πάνω από τον άξονα y με την πάροδο του χρόνου
constAndDown = (yPositionPropName, διάρκεια, yHighPosition, yLowPosition) => {
  Animated.sequence ([
    Animated.timing (yPositionPropName, {
      διάρκεια: διάρκεια || 1000,
      toValue: yHighPosition
    }),
    Animated.timing (yPositionPropName, {
      διάρκεια: διάρκεια || 1000,
      toValue: yLowPosition
    })
  ]).αρχή();
},
// Καλέστε και χρησιμοποιήστε την παραπάνω λειτουργία
// Ξεκινήστε την κινούμενη εικόνα προς τα πάνω και προς τα κάτω για πρώτη φορά πριν αναλάβει ο βρόχος
πάνω και κάτω(
  this.state.rankImageTopPosition,
  this.rankImageMoveDuration,
  Αυτή η εικόνα,
  αυτή τη θέση
) ·
// Βρόχος ταξινομεί την κίνηση προς τα πάνω και προς τα κάτω. Συνολικός χρόνος διαστήματος
// είναι (χρόνος κινούμενης εικόνας x 2) για ολόκληρη την κίνηση προς τα επάνω και κάτω
this.rankAnimationIntervalId = setInterval (() => {
  πάνω και κάτω(
    this.state.rankImageTopPosition,
    this.rankImageMoveDuration,
    Αυτή η εικόνα,
    αυτή τη θέση
  ) ·
}, this.rankImageMoveDuration * 2).
// Καθαρίστε το id interval αφού ταιριάξουμε τον παίκτη μας με έναν αντίπαλο
clearInterval (this.rankAnimationIntervalId);

Πώς να χρησιμοποιήσετε κινούμενα στοιχεία με στυλ στοιχεία

Για τους χρήστες των στυλιστικών στοιχείων μπορείτε να μετατρέψετε οποιοδήποτε από τα 4 κινούμενα στοιχεία (Προβολή, Κείμενο, Εικόνα, ScrollView) σε ένα στυλ στοιχείο όπως αυτό:

const AnimatedImage = στυλ (Animated.Image) `
    .
    .
    .
';

Επαληθεύστε την πραγματική απόδοση του animation

Για να κατανοήσετε πώς συμπεριφέρεται το κινούμενο γραφείο σας, πρέπει να το δοκιμάσετε σε μια πραγματική συσκευή. Οι εξομοιωτές δεν μπορούν να παρέχουν αυτό το είδος ανατροφοδότησης. Αντίθετα, το κινούμενο πλάνο σας μπορεί να τρέχει άψογα σε ένα εξομοιωτή περιβάλλον και να κολλάει σε μια πραγματική συσκευή. Μόνο η πραγματική δοκιμή συσκευής μπορεί να αποκαλύψει εάν η κινούμενη εικόνα εμφανίζεται σε 60 FPS ή λιγότερο, η οποία είναι όταν βιώνουμε αργά σπασίματα κινούμενα σχέδια.

Τι νομίζετε;

Τι σκέφτεστε για τις συμβουλές αυτών των κινούμενων σχεδίων; Πώς δημιουργείτε τα κινούμενα σχέδια σας για σας; Προσθέστε την προοπτική και τις ιδέες σας στην παρακάτω ενότητα σχολίων.

Έχετε ένα συγκεκριμένο θέμα που θα θέλατε να καλύψω; Εάν έχω εργαστεί με αυτό, θα είμαι πολύ χαρούμενος που μοιράζομαι την προοπτική μου.

Εάν σας άρεσε αυτό το άρθρο, μη διστάσετε να το χτυπήσετε αυτό το κουμπί για να βοηθήσετε τους άλλους να το βρουν.

Σχετικά με μένα

Γεια σου, είμαι ο Τάσος. ένας μηχανικός λογισμικού που αγαπά τον ιστό και επί του παρόντος λειτουργεί πολύ με το React Native and React. Είμαι ο συνιδρυτής του γραφείου λογισμικού Coded Lines, όπου αναλαμβάνουμε έργα end-to-end για κινητά και web με έμφαση στο μάρκετινγκ εντός εφαρμογής. Αν ακούγεται αυτό που ψάχνετε, παρακαλώ επικοινωνήστε μαζί μου εδώ: [email protected] Ευχαριστώ που περάσατε :)