Transcription
1. Bienvenue et aperçu du cours: Bienvenue dans ce cours.
En seulement 15 minutes, vous apprendrez à créer une superbe animation de repousse
sur un bouton en utilisant React Voici ce à quoi vous pouvez vous
attendre selon deux approches. Nous allons commencer par passer rapidement en revue une version de base qui
montre l'idée de base. Lorsque vous cliquez sur le
bouton, une répulsion apparaît. Nous passerons ensuite à une
version avancée qui affine
l'effet en utilisant techniques de réaction
modernes
et les meilleures pratiques. Apprentissage basé sur des projets. Il ne s'agit pas de longues conférences. Vous accédez directement au code chaque étape étant clairement
expliquée, afin de pouvoir l'appliquer immédiatement. La première consiste à enseigner. Je fais en sorte que les choses soient brèves et énergiques pour que vous
ne perdiez pas de temps. Vous allez acquérir des compétences du monde
réel que vous pourrez utiliser sur
vos propres projets. À la fin, vous aurez un bouton interactif intéressant
et une meilleure compréhension des animations React qui
amélioreront votre boîte à outils de
développement Web. Allons-y et créons
quelque chose de génial.
2. Configuration : créer une application React: Commencez avec un
dossier de projet vide et utilisez VS code, un éditeur de code puissant et
convivial. Ouvrez d'abord le
terminal altratd dans le code VS. Nous allons maintenant créer notre
application React à l'aide de la commande photon. Px, créez un point d'application React. Le point à la fin
indique à PX de créer l'application React dans le répertoire coréen au lieu
de créer un nouveau dossier, appuyer sur Entrée et d'attendre
la fin de l'installation. Ce processus mettra en
place tout ce dont nous avons besoin pour commencer à
coder et à réagir. Bien, une fois la
configuration terminée, nettoyons le terminal Examinons maintenant la structure de
notre projet. Dans l'explorateur de fichiers, vous
verrez plusieurs fichiers et dossiers. Le plus important
pour le moment est App Dots. C'est là que se situe
la logique principale de notre application. Pour prévisualiser notre projet dans
le navigateur, lancez NPM start. Cela ouvrira une
nouvelle fenêtre de navigateur
affichant la page d'
accueil par défaut de React. Organisons notre projet en créant un
composant distinct pour notre bouton. Dans le dossier SFC, créez un nouveau dossier
appelé components Ensuite, dans ce dossier, créez un nouveau fichier,
appelez le point GSX Ce sera notre composant de
bouton personnalisé, et dans la leçon suivante, nous allons commencer à
le créer étape par étape.
3. Préparer le composant des boutons: Bien, c'est notre projet
prêt à travailler avec. J'ai ajouté un fichier CSS ici et je l'ai
nommé Cool button to CSS. Il contient les styles CSS de
notre composant cool button. Vous trouverez ce fichier dans
la section des ressources avec des commentaires sur le fonctionnement de
sa propriété CSS. Commençons maintenant à coder notre composant
cool button. Importez d'abord React
depuis l'Act, puis importons nos styles depuis le module CSS Cool button. Créez un bouton de
refroidissement avec un C majuscule et utilisez
une fonction flèche. La fonction renverra un code GSX, qui sera un
élément de bouton avec le texte, cliquez sur M. Nous allons donner à notre bouton le
nom de classe Cool dash button, que vous trouverez
dans le fichier CSS d'étude, cela donnera à notre bouton un style cool et interactif Maintenant, à la fin du fichier, écrivez Exporter le bouton de refroidissement par défaut. Cela rendra le composant
Cool Button réutilisable tout au long de notre projet. Notre composant doit être rendu, nous devons
l'utiliser dans le fichier Abdo GS l'intérieur de cet élément de développement Assurez-vous de l'avoir
importé comme tel. Nous devons également modifier
la classe d'application pour cet élément de développement afin de placer le bouton de refroidissement au
centre de la page. Donc, dans le fichier CSS Abdo
et dans la classe APCSS, ajoutez ces propriétés CSS,
et elles devraient faire le travail Exécutons cette application, voyons
le résultat et démarrons le
terminal dès le démarrage du NPM Lorsque le
serveur House local démarre, l'application s'affiche
dans le navigateur et vous verrez notre bouton de refroidissement
au milieu de la page. Il a un effet de survol sympa
et un effet de clic avec un beau
fond dégradé et une belle ombre qui donne un
peu de profondeur
au bouton Vous pouvez consulter le fichier CSS dans la
section des ressources où vous
trouverez des commentaires sur le fonctionnement de la
classe et de la propriété CSS. C'est tout pour cette
leçon. Il ne s'agit que de la
préparation du projet, et dans les prochaines
leçons, nous
aborderons les points les plus
intéressants. Alors allons-y.
4. Approche pour les débutants : effet d'animation de base de l'ondulation: OK, c'est ici que nous avons laissé le bouton de la leçon précédente. Cela a l'air bien, mais
nous voulons le rendre plus cool en ajoutant un effet de clic
ondulé Tout d'abord, nous allons commencer par la méthode
de base, pas si avancée de créer l'effet de clic. Ensuite, dans la leçon suivante, je vais vous montrer la bonne façon de réaliser ce type d'effets. En connaissant les méthodes de base et les méthodes avancées
de faire les choses, vous développerez de solides compétences en résolution de
problèmes, et c'est le
but ultime de ce cours. Commençons. Tout d'abord,
à l'intérieur du bouton, créez un élément span juste
en dessous du texte « click me ». Cela agira comme notre
effet d'entraînement lorsque vous cliquerez
sur le bouton Donnez au span le
nom de classe Ripple. Cette classe est définie dans le fichier CSS cool button point. Consultez les ressources pour obtenir des
informations détaillées sur le code CSS. Revenez à l'ondulation et
ajoutez un attribut de style. Dans ce sujet, nous ajouterons quelques propriétés pour contrôler la position et la
taille de l'ondulation Réglez la gauche sur zéro, le haut sur zéro, la largeur sur 100 % et le haut sur 100 %. Désormais, chaque fois que vous
déployez la page, vous pouvez voir l'
effet d'entraînement en bas En effet, chaque fois que
le rythme se charge, l'élément Ripple sera également
chargé avec les styles CSS, et chaque fois que les styles
CSS
se chargeront, toutes les animations que nous avons toutes les animations que nous avons seront déclenchées
automatiquement Et c'est le cas de notre animation
Ripple ici. Ce que nous voulons, c'est déclencher l'effet sur chaque événement de clic. Donc, sur l'élément bouton, ajoutez un attribut onclick et définissez-le comme égal
à handle click Ici, créez une fonction de clic sur la
poignée. Cliquez, nous déclenchons
l'animation d'ondulation en
ajoutant puis
en supprimant la plage, une méthode simple pour
exécuter une animation Pour cela, nous utiliserons un
état de réaction défini animate sur true. Bien sûr, nous devons
définir l'état ici,
et nous utiliserons le
use state hug pour définir
l'état initial sur et nous utiliserons le
use state hug pour définir
l'état false
et l'état du port depuis React. Nous allons maintenant utiliser l'
état animate pour afficher la plage, envelopper la plage dans
deux bases purement basiques et ajouter la variable d'
état animate comme suit Cela indiquera que React I animate est vrai, puis
affichera la durée S'il est faux, ne
renseignez pas l'intervalle. Enregistrez maintenant le code
et testons. Cliquez sur le bouton et l'animation
Pull est déclenchée. Mais si vous cliquez à nouveau,
rien ne se passe car nous
n'avons pas rétabli l'
état d'animation pour le forcer Pour avoir ce mécanisme de bascule, nous venons ici et définissons la fonction de
clic sur la poignée et ajoutons
ce délai défini, qui attend
600 millisecondes, qui est la plage de temps
d'animation
définie dans la définie dans Après 600 millisecondes,
le rappel sera déclenché et nous appellerons
la fonction set animate, qui remettra l'état d'animation
en Vous pouvez cliquer plusieurs
fois sur le bouton, et l'effet d'entraînement se
répètera à chaque fois. Mais comme vous pouvez le constater, l'
animation ne semble pas bonne, surtout lorsque je
clique très vite. En plus de cela, nous voulons
que les ondulations commencent à partir de l'endroit où nous avons cliqué sur le bouton avec
le curseur Nous pouvons faire mieux que cela avec une
implémentation de code plus avancée. Dans la leçon suivante, nous allons rendre cette animation plus fluide
et plus amusante à utiliser, en particulier lorsqu'elle suit la position de
votre curseur.
5. Approche avancée : Techniques d'animation Pro Ripple: L'
effet d'animation en rappel fonctionne, mais pas très bien.
Ça n'a pas l'air bien. C'est bizarre, et ce
n'est pas du tout fluide. Cela est dû à notre mauvaise implémentation de
code. Dans cette leçon, nous allons donc y remédier. Croyez-moi, ça va
être super facile et amusant. Supprimons d'abord le code contenu dans la fonction Handle
Click. Supprimez également l'état
d'animation d'ici et d'ici. Enveloppons notre
gestionnaire de clics dans Use Callback React Hook pour optimiser les performances et
éviter les nouveaux rendus inutiles. Ajoutez un interray à
la fin comme celui-ci, vous assurer
que la fonction n'
est créée qu'une seule fois Assurez-vous d'importer le hook de
rappel américain depuis React. Maintenant, l'idée générale de créer des ondulations
va changer Nous utiliserons un tableau pour suivre
plusieurs informations sur les répercussions. Chaque fois que vous
cliquez sur le bouton, nous ajoutons un nouvel
objet ondulé au tableau, qui mémorise sa position
et déclenche l'animation Après un court
délai, nous supprimerons cette ondulation de la matrice
pour que tout reste propre De cette façon, plusieurs
ondulations peuvent apparaître et disparaître en douceur lorsque vous
cliquez sur le bouton Ajoutons un nouvel état pour stocker les ondulations, appelons-le des
ondulations, comme ça À l'intérieur de la poignée, cliquez sur
la fonction appelée set ripples. Prenez les ondulations précédentes
et, dans un coback, renvoyez un nouveau tableau contenant les anciennes
ondulations Ce sera
New Ripple pour le moment. Ici, nous allons utiliser le tableau d'
ondulations pour déterminer nombre d'ondulations à afficher en fonction de la longueur
du At Ripples point map
avec le cobac qui prend son ondulation
et l'argument key, créé par Maintenant, prenez l'élément Ripple
Span, coupez-le et placez-le dans le cobac entre deux parenthèses Ajoutez un attribut clé et
définissez-le comme l'argument clé. Enregistrez le code et
testons le résultat. L'animation fonctionne toujours, et voici le moment de vérité. Lorsque je clique très
vite, les ondulations se créent les unes après les
autres de manière fluide Mais nous avons toujours le
problème. Examinons le code source de la page. Et à l'intérieur de notre bouton, nous pouvons voir un désastre. L'élément Ripple Span est rendu plusieurs fois
à l'intérieur du dôme Cela
affectera certainement les performances. Nous voulons éliminer
son ondulation après un court laps de temps
et garder notre dôme propre Dans la fonction handle
click, ajoutez un délai d'expiration défini
avec un rappel Définissez le délai d'expiration
à 600 millisecondes, qui est la
durée d'animation définie dans la classe CSS po pour l'
animation po Après 600 millisecondes, le set d'
appels se répercute. Prenez le
tableau précédent et renvoyez filtre
à points précédent avec un
rappel qui prend son ondulation et filtre ou supprime les
ondulations dont la clé n'est pas égale à
la touche de point d' Nous voulons donc uniquement conserver New
Ripple et supprimer le reste. La nouvelle ondulation
n'existe pas encore, alors
définissons-la ici Ce sera une
constante et un objet. Cet objet
représentera son ondulation, et son ondulation
aura ces propriétés de style Nous allons donc définir quelque chose proche de cela à
l'intérieur de cet objet. Ajoutez une propriété X
avec une valeur zéro, une propriété Y avec une valeur zéro et une taille de valeur 100 %. Les propriétés X et Y vont maintenir la position du curseur
lorsque nous cliquons en bas,
et la propriété de taille est de faire en sorte que le repoussoir couvre
l'ensemble du bouton Nous nous en occuperons dans un moment, mais pour le moment, conservez ces valeurs. Enfin, nous allons avoir une propriété clé parce que nous
l'utilisons ici et il est toujours
préférable de créer nos propres clés plutôt que de
compter sur React pour le faire. Définissez donc sa valeur
sur date point maintenant. Remplacez cette nouvelle chaîne de répulsion par une nouvelle constante
Javascript de répulsion. Pour l'attribut key, utilisons
la touche Ripple Dot. Disons cela et l'
animation fonctionne toujours. Et surtout, si nous inspectons cela à
l'intérieur du
bouton, nous devons recharger
l'application pour
repartir à zéro heure actuelle, si je
clique sur le bouton, vous remarquerez que l'élément
Ripple Span apparaît, puis au bout de 600
millisecondes Maintenant, il nous
manque encore quelque chose. Nous voulons contrôler
la position
et la taille de l'ondulation par programmation Nous devons donc utiliser les propriétés de l'objet d'
ondulation le style
de l'amplitude d'ondulation. Remplaçons-le par un point
d'ondulation X. En haut, définissez-le sur le point d'ondulation Y, et pour la largeur et la
hauteur, utilisez la taille du point d'ondulation Ces propriétés n'ont
toujours aucun effet sur les ondulations Nous définirons leurs valeurs en fonction des références des boutons. Ici, définissez une constante de référence de
bouton. Nous utiliserons le crochet de réaction
use Rf et définirons sa
valeur initiale sur null. Assurez-vous de transmettre le hook
use Rf de React. À l'aide de ce crochet, nous
pourrons définir la position du curseur sur le bouton et déterminer la
taille de l'ondulation Bien, ajoutez maintenant
l'attribut ref à l'élément button et définissez
sa valeur sur button ref. De cette façon, la constante de
référence du bouton
contiendra la référence
du bouton dans la poupée. Au niveau de la
fonction Handle Click, définissez une constante. Rect est l'abréviation de rectangle car il représente la forme rectangulaire du bouton et sa position à l'écran. Définit la valeur sur le bouton Rf, point courant point get
bounding client Rt, qui est une fonction
que vous devez appeler Journalisons
la variable rat sur console et voyons ce qu'elle nous donne. Lorsque je clique, j'obtiens cette
sortie sur la console. Get Bounding Client Track nous
donne donc ces informations
sur le bouton, que nous utiliserons pour calculer la position et la taille du bouton Supprimez le journal de la console,
ajoutez une constante de taille, calculez la taille à l'aide de la fonction
math point max, qui nous donne le maximum
de deux nombres donnés, en passant la largeur du point g
et la hauteur du point g. Cela définit la taille du po la plus grande dimension
de la largeur
ou de la hauteur du bouton afin que
l'effet
couvre entièrement le bouton
lors de l'animation Calculons maintenant
la coordonnée X du curseur lorsque nous
cliquons sur le bouton. Nous devons donc accéder à
l'événement de clic. React, nous transmettrons l'événement click par défaut à la
fonction en tant qu'argument. Nous l'appellerons E,
abréviation d'événement. À partir de l'événement de clic,
nous prenons les coordonnées X du client
X en coordonnées E, en
soustrayons la position
gauche du bouton, le point
droit, à gauche, et nous l'
ajustons de moitié par rapport à la taille du po Donc, taille divisée
par deux au centre. Cela permet de calculer la
position X des ondulations à l'intérieur du bouton. Définissez ensuite la constante Y. Nous prenons la
coordonnée Y des clics et le client Y, soustrayons la position
supérieure du bouton,
point haut, et ajustons de
moitié la taille de l'ondulation, donc nous le centrons Donc, taille divisée par deux. Cela permet de calculer la
position Y des ondulations à l'intérieur du bouton. Nous allons maintenant utiliser
ces calculs dans le nouvel
objet ondulé pour façonner notre ondulation Donc pour cette taille, nous allons nous
référer à la taille calculée. Pour la propriété Y,
nous ferons référence à la coordonnée Y
du curseur et il en va de même
pour la coordonnée X. Et c'est la dernière pièce
pour créer ce sort magique. Sauvegardons cela
et examinons les résultats. Fermez cette fenêtre,
et lorsque je clique, les ondulations commencent à s'animer à
partir de la précision du curseur Y, et la taille de l'ondulation
couvre l' Nous sommes passés de l'
implémentation de base à l'implémentation
avancée de
cet effet d'animation de boutons, et vous avez acquis
une nouvelle compétence et une nouvelle perspective sur la façon dont les choses doivent être
construites et réagir. Terminer ce cours est
vraiment une grande réussite. Cela montre que vous
avez l'étincelle qui vous
motive à consacrer du temps et des efforts à apprendre de nouvelles choses Et ça, mon ami, c'est le plus important
dans toute histoire à succès. Je vous laisse ici, mais
n'hésitez pas à me suivre et soumettre votre projet sur le portfolio du
projet
sur Skill Share, afin que vous puissiez obtenir des commentaires et
peut-être essayer de trouver votre propre logique ou animation et de la partager avec d'autres
apprenants et avec moi. Je serais heureuse de
voir tes créations.
Aymen El Kani, software engineer
