Tout ce que vous devez savoir sur Flip Animations dans React

Après la dernière mise à jour de Safari, l'API d'animation Web (WAAPI) est désormais prise en charge sans drapeaux dans tous les navigateurs modernes (sauf IE). Voici un exemple pratique où vous pouvez vérifier les fonctionnalités de votre navigateur. Waapi est un excellent moyen d'exécuter des animations (doit être exécutée en JavaScript) car elle appartient à une API native - ce qui signifie qu'elle fonctionne sans bibliothèques supplémentaires. Si vous ne connaissez pas du tout Waapi, voici une très bonne introduction à l'introduction fournie par Dan Wilson.

FLIP est l'une des méthodes d'animation les plus efficaces. Flip nécessite un code JavaScript pour s'exécuter.

Jetons un coup d'œil à l'intersection à l'aide de waapi, flip et l'intégration dans React. Mais nous commençons sans réagir d'abord, puis la transition vers réagir.

Flip et waapi

Waapi facilite l'animation Flip!

Flip Quick Review: L'idée principale est d'abord de placer l'élément où vous voulez qu'il se termine. Ensuite, appliquez la transformation pour le déplacer à la position de départ. Puis annulez ces conversions.

La conversion d'animation est très efficace, donc Flip est très efficace. Avant Waapi, nous devons manipuler directement le style de l'élément pour définir la conversion et attendre que le cadre suivant l'annule / l'inverse:

 // Flip avant Waapi
el.style.transform = `traduction (200px)`;

requestanimationframe (() => {
  el.style.transform = '';
});

De nombreuses bibliothèques sont construites sur cette approche. Cependant, il y a plusieurs problèmes à ce sujet:

• Tout ressemblait à un énorme hack.
• Inverser les animations Flip est extrêmement difficile. Bien que la conversion CSS soit inversée "libre" une fois la classe supprimée, ce n'est pas le cas ici. Le démarrage d'un nouveau flip pendant l'animation précédente entraînera un échec. L'inversion nécessite que la matrice de transformation soit analysée à l'aide de GetComputedStyles et l'a utilisée pour calculer la taille actuelle avant de configurer une nouvelle animation.
• L'animation avancée est presque impossible. Par exemple, pour éviter la déformation de l'enfant du parent à l'échelle, nous devons accéder à la valeur à l'échelle actuelle à chaque trame. Cela ne peut être fait qu'en analysant la matrice de transformation.
• Il y a beaucoup de choses à faire attention dans le navigateur. Par exemple, parfois pour exécuter une animation FLIP parfaitement dans Firefox, vous devez appeler la crise de demandes à deux reprises:

 requestanimationframe (() => {
  requestanimationframe (() => {
    el.style.transform = '';
  });
});

Nous ne rencontrons pas ces problèmes lors de l'utilisation de waapi. La fonction inverse peut être facilement inversée. La mise à l'échelle inverse des enfants est également possible. Lorsque des erreurs se produisent, il est facile de découvrir le coupable, car nous n'utilisons que des fonctions simples telles que l'animation et l'inverse au lieu de peigner à travers diverses choses comme la méthode de requête Animation.

Voici un résumé de la version waapi:

 el.classList.toggle ('Someclass');
Const Keyframes = / * Calculer la différence de taille / position * /;
El.Animate (Keysframes, 2000);

Flip et réagir

Pour comprendre comment les animations Flip fonctionnent dans React, il est important de savoir comment et surtout pourquoi ils fonctionnent en JavaScript pur. Rappelez-vous la composition de l'animation Flip:

Tout le contenu avec un fond violet doit se produire avant l'étape "dessiner" du rendu. Sinon, nous verrons le nouveau style clignoter brièvement, ce qui n'est pas bon. Dans React, la situation devient légèrement plus compliquée, car toutes les mises à jour DOM sont effectuées par nous.

La magie de l'animation Flip est que les éléments sont convertis avant que le navigateur ait la possibilité de dessiner. Alors, comment connaissons-nous le moment "avant de dessiner" dans React?

Jetons un coup d'œil au crochet useLayoutEffect . Si vous voulez savoir ce que c'est… c'est tout! Tout ce que nous passons dans ce rappel se produira de manière synchrone après la mise à jour DOM mais avant le dessin . En d'autres termes, c'est un endroit idéal pour installer Flip!

Faisons quelque chose que la technologie Flip est très bonne dans les positions animées DOM. Si nous voulons animer la façon dont les éléments passent d'une position DOM à une autre, il n'y a rien que CSS puisse faire. (Imaginez terminer une tâche dans la liste de tâches et le déplacer vers la liste des tâches terminées, tout comme vous cliquez sur le projet dans l'exemple ci-dessous.)

Regardons l'exemple le plus simple. Cliquez sur l'un des deux blocs dans l'exemple suivant les amène à échanger des positions. Sans flip, cela arrive immédiatement.

Il y a beaucoup à faire. Remarquez comment tout le travail se passe dans le rappel de Hook Lifecycle: useEffect et useLayoutEffect . Ce qui le rend un peu déroutant, c'est que la chronologie de notre animation de flip n'est pas évidente du code lui-même, comme cela se produit dans deux rendus React. Ce qui suit est la composition de React Flip Animation pour afficher différentes séquences d'opération:

Bien que useEffect fonctionne toujours après useLayoutEffect et après les dessins du navigateur, il est important que nous mettions en cache la position et la taille des éléments après le premier rendu. Nous n'avons pas la possibilité de le faire dans le deuxième rendu car useLayoutEffect s'exécute après toutes les mises à jour DOM. Mais ce processus est fondamentalement le même que l'animation de flip ordinaire.

Choses à noter

Comme la plupart des choses, il y a certaines choses à considérer lors de l'utilisation de Flip in React.

Restez à moins de 100 millisecondes

L'animation de retournement est un calcul. Le calcul prend du temps et vous devez faire pas mal de travail avant de pouvoir afficher une conversion de 60 images par seconde fluide. Si le retard est inférieur à 100 millisecondes, les gens ne remarqueront pas le retard, alors assurez-vous que tout est inférieur à cette valeur. L'onglet Performance dans Devtools est un excellent endroit pour vérifier ce contenu.

Rendu inutile

Nous ne pouvons pas utiliser useState pour mettre en cache, les objets de taille, de position et d'animation, car chaque setState provoquera un rendu inutile et ralentira l'application. Dans le pire des cas, cela peut même entraîner des erreurs. Essayez d'utiliser à la place useRef et le traitez comme un objet qui peut être modifié sans rien rendre.

Shaking de disposition

Évitez le déclenchement répété de la disposition du navigateur. Dans le contexte de l'animation de flip, cela signifie éviter de boucler à travers des éléments et lire leurs emplacements avec getBoundingClientRect , puis les animate immédiatement. Lot "lire" et "écrire" autant que possible. Cela permettra des animations extrêmement lisses.

Animation annulée

Essayez de cliquer au hasard sur les carrés dans la démo précédente au fur et à mesure qu'ils bougent, et cliquez à nouveau après leur arrêt. Vous verrez la faute. Dans la vraie vie, les utilisateurs interagissent avec les éléments au fur et à mesure qu'ils se déplacent, il vaut donc la peine de s'assurer qu'ils sont annulés en douceur, en pause et mis à jour.

Cependant, toutes les animations ne peuvent pas être inversées en utilisant reverse . Parfois, nous voulons qu'ils s'arrêtent, puis passent à une nouvelle position (par exemple, lorsque la liste des éléments est perturbée au hasard). Dans ce cas, nous avons besoin:

• Obtenez la taille / position de l'élément déplacé
• Terminez l'animation actuelle
• Calculer de nouvelles dimensions et différences de position
• Démarrer une nouvelle animation

Dans React, c'est plus difficile qu'il n'y paraît. J'ai perdu beaucoup de temps à travailler sur ce problème. L'objet d'animation actuel doit être mis en cache. Un bon moyen est de créer une carte pour obtenir l'animation par ID. Ensuite, nous devons obtenir la taille et la position de l'élément déplacé. Il y a deux façons de le faire:

1. Utilisation de composants de fonction: il suffit de faire une boucle à travers chaque élément d'animation dans le corps de la fonction et de mettre en cache la position actuelle.
2. Utilisez des composants de classe: utilisez getSnapshotBeforeUpdate Lifecycle Method.

En fait, la documentation officielle React recommande d'utiliser getSnapshotBeforeUpdate , "car il peut y avoir un retard entre le cycle de vie de la phase de rendu (comme render ) et le cycle de vie de la phase de validation (comme getSnapshotBeforeUpdate et componentDidUpdate ). Cependant, il n'y a actuellement aucun compteur de crochets pour cette méthode. J'ai constaté que l'utilisation du corps de la composante de fonction n'est pas suffisante.

Ne luttez pas contre le navigateur

Je l'ai déjà dit, mais évitez de faire face au navigateur et essayez de faire bouger les choses sur le chemin. Si nous devons animer des changements de taille simple, alors examinez si CSS est suffisant (par exemple, transform: scale() ). J'ai trouvé que Flip Animation est préférable pour l'endroit où les navigateurs ne peuvent vraiment pas aider:

• Changement de position DOM animé (comme décrit ci-dessus)
• Animation de mise en page partagée

Le second est une version plus complexe du premier. Il y a deux éléments DOM qui agissent comme un tout et changent sa position (et l'autre est désinstallé / caché). Cette astuce peut réaliser des animations sympas. Par exemple, cette animation est faite avec une bibliothèque que j'ai construite appelée React-Easy-Flip qui utilise cette méthode:

Bibliothèque

Il existe de nombreuses bibliothèques qui peuvent rendre les animations FLIP dans React plus facile et abstraite du code de bailli. Les bibliothèques actuellement activement maintenues comprennent: react-flip-toolkit et ma bibliothèque react-easy-flip .

Si cela ne vous dérange pas quelque chose de plus lourd mais capable d'une animation plus générale, consultez framer-motion . Il permet également des animations de mise en page partagées cool! Il y a une vidéo qui explore la bibliothèque en profondeur.

Ressources et références

• L'animation de Josh W. Comeau n'a pas été animée
• Construire une extension haute performance et des animations de pliage de Paul Lewis et Stephen McGruer
• "Magic Motion Inside" par Matt Perry
• @KeyFramers Tweet "Utilisation de variables CSS animées de JavaScript"
• La "liste interne des navigateurs Web modernes de Mariko Kosaka (partie 3)" "
• L'animation d'interface utilisateur simple de construction d'Alex Holachek dans la réaction
• "L'animation de dispositions avec la technologie FLIP" de David Khureshid "
• "Animation courante de Kirill Vasiltsov avec des crochets React"
• "Utiliser React Hooks de Jayant Bhawal pour la conversion d'éléments partagés"

Cette sortie révisée maintient le format et le placement d'image d'origine tout en paraphrasant le texte pour créer un contenu unique. Il aborde également certains problèmes grammaticaux et stylistiques mineurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!