Κινώντας διαβαθμίσεις σε React Native

Δουλεύω σε ένα προσωπικό έργο που ονομάζεται KaoCards, μια εφαρμογή flashcard για να θυμάμαι τα ονόματα και τα πρόσωπα των ανθρώπων. Όταν σχεδίασα το προϊόν σκέφτηκα ότι θα ήταν δροσερό να έχει μια κινούμενη κλίση ως φόντο, αλλά όταν προσπάθησα να το εφαρμόσω, αποδείχθηκε ότι ήταν περισσότερη δουλειά από όσο σκέφτηκα.

Έτσι, εδώ είναι η ιστορία του πώς κατάφερα να λειτουργήσει. Αν θέλετε το TL, DR, έκανα ένα αποθετήριο που μπορείτε να ακολουθήσετε.

Μια αφελής απόπειρα.

Εάν θέλετε να το καταλάβετε, είναι σημαντικό να ξέρετε γιατί η πρώτη προσπάθεια μου δεν λειτούργησε.

Για να εμφανιστεί μια κλίση στο React Native, οι άνθρωποι χρησιμοποιούν ένα έργο που ονομάζεται αντίδραση-native-linear-gradient. Ήθελα να δω αν κάποιος είχε δοκιμάσει να κινεί τα χρώματα και βρήκα το παράδειγμα μετάβασης με κινούμενη κλίση σε αυτό το repo. Κοιτώντας τον κώδικα, είχα αυτή την αντίδραση:

Δεν κατάλαβα γιατί χρειάστηκαν δύο τάξεις, γιατί υπήρχε τόσο πολύς κώδικας. Δεν σκέφτηκα ότι θα χρειαζόμασταν τόσο πολύ. Αποφάσισα ότι δεν θα ασχοληθώ με όλα αυτά. Σκέφτηκα ότι ο τρόπος για να γίνει αυτό πρέπει να είναι αρκετά απλός:

  1. Δημιουργήστε ένα στοιχείο AnimatedLinearGradient χρησιμοποιώντας το Animate.createAnimatedComponent
  2. Interpolate μερικά χρώματα και να τα περάσετε στο AnimatedLinearGradient

Απλά, έτσι; Εδώ είναι η πηγή (θα συντριβή). Έκανα μια πειραματική εφαρμογή, την έτρεξα και στη συνέχεια, την μήτρα της μήτρας. Παίρνουμε το σφάλμα:

Η τιμή JSON ` 'του τύπου NSNull δεν μπορεί να μετατραπεί σε UICcolor. Ξεχάσατε να καλέσετε το processColor () στην πλευρά JS;

Κάτι που κάπου κάτω από τη γραμμή δεν έλαβε τιμές χρωμάτων. Έτσι γύρισα στο Twitter για βοήθεια:

Ο Jason Brown απάντησε με την βασική ιδέα:

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

Γίνεται σαφές γιατί το αρχικό παράδειγμα ήταν τόσο μεγάλο.

Το κτίσιμο σωστά.

Εντάξει, κατανοώντας αυτόν τον περιορισμό σχετικά με το Animated, ας τροποποιήσουμε το σχέδιο παιχνιδιού μας και να το καταστήσουμε λίγο πιο ισχυρό.

  1. Θέλουμε το κύριο συστατικό μας, AnimatedGradient, να λειτουργεί ακριβώς όπως το LinearGradient. Θα πρέπει να λάβει μια σειρά από χρώματα.
  2. Θέλουμε μια μετάβαση να συμβεί όταν αλλάζουμε τα χρώματα prop. Για να γίνει αυτό, το AnimatedGradient πρέπει να παρακολουθεί τα προηγούμενα χρώματα.
  3. Δεδομένου ότι δεν μπορούμε να ζωντανέψουμε τις τιμές σε συστοιχίες, μπορούμε να φτιάξουμε ένα στοιχείο GradientHelper που παίρνει τα χρώματα ξεχωριστά και να καλέσουμε το Animated.createAnimatedComponent σε αυτό. Το GradientHelper θα τοποθετήσει τις τιμές σε μια συστοιχία και θα τις μεταβιβάσει στο στοιχείο LinearGradient από το πακέτο αντίδρασης-φυσικής γραμμικής κλίσης.

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

Κινούμενο συστατικόGradient

Κωδικός πηγής

Αρχικά, θα δημιουργήσουμε ένα AnimatedGradientHelper από το GradientHelper, το οποίο θα κάνουμε λίγο.

Στον κατασκευαστή του AnimatedGradient, θα αρχικοποιήσουμε ένα πεδίο κατάστασης prevColors για να παρακολουθείτε τα προηγούμενα χρώματα. Αρχίζουμε επίσης ένα Animated.Value που ονομάζεται tweener.

Στο getDerivedStateFromProps, παίρνουμε την τιμή state.colors και κολλάμε στο state.prevColors. Ορίσαμε τις νέες state.colors και επαναφέρουμε το tweener.

Στο componentWillUpdate (γνωστός και ως όταν αλλάζουμε στηρίγματα), θα κάνουμε το tweener να μετακινηθεί από το 0 στο 1.

Στη μέθοδο rendering, χρησιμοποιούμε το tweener, prevColors και τα χρώματα για να δημιουργήσουμε δύο χρωματικές παρεμβολές και να τις περάσουμε ξεχωριστά στο AnimatedGradientHelper μας.

Βοηθός κλίσης

SourceCode

Στο GradientHelper, το μόνο που κάνουμε είναι να πάρουμε τα χρώματα1 και color2 στηρίγματα, τα βάζουμε σε μια συστοιχία, και να τα μεταφέρουμε σε LinearGradient. Κάνουμε αυτό γιατί πρέπει να περάσουμε γύρω από τους περιορισμούς του Animated.

Και αυτή είναι η ουσία του. Εδώ είναι το demo:

Τώρα ξέρουμε γιατί το αρχικό παράδειγμα είναι τόσο μεγάλο. Έπρεπε να κάνει όλα αυτά τα πράγματα και να χειριστεί κλίσεις με περισσότερα από 2 χρώματα.

Αλλά περιμένετε, τι άλλο μπορούμε να ζωντανέψουμε;

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

Απλά θα χρειαστεί να τροποποιήσουμε λίγο το GradientHelper κάνοντας κάτι με τα στηρίγματα. Πηγή

Και τώρα έχουμε ένα πιο δροσερό demo.

Ήμουν σε θέση να συνδυάσω αυτή την κινούμενη κλίση με κάποια άλλα κινούμενα σχέδια για να δημιουργήσω ένα δροσερό αποτέλεσμα φόντου για το έργο KaoCards μου:

Έτσι, τώρα ξέρετε πώς να ζωντανέψετε κλίσεις στο React Native, και λίγο περισσότερο για το πώς Animated έργα. Ποιες άλλες ιδιότητες νομίζετε ότι μπορείτε να ζωντανέψετε;

Χάρη στον Jason Brown για την παροχή της βασικής γνώσης. Όλα όσα έχω μάθει σχετικά με την ταινία animation στο React Native έχω μάθει από αυτόν. Σιγουρευτείτε ότι τον ακολουθείτε στο Twitter και ελέγξτε το μάθημα του React Native Animations.