Ροή σύνδεσης με κινούμενα σχέδια

Αυτό το ιστολόγιο είναι ένας τρόπος με τον οποίο μοιράζομαι τις γνώσεις και τις ιδέες μου με εσάς. Ήδη περίπου 700 ακόλουθοι. Με κάνει χαρούμενο. Ο σημερινός στόχος είναι η ροή σύνδεσης / αποσύνδεσης που μπορείτε να δείτε στο gif παρακάτω!

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

Εάν ο χρήστης είχε προηγουμένως εγγραφεί στην εφαρμογή, θα πρέπει να προσπαθήσει να συνδεθεί αυτόματα (1). Έτσι, ο χρήστης δεν χρειάζεται να κάνει τίποτα. Εάν είναι νέος χρήστης, η εφαρμογή πρέπει να αποδώσει τη φόρμα σύνδεσης / εγγραφής (2). Έτσι ο χρήστης μπορεί να δημιουργήσει έναν λογαριασμό. Τότε συνήθως θέλουμε να λάβουμε κάποια δεδομένα (3). Προετοιμάστε την εφαρμογή για χρήση. Και τέλος, μπορούμε να αποδώσουμε την ίδια την εφαρμογή (εξουσιοδοτημένο μέρος της εφαρμογής).

Χρησιμοποιήστε την πλοήγηση

Συνήθως χρησιμοποιώ την αντίδραση πλοήγησης ως βιβλιοθήκη πλοήγησης. Για μένα, κάθε βήμα χωρίζεται το ένα από το άλλο και γράφεται ως σελίδα / οθόνη. Έτσι, εάν έχω μεγαλύτερη ροή στο πλοίο, μπορώ να προσθέσω ή να αφαιρέσω το βήμα πολύ εύκολα. Παρακάτω, μπορείτε να δείτε τον κωδικό του ελεγκτή ροής σύνδεσης (το ονομάζουν Switch in react-navigation). Είναι πολύ απλή προσέγγιση πώς να αποδώσετε συγκεκριμένη σελίδα όταν άλλαξε η κατάσταση redux. Αυτός ο ελεγκτής είναι πάντα τοποθετημένος. Επομένως, εάν θέλουμε να αποσυνδεθούμε τον χρήστη, μπορούμε απλώς να ορίσουμε τη μεταβλητή loggedUser σε null στο redux store και αυτός ο ελεγκτής θα αποδώσει το LoginScreen. Εύκολο και καθαρό!

Έτσι, σε αυτό το στάδιο, έχουμε έναν καθαρό κώδικα και καθαρή πλοήγηση. Όμως ο χρήστης θα δει απλώς τρεμοπαίζοντας οθόνες (όπως στο gif παρακάτω). Στην πραγματικότητα δεν ξέρουμε πόσο καιρό θα είναι ορατές αυτές οι οθόνες. Μπορεί να είναι μόνο 100ms. Έτσι, κάθε 100ms React αποδίδει μια νέα οθόνη. Ο χρήστης μπορεί να μπερδευτεί εδώ. Ήθελα να το κάνω ομαλά και κατανοητό. Αποφάσισα να καλύψω όλες αυτές τις οθόνες με μία μόνο οθόνη με το λογότυπο της εφαρμογής.

Τρεμοπαίζει ροή σύνδεσης

Πώς γίνεται;

Είναι τόσο απλό που δεν χρειάζεται να δείξετε τον κωδικό. Υπάρχει μια μεταβλητή αποθήκευσης redux που αντιπροσωπεύει τη θέση Υ της οθόνης εξωφύλλου. Εάν η μεταβλητή έχει οριστεί σε 0, το στοιχείο καλύπτει πλήρως την εφαρμογή και εάν η μεταβλητή έχει οριστεί σε -window.height το στοιχείο είναι εκτός οθόνης - έτσι ο χρήστης μπορεί να δει την εφαρμογή. Εύκολο, σωστά;

Σημειώστε ότι χρησιμοποιούμε το useNativeDriver, ώστε η κινούμενη εικόνα να μην αποκλείει το νήμα JS!

Κινούμενα σχέδια αποσύνδεσης

Θα μπορούσε να υπάρχει κάποιος που μπερδεύεται από την έξοδο από τα κινούμενα σχέδια. Επειδή είπα ότι η οθόνη εξωφύλλου είναι εντελώς εκτός της περιοχής προβολής του κινητού. Αν λοιπόν κινούμε την οθόνη εξωφύλλου από εκεί θα μοιάζει με την παρακάτω εικόνα.

Η κεφαλίδα θα καλύπτεται από την οθόνη εξωφύλλου κατά τη διάρκεια της κινούμενης εικόνας (δεξί μέρος της εικόνας). Αυτό δεν είναι αυτό που θέλουμε να κάνουμε. Έτσι, πριν από το ίδιο το κινούμενο σχέδιο, αποδίδουμε ακριβώς την ίδια κεφαλίδα στο κάτω μέρος της οθόνης εξωφύλλου. Στη συνέχεια, πρέπει να μάθουμε πού βρίσκεται η κάτω θέση της κεφαλίδας (ύψος γραμμής κατάστασης + ύψος κεφαλίδας). Μόλις μάθουμε τη θέση, μπορούμε να χρησιμοποιήσουμε το setValue στο AnimatedValue και να θέσουμε αμέσως τη θέση του εξωφύλλου (χωρίς κινούμενα σχέδια - δεξί μέρος της παρακάτω εικόνας). Μετά από αυτό, μπορούμε να κινούμε την οθόνη εξωφύλλου προς τα κάτω ως συνήθως.

Η αποσύνδεση βρίσκεται σε εξέλιξη

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

Είναι απλή κίνηση αδιαφάνειας με κάποια περιστροφή στο σωστό εικονίδιο ρυθμίσεων. Το πιο ενδιαφέρον είναι το κείμενο. Κάποιος θα μπορούσε να πιστεύει ότι γίνεται από το setTimeout ή από κάτι παρόμοιο. Δεν είναι. Ακούμε πραγματικά την πρόοδο της αξίας αδιαφάνειας. Για παράδειγμα, εάν η αδιαφάνεια είναι στη μέση (τιμή 0,5) ο κώδικας θα μοιάζει με αυτό.

Είναι μια καλή προσέγγιση πώς να το κάνουμε αυτό γιατί μπορούμε να χρησιμοποιήσουμε όλα τα πλεονεκτήματα της κλάσης Animated. Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε μια διαφορετική χαλάρωση. Άρα δεν θα είναι γραμμικό. Ένα άλλο μπόνους εδώ είναι ότι θα τελειώσει την ίδια στιγμή με το κινούμενο σχέδιο αδιαφάνειας.

Σημειώστε ότι δεν πρέπει να κάνουμε τίποτα κατά τη διάρκεια της κινούμενης εικόνας, επειδή γίνεται από το νήμα JS. Έτσι, πιθανότατα θέλουμε να χρησιμοποιήσουμε το InteractionManager εδώ.

Δείτε το στον Ανανά

Ήθελα να χτίσω παιδική χαρά για τα κινούμενα σχέδια και αυτά τα άρθρα. Αποφάσισα λοιπόν να δημιουργήσω τον Ανανά - Οικονομικό Διευθυντή. Κατά τη διάρκεια μόνο 22 ημερών, έχω κάνει την έκδοση iOS, την έκδοση Android, την παρουσίαση ιστότοπου και έγραψα έναν τρόπο με τον οποίο δημιούργησα κερδοφόρα εφαρμογή πιο γρήγορα από ό, τι βρήκα νέα εργασία! γι 'αυτό. Δεν μπορώ να πω πόσο μου αρέσει αυτή τη φορά. Πρέπει επίσης να το δοκιμάσετε! Εάν θέλετε να υποστηρίξετε αυτά τα άρθρα (και εγώ) μπορείτε να αγοράσετε τον Ανανά. Μόνο 2,99 $ ετησίως. Τίποτα για σένα. Μεγάλο κίνητρο για μένα;)