Article original : How to build a flip timer in React Native
Par Pritish Vaidya
Introduction
Un minuteur à bascule est un dispositif numérique de mesure du temps où le temps est indiqué par des nombres qui sont révélés séquentiellement par un affichage à volets divisés.
Cet article démontrera la création d'un minuteur à bascule dans React Native en utilisant ses APIs exposées et sans dépendances supplémentaires.
Défis à surmonter
- Implémenter la propriété
transform-originen utilisant vos techniques de matrices de votre cours de mathématiques universitaires puisque elle n'est pas supportée dans React Native. La rotation autour de l'origine centrée (par défaut) est facile, mais nous devons translater l'origine et faire une rotation autour des bords. - Implémentation du composant Flip Number.
- Surmonter le problème
overflow: hiddensur Android puisqu'il ne fonctionne pas avec les éléments positionnés en absolu.
Contenu
- Implémenter le composant Flip Number
Implémenter FoldView
Disposition de base
- Surmonter le défi
- Ajouter les transformations
Ajouter les animations
Mettre à jour le composant Timer
Résultat final
Liens
Implémenter le composant Flip Number
Disposition de base
La disposition de base se compose de deux cartes — supérieure et inférieure — jointes ensemble de sorte que la vue ressemble à un minuteur à bascule.
Carte de nombre
Il s'agit d'une disposition de base composée d'un wrapper et de deux cartes — inférieure, supérieure.
Note : La carte inférieure a le nombre précédent ajouté. Son utilité sera révélée une fois que nous atteindrons l'implémentation de FoldView.
Carte
Le wrapper de la carte a overflow: hidden, et nous traduisons ses éléments (nombre) en fonction du type de la carte (supérieure ou inférieure).
Implémenter FoldView
Disposition de base
Pour construire FoldView, nous avons besoin de deux FlipCards similaires aux NumberCards mais avec un positionnement absolu afin qu'elles soient au-dessus des NumberCards lorsque les animations de bascule sont appliquées.
Carte de nombre
Ajout du composant FlipCard au composant NumberCard.
Flip Card
Le composant FlipCard est un wrapper animé avec un positionnement absolu utilisé lors de l'application de l'animation de bascule.
Défi (Partie 2 et Partie 3) : overflow: hidden avec un positionnement absolu pose des problèmes majeurs sur Android. En utilisant ce post StackOverflow, il peut être résolu en utilisant un conteneur de débordement à l'intérieur de l'élément positionné en absolu.
Résultat final
Surmonter le défi
Maintenant vient la partie difficile. Nous devons plier le composant FlipCard le long des bords.
Puisque React Native ne supporte pas la propriété transform-origin, nous devons trouver un autre moyen de déplacer l'origine de la rotation sur le bord inférieur.
Heureusement, il existe un moyen de surmonter ce problème. Selon cet article génial article et en lisant la documentation MDN pour la propriété transform-origin, elle peut être implémentée en utilisant des matrices.
Utils
React Native expose plusieurs opérations de matrice dans MatrixMath.js. Les plus importantes dont nous avons besoin sont
- Matrice identité : Elle retourne une matrice identité 4 * 4
[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
- Multiplier les matrices : Cette méthode utilitaire génère une sortie basée sur la multiplication des matrices 4*4
aetbfournies en entrée.
- Matrice de rotation : Il s'agit d'une méthode utilitaire personnalisée qui prendra une matrice 4*4 et le degré auquel elle sera tournée, puis la multipliera à la matrice originale pour retourner le résultat généré.
- Matrice de perspective : Cette méthode utilitaire nous permettra d'utiliser le style de perspective dans React Native et de le multiplier à la matrice originale 4*4.
- Matrice de translation : Cette méthode utilitaire traduira l'origine et modifiera la matrice originale 4*4
- Matrice de non-translation : Cette méthode utilitaire annulera la translation de l'origine et modifiera la matrice originale 4*4
Ajouter les transformations
deg est le degré à tourner et y est la hauteur du composant auquel il sera traduit.
Défi (Partie 1) : En combinant les utils ci-dessus, transform-origin est implémenté avec succès.
Ajouter les animations
Mettre à jour le composant Timer
Ajouter Time Util
Cet utilitaire incrémentera le minuteur d'une seconde et ajustera les heures, les minutes et les secondes.
Composant Timer
Le composant timer appellera Time Util et mettra à jour le composant en fonction des heures, des minutes et des secondes.
Composant Flip Number
Ce composant divise simplement le nombre en deux parties en fonction de leur placement de chiffre et appelle le composant NumberCard.
Résultat final
Liens
J'ai publié un package pour cela qui contient plus de propriétés personnalisables.
- npm : react-native-flip-timer
- GitHub : react-native-flip-timer
D'autres choses intéressantes peuvent être trouvées sur mes profils StackOverflow et GitHub.
Suivez-moi sur LinkedIn, Medium, Twitter pour des mises à jour et de nouveaux articles.
Un applaudissement, deux applaudissements, trois applaudissements, quarante ?
Publié à l'origine sur blog.pritishvaidya.com le 2 mars 2019.