Πώς να δημιουργήσετε ένα χρονόμετρο flip στο React Native

Φωτογραφία από τον Vico Luna στο Unsplash

Εισαγωγή

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

Αυτό το άρθρο θα δείξει την κατασκευή ενός Flip Timer στο React Native χρησιμοποιώντας τα εκτεθειμένα API του και χωρίς πρόσθετες εξαρτήσεις.

Προκλήσεις που πρέπει να ξεπεραστούν

  • Εφαρμόστε την ιδιότητα προέλευσης μετασχηματισμού χρησιμοποιώντας τις τεχνικές πινάκων μαθηματικών μαθημάτων του κολλεγίου Math αφού δεν υποστηρίζονται στο React Native. Η περιστροφή γύρω από την κεντρική προέλευση (από προεπιλογή) είναι εύκολη, αλλά πρέπει να μεταφράσουμε την προέλευση και να περιστρέψουμε γύρω από τις άκρες.
  • Εφαρμογή του στοιχείου Flip Number.
  • Ξεπεραστεί η υπερχείλιση: κρυφό ζήτημα στο Android, καθώς δεν λειτουργεί με απόλυτα τοποθετημένα στοιχεία.

Περιεχόμενα

  1. Εφαρμογή του στοιχείου αριθμού αναστροφής
  2. Εφαρμογή FoldView
  • Βασική διάταξη
  • Ξεπερνώντας την πρόκληση
  • Προσθήκη των μετασχηματισμών
  • Προσθήκη των κινούμενων εικόνων

3. Ενημερώστε το στοιχείο χρονοδιακόπτη

4. Τελικό αποτέλεσμα

5. Σύνδεσμοι

Εφαρμογή του στοιχείου αριθμού αναστροφής

Βασική διάταξη

Η βασική διάταξη αποτελείται από δύο κάρτες - το πάνω και το κάτω μέρος συνδέονται μεταξύ τους έτσι ώστε η θέα να μοιάζει με ένα Flip Timer.

Κάρτα αριθμών

Πρόκειται για μια βασική διάταξη που αποτελείται από ένα περιτύλιγμα και δύο κάρτες - κάτω, πάνω.

Σημείωση: Η Κάτω Κάρτα έχει τον προηγούμενο αριθμό που προστέθηκε σε αυτήν. Η χρήση του θα αποκαλυφθεί μόλις φτάσουμε στην εφαρμογή FoldView.

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Κάρτα

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

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Εφαρμογή FoldView

Βασική διάταξη

Για την κατασκευή του FoldView χρειαζόμαστε δύο FlipCards παρόμοια με τα NumberCards αλλά με απόλυτη τοποθέτηση ώστε να είναι πάνω από τα NumberCards όταν εφαρμόζονται animations flip.

Κάρτα αριθμών

Προσθήκη του στοιχείου FlipCard στο στοιχείο NumberCard.

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Flip Card

Το στοιχείο FlipCard είναι ένα κινούμενο περιτύλιγμα με απόλυτη τοποθέτηση που χρησιμοποιείται κατά την εφαρμογή animation flip.

Πρόκληση (Μέρος 2 και Μέρος 3): υπερχείλιση: κρυμμένη με απόλυτη τοποθέτηση έχει σημαντικά ζητήματα στο android. Χρησιμοποιώντας αυτή τη θέση StackOverflow, μπορεί να λυθεί χρησιμοποιώντας ένα δοχείο υπερχείλισης μέσα στο στοιχείο απόλυτης τοποθέτησης.

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Τελικό αποτέλεσμα

Ξεπερνώντας την πρόκληση

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

Εφόσον το React Native δεν υποστηρίζει την ιδιότητα προέλευσης μετασχηματισμού, πρέπει να βρούμε κάποιο άλλο τρόπο για να μετακινήσουμε την αρχή της περιστροφής στο κάτω άκρο.

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

Utils

Το React Native εκθέτει αρκετές πράξεις μήτρας στο MatrixMath.js. Τα σημαντικά που απαιτούμε είναι

  • Matrix ταυτότητας: Επιστρέφει έναν πίνακα ταυτότητας 4 * 4 [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub
  • Multiply Matrix: Αυτή η μέθοδος χρησιμότητας παράγει έξοδο με βάση τον πολλαπλασιασμό των 4 * 4 μητρών a και b που παρέχονται ως είσοδος.
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub
  • Περιστροφή μήτρας: Είναι μια προσαρμοσμένη μέθοδος χρησιμότητας που θα λάβει ένα 4 * 4 πλέγμα και το βαθμό στον οποίο θα περιστραφεί για να πολλαπλασιάσει στη συνέχεια στον αρχικό πίνακα για να επιστρέψει το παραγόμενο αποτέλεσμα.
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub
  • Perspective Matrix: Αυτή η μέθοδος χρησιμότητας θα μας επιτρέψει να χρησιμοποιήσουμε το στυλ προοπτικής για να αντιδράσουμε στη Native και μετά να πολλαπλασιάσουμε την αρχική μήτρα 4 * 4.
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub
  • Μετάφραση μήτρας: Αυτή η μέθοδος χρησιμότητας θα μεταφράσει την προέλευση και θα τροποποιήσει την αρχική μήτρα 4 * 4
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub
  • Un-Translate Matrix: Αυτή η μέθοδος χρησιμότητας θα μεταφράσει την προέλευση και θα τροποποιήσει την αρχική μήτρα 4 * 4
Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Προσθήκη των μετασχηματισμών

deg είναι ο βαθμός περιστροφής και y είναι το ύψος του στοιχείου στο οποίο θα μεταφραστεί.

Πρόκληση (Μέρος 1): Συνδυάζοντας τα βοηθήματα από τα παραπάνω, η μετασχηματισμός-προέλευση υλοποιείται με επιτυχία.

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Προσθήκη των κινούμενων εικόνων

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Ενημερώστε το στοιχείο χρονοδιακόπτη

Προσθέστε χρόνο χρήσης

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

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Συστατικό χρονοδιακόπτη

Το στοιχείο χρονοδιακόπτη θα καλέσει το Time Util και θα ενημερώσει το στοιχείο βάσει ωρών, λεπτών, δευτερολέπτων

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Αναστροφή τμήματος αριθμού

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

Πιστωτική εικόνα: άνθρακας. | Κωδικός: GitHub

Τελικό αποτέλεσμα

Συνδέσεις

Έχω δημοσιεύσει ένα πακέτο για αυτό που περιέχει περισσότερες προσαρμόσιμες ιδιότητες.

  • npm: αντιδραστικός-μητρική-flip-timer
  • GitHub: αντιδραστική-μητρική-flip-χρονοδιακόπτη

Περισσότερα από τα δροσερά πράγματα μπορούν να βρεθούν στα προφίλ μου StackOverflow και GitHub.

Παρακολουθήστε με στο LinkedIn, Medium, Twitter για περαιτέρω ενημέρωση νέων άρθρων.

Ένα χειροκρότημα, δύο χτυπήματα, τρία χτυπήματα, σαράντα;

Αρχικά δημοσιεύθηκε στο blog.pritishvaidya.com στις 2 Μαρτίου 2019.