Flux de connexion animé

Ce blog est un moyen de partager mes connaissances et mes idées avec vous. Déjà près de 700 followers. Me rend heureux. L'objectif d'aujourd'hui est le flux de connexion / déconnexion que vous pouvez voir sur le gif ci-dessous!

Lorsque je construisais une application, il était toujours difficile de gérer le flux de connexion. Du point de vue de la navigation, du point de vue de l'utilisateur, du point de vue du code propre.

Si l'utilisateur s'est déjà inscrit à l'application, il devrait essayer de se connecter automatiquement (1). L'utilisateur n'a donc rien à faire. S'il s'agit d'un nouvel utilisateur, l'application doit afficher le formulaire de connexion / inscription (2). Ainsi, l'utilisateur peut créer un compte. Ensuite, nous voulons généralement obtenir des données (3). Préparez l'application à utiliser. Et enfin, nous pouvons rendre l'application elle-même (partie autorisée de l'application).

Utiliser la navigation

J'utilise habituellement react-navigation comme bibliothèque de navigation. Pour moi, chaque étape est séparée les unes des autres et écrite sous forme de page / écran. Donc, si j'ai un flux embarqué plus important, je peux ajouter ou supprimer l'étape très facilement. Ci-dessous, vous pouvez voir le code du contrôleur de flux de connexion (ils l'appellent Switch dans react-navigation). Il s'agit d'une approche très simple pour rendre une page particulière lorsque l'état de redux a été modifié. Ce contrôleur est toujours monté. Donc, si nous voulons déconnecter l'utilisateur, nous pouvons simplement définir la variable logUser sur null dans le magasin redux et ce contrôleur affichera LoginScreen. Facile et propre!

Donc, à ce stade, nous avons un code propre et une navigation propre. Mais l'utilisateur ne verra que des écrans vacillants (comme sur le gif ci-dessous). En fait, nous ne savons pas combien de temps ces écrans seront visibles. Cela peut être seulement 100 ms. Ainsi, chaque 100 ms React affiche un nouvel écran. L'utilisateur pourrait être confus ici. Je voulais le faire en douceur et compréhensible. J'ai décidé de couvrir tous ces écrans par un seul écran avec le logo de l'application.

Flux de connexion vacillant

Comment est-il fait?

C'est si simple qu'il n'est pas nécessaire d'afficher le code. Il existe une variable de stockage redux qui représente la position Y de l'écran de couverture. Si la variable est définie sur 0, le composant couvre complètement l'application et si la variable est définie sur -window.height, le composant est hors de l'écran - afin que l'utilisateur puisse voir l'application. Facile, non?

Notez que nous utilisons useNativeDriver afin que l'animation ne bloque pas le thread JS!

Animation de déconnexion

Il peut y avoir quelqu'un qui est confus par l'animation de déconnexion. Parce que j'ai dit que l'écran de couverture était complètement hors de la zone visible du mobile. Donc, si nous animions l'écran de couverture à partir de là, cela ressemblerait à l'image ci-dessous.

L'en-tête serait couvert par l'écran de couverture pendant l'animation (partie droite de l'image). Ce n'est pas ce que nous voulons faire. Donc, avant l'animation elle-même, nous rendons exactement le même en-tête au bas de l'écran de couverture. Ensuite, nous devons savoir où se trouve la position inférieure de l'en-tête (hauteur de la barre d'état + hauteur de l'en-tête). Une fois que nous connaissons la position, nous pouvons utiliser setValue sur AnimatedValue et définir la position de l'écran de couverture immédiatement (sans animation - partie droite de l'image ci-dessous). Après cela, nous pouvons animer l'écran de couverture comme d'habitude.

La déconnexion est en cours

La dernière animation dont nous allons parler est de savoir comment clarifier la progression du processus de déconnexion. J'ai décidé d'utiliser cette animation car il semble qu'elle oublie réellement l'utilisateur (il est en train de disparaître).

Il s'agit d'une animation d'opacité simple avec une rotation sur l'icône des paramètres de droite. Le plus intéressant est le texte. Quelqu'un pourrait penser que c'est fait par setTimeout ou par quelque chose de similaire. Ce n'est pas le cas. Nous écoutons réellement la progression de la valeur d'opacité. Par exemple, si l'opacité est au milieu (valeur 0,5), le code ressemblera à ceci.

C'est une bonne approche, car nous pouvons utiliser tous les avantages de la classe animée. Par exemple, nous pouvons utiliser un assouplissement différent. Ce ne sera donc pas linéaire. Un autre bonus ici est qu'il se terminera en même temps que l'animation d'opacité.

Notez que nous ne devons rien faire pendant l'animation, car cela se fait par le fil JS. Nous voulons donc probablement utiliser InteractionManager ici.

Découvrez-le dans l'ananas

Je voulais construire une sorte de terrain de jeu pour mes animations et ces articles. J'ai donc décidé de construire Pineapple - Financial Manager. Pendant seulement 22 jours, j'ai fait la version iOS, la version Android, la présentation du site Web et écrit une application rentable plus rapidement que trouvé un nouvel emploi! à propos de ça. Je ne peux pas dire combien j'aime cette fois. Vous devriez également l'essayer! Si vous souhaitez soutenir ces articles (et moi), vous pouvez acheter l'ananas. Juste 2,99 $ par an. Rien pour toi. Grande motivation pour moi;)