Donner un sens à la react-ressort

La mise en œuvre de l'animation React a toujours été un point difficile dans le développement. Cet article introduira React-Spring d'une manière facile à comprendre et explorera certains cas d'application pratiques. Bien que React-Spring ne soit pas la seule bibliothèque d'animation de React, c'est l'une des bibliothèques les plus populaires et les plus puissantes.

Cet article utilisera la dernière version 9.x (version de la version candidate au moment de la rédaction). S'il n'a pas été officiellement publié au moment de la lecture de cet article, veuillez utiliser react-spring@next pour l'installer. Selon mon expérience et le mainteneur principal, le code est très stable. Le seul problème que j'ai eu est une petite erreur lorsqu'elle est utilisée avec le mode de concurrence, qui peut être suivie dans un référentiel GitHub.

React-Spring Look rapide

Avant de vous plonger dans les cas d'application pratiques, examinons rapidement les ressorts, les animations élevées et les animations de transition. Une démonstration coulable sera fournie à la fin de cette section, il n'est donc pas nécessaire de s'inquiéter de la confusion que vous pourriez rencontrer pendant le processus.

ressorts

Considérons le "Hello World" classique de l'animation: la décoloration dans et hors du contenu. Arrêtons-nous et réfléchissons à la façon de changer pour afficher et nous cacher sans aucune animation. Cela ressemble à ceci:

 Exporter la fonction par défaut App () {
  const [afficher, setShowing] = useState (false);
  Retour (
    <div>
      <div style="{{" opacity: showing :>
        Ce contenu disparaîtra et disparaîtra
      </div>
      <button onclick="{()"> SetShowing (val =>! Val)}> basculer</button>
      <hr>
    </div>
  ));
}

Simple, mais ennuyeux. Comment animer les changements d'opacité? Ne serait-il pas bien si nous pouvions définir de manière déclarative l'opacité souhaitée en fonction de l'état, comme ci-dessus, mais que ces valeurs soient en douceur? C'est ce que fait React-Spring. React-Spring peut être considéré comme notre intermédiaire, qui gère nos valeurs de style en constante évolution, entraînant une transition en douceur entre les valeurs d'animation que nous voulons. Comme ça:

 const [showa, setshowa] = useState (false);

const fadestyles = usingpring ({
  config: {... config.stiff},
  de: {opacité: 0},
  à: {
    Opacité: Showa? 1: 0
  }
});

Nous utilisons from pour spécifier la valeur de style initiale et spécifions la valeur actuelle dans to section en fonction de l'état actuel. La valeur de retour fadeStyles contient la valeur de style réelle que nous appliquons au contenu. Nous avons juste besoin de faire la dernière chose ...

Vous pourriez penser que vous pourriez faire ceci:

<div style="{fadeStyles}">
  ...
</div>

Mais cela ne fonctionne pas. Nous ne pouvons pas utiliser div normaux, mais nous devons utiliser div React-Spring créés à partir d'exportation animated . Cela peut sembler déroutant, mais cela signifie simplement:

<animated.div style="{fadeStyles}">
  ...
</animated.div>

C'est ça.

Très animé

Selon ce que nous animons, nous voulons peut-être que le contenu glisse de haut en bas, de la hauteur zéro à sa taille réelle afin que le contenu environnant s'adapte et se jette en place en place. Vous pourriez souhaiter que nous puissions simplement copier le code ci-dessus, la hauteur passe de zéro à l'auto, mais malheureusement, vous ne pouvez pas l'animer à la hauteur automatique. Cela fonctionne à la fois dans le CSS normal et la react-spring. Au lieu de cela, nous devons connaître la hauteur réelle du contenu et le spécifier dans to Spring.

Nous devons obtenir dynamiquement la hauteur de tout contenu afin de passer sa valeur à React-Spring. Il s'avère que la plate-forme Web a conçu quelque chose spécifiquement pour cela: ResizeObserver . Et son soutien est en fait assez bon! Puisque nous utilisons React, nous allons bien sûr envelopper l'utilisation dans un crochet. Mon crochet ressemble à ceci:

 Fonction d'exportation useyight ({on = true / * Aucune valeur signifie sur * /} = {} comme n'importe quel) {
  const ref = useref<any> ();
  const [hauteur, set] = useState (0);
  const heightref = useref (hauteur);
  const [ro] = useState (
    () =>
      Nouveau ResizeObserver (paquet => {
        if (ref.current && heightref.current! == ref.current.offsetheight) {
          heightref.current = ref.current.offseight;
          set (ref.current.offsetheight);
        }
      })
  ));
  uselayOutEffEct (() => {
    if (on && ref.current) {
      set (ref.current.offsetheight);
      ro.observe (ref.current, {});
    }
    return () => ro.disconnect ();
  }, [on, ref.current]);
  retour [réf, hauteur comme n'importe quel];
}</any>

Nous pouvons choisir de fournir une valeur on pour basculer l'activation et la désactivation de la fonction de mesure (cela sera utile plus tard). Quand on est vrai, nous disons ResizeObserver d'observer notre contenu. Nous renvoyons une arbitre qui doit être appliquée à tout ce que nous voulons mesurer, ainsi qu'à la hauteur actuelle.

Voyons comment cela fonctionne réellement.

 const [heightref, hauteur] = useheight ();
const SlideInstyles = usingPring ({{
  config: {... config.stiff},
  De: {opacité: 0, hauteur: 0},
  à: {
    OPACITY: showb? 1: 0,
    Hauteur: showb? hauteur: 0
  }
});

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    Ce contenu disparaîtra et disparaîtra avec le glissement
  </div>
</animated.div>

useHeight nous donne la valeur de hauteur de la référence pour mesurer et le contenu que nous le transmettons à notre printemps. Ensuite, nous appliquons REF et appliquons le style de hauteur.

Oh, n'oubliez pas d'ajouter overflow: hidden dans le conteneur. Cela nous permet d'inclure correctement les valeurs de hauteur que nous avons ajustées.

Transition d'animation

Enfin, voyons comment ajouter des éléments animés au DOM et supprimer les éléments animés du DOM. Nous savons déjà comment animer un projet existant et conserver les modifications de valeur des éléments dans le DOM, mais pour animer l'ajout ou la suppression des éléments, nous avons besoin d'un nouveau crochet: useTransition .

Si vous avez déjà utilisé React-Spring, c'est l'un des rares endroits où la version 9.x a des changements importants dans son API. Jetons un coup d'œil.

Pour animation, la liste des projets, comme ceci:

 const [list, setList] = UseState ([]);

Nous déclarerons notre fonction de transformation comme suit:

 const listTransitions = usetransition (list, {{
  config: config.gentle,
  De: {opacité: 0, transform: "tradlate3d (-25%, 0px, 0px)"},
  Entrée: {opacité: 1, transform: "tradlate3d (0%, 0px, 0px)"},
  quitter: {opacité: 0, hauteur: 0, transform: "tradlate3d (25%, 0px, 0px)"},
  touches: list.map ((item, index) => index)
});

Comme je l'ai mentionné plus tôt, la valeur de retour listTransitions est une fonction. React-Spring suit le tableau de liste, suivant les éléments qui ont été ajoutés et supprimés. Nous appelons la fonction listTransitions , fournissant une fonction de rappel qui accepte un objet de style unique et un élément unique, React-Spring l'appellera pour chaque élément de la liste en fonction de la question de savoir si l'élément est nouvellement ajouté, nouvellement supprimé ou simplement situé dans la liste, et utilisons le bon style.

Remarque la section Keys: Cela nous permet de raconter React-Spring comment reconnaître les objets dans la liste. Dans ce cas, j'ai décidé de dire react-spring l'indice de l'élément dans le tableau pour définir l'élément de manière unique. Normalement, c'est une mauvaise idée, mais maintenant, cela nous permet de voir comment la fonctionnalité fonctionne réellement. Dans la démonstration suivante, le bouton Ajouter le projet ajoute l'élément à la fin de la liste lors du clic, et le bouton Supprimer le dernier projet supprime l'élément le plus récemment ajouté de la liste. Donc, si vous tapez la zone d'entrée et cliquez rapidement sur le bouton Ajouter, puis cliquez sur le bouton Supprimer, vous verrez le même élément commence en douceur, puis partez immédiatement à partir de n'importe quelle étape de l'animation. Au lieu de cela, si vous ajoutez un élément et appuyez rapidement sur le bouton de suppression et ajoutez le bouton, le même élément commencera à glisser, puis s'arrête soudainement en place et glissez vers l'endroit où il se trouve.

Démo

Wow, j'ai dit tellement! Il s'agit d'une démo couvable qui montre tout ce que nous venons de couvert.

[Lien de démonstration]

Autres détails

Avez-vous remarqué que lorsque vous faites glisser le contenu dans la démo, il rebondit comme… printemps? C'est de là que vient le nom: React-Spring utilise la physique de Spring pour interpoler nos valeurs en constante évolution. Il ne divise pas simplement le changement de valeur en n incréments égaux, puis applique ces incréments dans n retards égaux. Au lieu de cela, il utilise des algorithmes plus complexes pour produire cet effet printanier, qui semblera plus naturel.

L'algorithme de ressort est entièrement configurable, avec certains préréglages que vous pouvez utiliser directement - la démonstration ci-dessus utilise des préréglages stiff et gentle . Veuillez vous référer à la documentation pour plus d'informations.

Notez également comment j'animation les valeurs dans les valeurs translate3d . Comme vous pouvez le voir, la syntaxe n'est pas la plus concise, donc React-Spring fournit des raccourcis. Il y a une documentation à ce sujet, mais pour le reste de cet article, je continuerai à utiliser la syntaxe complète non Shortcut pour plus de clarté.

Enfin, je tiens à noter que lorsque vous faites glisser le contenu dans la démo ci-dessus, vous pouvez voir le contenu en dessous de lui battre un peu à la fin. Cela est dû au même effet de rebond. Il semble clair lorsque le contenu rebondit en place, mais pas lorsque nous glissons le contenu vers le haut. Restez à l'écoute pour la façon dont nous allons l'éteindre. (Spoiler, c'est l'attribut clamp ).

Quelques notes sur ces bacs à sable

Code Sandbox utilise un rechargement chaud. Lorsque vous modifiez le code, les modifications sont généralement reflétées immédiatement. C'est cool, mais cela peut être destructeur pour l'animation. Si vous commencez à bricoler et que vous voyez ensuite un comportement étrange et ostensiblement incorrect, essayez de rafraîchir le bac à sable.

D'autres bacs à sable de cet article utiliseront la modalité. Pour des raisons que je ne peux pas comprendre complètement, vous ne pourrez pas modifier aucun code lorsque le modal est activé - le modal refuse d'abandonner la mise au point. Assurez-vous donc de désactiver le modal avant d'essayer des modifications.

Créer des applications pratiques

Ce sont les éléments de base de React-Spring. Utilisons-les pour construire quelque chose de plus intéressant. Compte tenu de tout ce qui précède, vous pourriez penser que React-Spring est très facile à utiliser. Malheureusement, dans la pratique, trouver certaines des subtilités qui doivent être gérées correctement peuvent être délicates. Beaucoup de ces détails seront explorés en profondeur dans le reste de cet article.

J'ai déjà écrit est lié à mon projet de liste de livres d'une manière ou d'une autre. Ce message ne fait pas exception - ce n'est pas une obsession, c'est juste que le projet se trouve avoir un point de terminaison GraphQL accessible au public et beaucoup de code existant qui peuvent être exploités, ce qui en fait un objectif évident.

Créons une interface utilisateur qui vous permet d'ouvrir des modaux et de rechercher des livres. Lorsque les résultats apparaissent, vous pouvez les ajouter à la liste d'exécution des livres sélectionnés affichés sous le modal. Une fois terminé, vous pouvez désactiver le modal et cliquer sur un bouton pour trouver des livres similaires au livre sélectionné.

Nous commencerons par une interface utilisateur entièrement fonctionnelle, puis ajouterons progressivement des animations aux sections, y compris les démos interactives.

Si vous voulez vraiment savoir à quoi ressemble le résultat final, ou si vous connaissez déjà React-Spring et que je veux voir si je couvre quelque chose que vous ne savez pas encore, voici (il ne gagnera aucun prix de conception, je suis assez clair). Le reste de cet article présentera le processus de réalisation étape par étape de l'état final.

Animer nos modaux

Commençons par notre modalité. Avant de commencer à ajouter des données, animons très bien nos modaux. Voici à quoi ressemble un modal de base et unanimé. J'utilise l'interface utilisateur de Ryan Florence (en particulier les composants modaux), mais l'idée est la même, peu importe ce que vous utilisez pour construire le modal. Nous voulons laisser notre arrière-plan s'estomper et convertir notre contenu modal.

Étant donné que le modal est rendu conditionnellement en fonction d'un attribut "ouvert", nous utiliserons useTransition . J'ai enveloppé le modal UI Reach avec mon propre composant modal et rendu du contenu vide ou modal réel basé sur isOpen . Nous avons juste besoin de l'animer en convertissant les crochets.

Voici à quoi ressemble le crochet de conversion:

 const modalTransition = usetransition (!! isopen, {{
  config: isopen? {... config.stiff}: {durée: 150},
  de: {opacité: 0, transform: `tradlate3d (0px, -10px, 0px)`},
  Entrée: {opacité: 1, transform: `tradlate3d (0px, 0px, 0px)`},
  quitter: {opacité: 0, transform: `tradlate3d (0px, 10px, 0px)`}
});

Il n'y a pas de grandes surprises ici. Nous voulons s'estomper et fournir une légère transition verticale selon que le modal est actif ou non. La partie étrange est la suivante:

 config: isopen? {... config.stiff}: {durée: 150},

Je veux juste utiliser la physique du printemps lorsque le modal est allumé. La raison de cela - du moins d'après mon expérience - est que lorsque vous éteignez le modal, l'arrière-plan disparaît trop longtemps, ce qui fait que l'interface utilisateur sous-jacente est interactive trop longtemps. Ainsi, lorsque le modal est allumé, il rebondira bien en place par la physique du printemps, et lorsqu'il est fermé, il disparaîtra rapidement en 150 millisecondes.

Bien sûr, nous présenterons notre contenu via la fonction de conversion renvoyée par le crochet. Notez que j'extrait des styles d'opacité de l'objet de style pour s'appliquer à l'arrière-plan, puis j'applique tous les styles d'animation au contenu modal réel.

 Retour ModalTransition (
  (styles, isopen) =>
    isopen && (
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {enfants}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    )
));

[Lien de démonstration]

La partie restante est omise car la longueur est trop longue et est répétée avec le contenu précédent. L'idée principale est d'utiliser les crochets useSpring et useTransition de React-Spring, combinés avec ResizeObserver pour réaliser divers effets d'animation, notamment la décoloration et l'extérieur, les changements de hauteur et les animations d'entrée et de sortie des éléments de liste. L'article explique en détail comment gérer les détails de l'animation, tels que l'état initial, la durée de l'animation et comment éviter les conflits d'animation. Le résultat final est une interface interactive avec une expérience lisse et utilisateur.

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!