Comment utiliser React Spring pour animer des composants

réagir ressort
(Crédit d'image: Matt Crouch)

React Spring peut vous aider avec des animations, qui sont notoirement difficiles à mettre en œuvre sur le Web. Animations CSS sont le meilleur choix, mais pour créer un résultat fluide, il faut jongler soigneusement entre les classes, les durées et les événements. Lancer un Framework JavaScript comme React dans le mix ne fait que compliquer davantage les choses.

Pour les animations qui reposent sur l'interaction de l'utilisateur, les valeurs peuvent être calculées via JavaScript et appliquées directement à un élément. En adoptant cette approche manuelle, nous aurions besoin de calculer et d'appliquer notre propre assouplissement pour rendre l'animation plus naturelle.

React Spring est une bibliothèque conçue pour gérer les nombreux problèmes courants liés à l'animation sur le Web. Il adopte une approche légèrement différente, en se concentrant sur la physique sur des durées droites et des fonctions d'assouplissement définies. Cela aide à garder les choses douces et naturelles.



Bien que la plupart du temps, cela soit utilisé pour les effets visuels, la bibliothèque effectuera la transition entre deux valeurs, que cette valeur soit utilisée ou non pour un style. Par exemple, il pourrait être utilisé pour compter un certain nombre d'inscriptions pour souligner la taille d'une communauté.

Dans ce didacticiel, nous allons créer un composant de carte qui permet aux utilisateurs d'évaluer les images. La carte se retourne pour révéler une note et les utilisateurs peuvent cliquer pour ajouter la leur. Nous utiliserons la nouvelle implémentation des hooks de React Spring, qui nécessite React version 16.8 ou supérieure. Avant de commencer, téléchargez les fichiers du tutoriel ici (et les sauvegarder dans stockage en ligne ).

Si vous souhaitez créer un site sans processus de code complexes, utilisez un Générateur de site Web . Et assurez-vous d'explorer hébergement Web options aussi.

Générer du CSS

Rejoignez-nous à Londres le 26 septembre pour Generate CSS - cliquez sur l'image pour réserver votre billet(Crédit d'image: Future)

01. Installer les dépendances

Une fois les fichiers téléchargés, les dépendances du package doivent être installées avant de pouvoir démarrer. Ce projet basé sur l'application Create React comprend réagir-ressort package et toute la configuration du serveur local nécessaire pour commencer.

Sur la ligne de commande, recherchez les fichiers du projet et installez-les, puis exécutez-les.

> yarn > yarn start

02. Générer des images dans l'état

Tout d'abord, nous avons besoin de quelques images pour évaluer. Pour ce tutoriel, nous allons coder en dur certaines images dans l'état de l'application, mais ces données peuvent provenir de n'importe quelle source. Ouvrez App.js et créez des images avec le useState crochet de React. Cela donnera à chaque image une note initiale que nous pourrons afficher et mettre à jour plus tard.

const [cards] = useState([ createImage(image1), createImage(image2), createImage(image3) ]);

03. Affichez chaque carte d'image

Comme les images sont stockées dans un tableau, nous pouvons boucler sur cet état et créer des composants séparés pour chacun. La logique d'animation de React Spring vivra dans un composant que nous pouvons utiliser partout où nous en avons besoin.

Dans la méthode de rendu d'App.js, créez une copie de ce composant pour chaque carte du tableau d'état. Il recevra toutes les valeurs de l'état, y compris l'image et la note initiale.

{cards.map((card, index) => ( ))}

04. Ajouter une structure de carte

Trois cartes simples

(Crédit d'image: Matt Crouch)

Avant de pouvoir ajouter l'animation, la carte a besoin de contenu. Chaque carte a un recto et un verso, qui sont mis en œuvre séparément éléments superposés.

Ouvert NotesCard / index.js et ajoutez la structure de la carte. Nous devons appliquer l'image comme arrière-plan sur la carte avant, avec le dos contenant finalement la note.

05. Appliquer des styles de survol

Carte semblant pivoter horizontalement

(Crédit d'image: Matt Crouch)

Tous les styles qui ne sont pas directement mis à jour via nos animations peuvent être appliqués via CSS. Cela inclut l'effet d'ombre 3D de base pour chaque carte lorsqu'elle est survolée. À l'intérieur NotesCard / style.css , ajoutez des styles supplémentaires pour faire sauter la carte de la page au survol en appliquant un filtre.

.RatingsCard:hover { filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.25)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); }

06. Définir l'ombre par défaut

Une ombre soudaine en vol stationnaire est une expérience choquante. Nous devons donc passer lentement d'un État à l'autre pour que les choses se passent bien. Ajoutez une ombre portée plus subtile à la carte lorsqu'elle n'est pas survolée. Utilisez le transition propriété pour animer entre ces deux états.

.RatingsCard { [...] filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1)); transition: filter 0.5s; }

07. Maintenir l'état sélectionné

Nous devons stocker et mettre à jour les informations sur le côté de la carte orienté vers le haut. Nous pouvons utiliser la fonction intégrée de React useState hook pour définir une valeur de départ et lui faire renvoyer la valeur actuelle et une méthode pour la mettre à jour.

Au début de la Carte d'évaluation fonction de composant, créer définir ceci choisi Etat.

const [selected, setSelected] = useState(false);

08. Définir l'animation de retournement

React Spring est responsable de la transition des nombres entre une valeur et une autre. Cela peut être fait avec un ressort et le utilisationSpring accrocher. Nous lui fournissons des informations de configuration et il renvoie un ensemble de valeurs qui se mettent à jour en fonction de ses calculs physiques.

Créez un ressort pour l'animation de retournement. Celui-ci va s'estomper et faire pivoter une carte selon que la carte est dans son choisi Etat.

const { opacity, transform } = useSpring({ opacity: selected ? 1 : 0, transform: `rotateY( ${selected ? 180 : 0}deg)` });

09. Convertir en conteneur animé

Les objets retournés par utilisationSpring définissez leur animation, mais ne fournissez pas les valeurs numériques dont nous avons besoin. Le Animé La fonction d'usine digère ces informations et fournit ensuite les valeurs sous forme de nombres aux composants.

Convertissez le Carte d'évaluation élément pour utiliser le Animé fonction. Le animated.div la syntaxe indique à la fonction de renvoyer un .

10. Animez la carte avant

React Spring n'anime que les valeurs et ne fait aucune animation des éléments lui-même. Nous pouvons lier ces valeurs à un accessoire de style et créer cette animation à la volée. Mettez à jour la carte avant pour utiliser le nouveau opacité et transformer valeurs. Dans ce cas, nous devrons interpoler la valeur d'opacité, que nous aborderons sous peu.

11. Animez la carte arrière

Trois cartes avec des images dessus

(Crédit d'image: Matt Crouch)

Lorsque vous retournez la carte, quelle que soit l'animation que nous appliquons à une face, elle devra être appliquée en sens inverse sur l'autre. Lorsqu'ils sont joués ensemble, ils auront l'air de bouger comme une seule pièce.

Dans ce cas, nous devons appliquer les mêmes styles à la carte arrière, mais cette fois interpoler le transformer valeur à la place.

12. Interpoler les valeurs

Au lieu d'appliquer directement des valeurs aux propriétés CSS, nous pouvons leur appliquer une sorte de fonction, afin de mapper leur valeur à une autre. Ce processus est appelé interpolation.

Définissez quelques fonctions d'interpolation vers le haut de NotesCard / index.js . Ceux-ci appliquent l'inverse des animations d'opacité et de transformation lors de la sélection ou de la désélection.

const inverseOpacity = o => 1 - o; const inverseTransform = t => `${t} rotateY(180deg)`;

13. Basculer l'état au clic

Le retournement de la carte doit être lié à un clic. Comme le choisi La valeur de l'état détermine quelle face est visible, nous devons basculer cet état en cliquant sur la carte.

Ajouter un écouteur de clic à l'extérieur Carte d'évaluation élément. Lorsque cela se produit, il basculera la valeur booléenne maintenue dans l'état.

setSelected(!selected)} >

14. Ajuster la physique du retournement de la carte

Informations sur l

(Crédit d'image: API commune)

À l'heure actuelle, notre animation fonctionne, mais cela semble plus un flotteur qu'un flip. Nous pouvons changer certaines valeurs sur chaque ressort pour changer son comportement. À l'intérieur de l'objet de configuration du ressort, créez un config objet pour diminuer le frottement et augmenter la tension. Cela donnera à l'animation une sensation plus vive.

comment ajouter des polices à photoshop cs2
useSpring({ config: { friction: 22, tension: 500 }, [...] });

15. Créer un ressort pour un effet d'inclinaison

Bien que l'effet de survol basé sur CSS précédemment fournisse des commentaires, nous pouvons encore améliorer cela en ayant une animation d'inclinaison qui réagit à la position du curseur. Lors de la mise à jour d'un ressort à une fréquence élevée, comme un mouvement de souris, nous pouvons obtenir de meilleures performances en utilisant le ensemble fonction qui est renvoyée par chaque ressort. Créez un nouveau ressort pour cette animation et gardez une main sur sa fonction retournée.

const [props, set] = useSpring(() => ({ state: [0, 0, 1] } ));

16. Appliquer des styles d'inclinaison

React Spring peut animer de nombreux types de valeurs différents, y compris des tableaux. Le stockage de nos valeurs dans un tableau nous permet de les interpoler toutes sur le transformer propriété en un seul passage.

Créer un transformCard fonction d'interpolation et appliquer les styles au principal Carte d'évaluation élément.

const transformCard = (x, y, scale) => `perspective(1000px) rotateX(${x}deg) rotateY(${y}deg) scale(${scale})`; [...] setSelected(!selected)} style={{ transform: !selected && props.state.interpolate( transformCard) }}>

17. Définir les valeurs lors du déplacement de la souris

Les événements de souris fournissent les coordonnées du curseur à ce moment. Nous nous intéressons aux coordonnées du client pour obtenir la position du curseur dans la fenêtre. Ajouter le mouvement de la souris et laisser les événements à l'extérieur . On passe les coordonnées à une fonction en mouvement et on réinitialise les valeurs par défaut lorsque le curseur quitte le .

onMouseLeave={() => set({ state: [0, 0, 1] })} onMouseMove={({ clientX: x, clientY: y }) => set({ state: calculateValues(x, y) }) }

18. Calculer les valeurs d'animation

Nous voulons seulement une petite inclinaison pour éviter que la carte ne bouge trop lorsque l'utilisateur interagit avec elle. Le calculerValeurs La fonction déterminera le côté de l'écran sur lequel se trouve le curseur et l'inclinera dans cette direction.

Créez la fonction pour remplir ces valeurs. La division par 40 réduit l'effet d'inclinaison pour le rendre plus utilisable. La valeur finale élèvera visuellement la carte de l'écran.

const calculateValues = (x, y) => [ -(y - window.innerHeight / 2) / 40, (x - window.innerWidth / 2) / 40, 1.1];

19. Afficher le nombre d'étoiles

Classement par étoiles sur une carte

(Crédit d'image: Matt Crouch)

Chaque image a une note que nous devons afficher en étoiles au dos de la carte. Cette logique est maintenue à l'intérieur de son propre composant, mais cela doit d'abord être appliqué à la face arrière.

Tout d'abord, créez un nouvel état pour détenir la note, puis créez un composant à l'intérieur de la face arrière .

const [currentRating, setRating] = useState(rating); [...] {selected && ( )}

20. Créer une animation d'étoiles

Les cotes d'étoiles vont s'estomper une fois la carte retournée. En utilisant le utilisationTrail crochet de React Spring, nous pouvons appliquer des ressorts à plusieurs composants, l'un après l'autre.

S'ouvrir StarRating / index.js et ajoutez le crochet. Le premier argument définira le nombre de ressorts à fabriquer.

const animatedStars = useTrail(5, { config: { friction: 22, tension: 500 }, from: { opacity: 0, transform: 'scale(0.8)' }, opacity: 1, transform: 'scale(1)' });

21. Appliquer des étoiles au composant

La dernière chose que nous devons faire est d'afficher ces étoiles. Le animatedStars La variable contient maintenant un tableau de ressorts, que nous pouvons parcourir et appliquer à la carte.

Pour chaque étoile, montrez un composant à l'intérieur du principal Évaluation étoilée div. Répartissez les accessoires de style pour appliquer tous les effets à chaque composant. Lorsque vous cliquez dessus, envoyez la nouvelle note au parent composant.

{animatedStars.map((props, index) => ( ))}

Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web . Acheter le numéro 288 ou s'abonner .

Lire la suite: