Figma : Composants interactifs

1. 01 Introduction: Bienvenue dans ce cours. Dans ce cours, nous allons voir comment fonctionnent les composants interactifs. Vu fema, ils existent depuis un moment, mais dans une version bêta. Et enfin, il n' y a pas si longtemps , ils ont été implémentés dans la version finale de Figma. Nous allons donc apprendre quels sont les composants qui interagissent, comment les fabriquer et à quoi servent-ils. Nous allons donc créer des composants interactifs pour les boutons, radio sur ceux en litres, en tant que débutants. Chargement des barres, même des animations, création, créatifs, tous avec des composants interactifs. Et vous verrez que ces prototypes rendront vos prototypes plus vivants. Donc, si vous êtes intéressé et que vous approfondissez, créez des flux de travail plus cohérents dans Figma m'a attiré vers ce cours. 2. 02 boutons: Hey, donc, merci beaucoup pour les scores de l'unité deux. Comme nous l'avons vu dans l'introduction, nous allons voir quelques interactions. Nous pouvons le faire. Nous avons des composants interactifs. Comme vous pouvez le voir ici dans le bouton radio, j'ai tous ces états comme Holger quand je clique de la même façon lorsque ces boutons que j'ai, l'état homozygote et l'état dans tous les cas. J'ai ces répliques plus légères que le week-end et les rendent interactives. Ceux-ci comme BGR ici, ou ces petites animations que nous pouvons déclencher lorsque nous cliquons sur certains endroits, ces barres de chargement ou même ces noms d'entrée, comme vous pouvez le voir, lorsque je fais cela sur l'état de survol ou dans l'état, nous avons ces animations sympas avec la barre de doublure ou l'écriture comme vous tapez également, ces animations dans le nom de l'entrée et lorsque je retire ou que ces animations dans le nom de l'entrée et lorsque je retire je survole ou que je perds le focus sur l'entrée, cela fera Ceux-ci. Commençons donc et créons ici une autre base pour créer nos composants. Ça va être le tutoriel ou d'accord ? Donc, pour ces derniers, je vais commencer à classer un, un cadre. N'oubliez pas que vous pouvez simplement appuyer sur F. Et je vais juste ajouter ces MacBook Pro. C'est donc ce que nous allons interrompre les composants. Et je vais créer un autre cadre ici pour commencer ce truc. Les composants de l'heure. Ce sera donc un terrain de jeu. D'accord ? Commençons donc par les boutons, ce que je pense qu'ils sont. Il y aura le plus semblable. Commençons donc par créer un rectangle de hauteur qui va être de 40. Et je vais appliquer un rayon de bordure de quatre. Et créons un test ici, qui va être une bouteille. Ça n'a pas d'importance. Et avec ceux-ci, je vais juste créer une mise en page automatique. Rappelez-vous que vous sélectionnez les deux éléments et que vous appuyez sur Altoid, d'accord ? Je vais donc faire comme une bobine primaire ou quelque chose comme ça, bleu. Et ça va être blanc. Je vais juste créer un composant avec ça, d'accord ? Et ce sera notre bouton. D'accord ? Notre bouton en tant que clé par défaut, c'est notre état par défaut. Je vais juste le dupliquer et le néerlandais parce que nous voulons créer des baryons avec ce composant. D'accord ? Et je vais juste aller ici et c'est HSL et vais juste être supprimé et ça va être notre état de vol stationnaire. D'accord ? Nous avons donc créé ce composant oui personne là-dedans. Et maintenant, je vais l'attacher à nouveau et je vais créer un domaine clique, d'accord , donc pour B, je vais juste le rendre un peu plus sombre. Presque noir. C'est aussi bien. Je vais donc simplement les renommer en Glick Estate. Et cela va être notre état de vol stationnaire. D'accord ? Je vais donc, comme ici, comme vous pouvez le constater, n' est pas encore un composant. Donc, et maintenant c'est un composant. Et rappelez-vous ces invariants. Que devez-vous faire avant de créer du corps sur semence, sélectionner les éléments que vous voulez. Et ici, à droite, oui, les variantes combinent les seins. Et ce qui va faire, c'est créer un composant avec des états différents, accord, donc dans ce cas, la propriété est cette date. Et je vais juste mettre l'avant d'abord, puis l'état de survol et le clic. Et maintenant, c'est là que les composants interactifs entrent en jeu. Et si nous appuyons ici sur le prototype et que nous sélectionnons notre premier bouton, ce que nous voulons, c'est que lorsque nous survolons ce bas passe à l'état imbriqué. Ok, donc au lieu de la clique, ce que nous voulons que ces vol stationnaires sauvages arrivent à ce domaine, à l'état stationnaire des deux V. D'accord ? Et puis une bonne chose, c'est par défaut, je pense que c'est instantané ici dans l'animation. Et ce que je pense que c'est le meilleur, c'est juste que tu mettes dans une animation intelligente. Il va donc faire une transition en douceur entre les deux États. Et nous pouvons mettre ici au lieu de 300 millisecondes, oui, l'amener à 200. D'accord. Faisons donc la même chose avec ça. Quand nous sommes à moitié, quand, quand nous nous intéressons l'état, ce que nous voulons cela fasse pendant que vous cliquez pour arriver à cet état, d'accord ? Donc, en appuyant sur, en cliquant sur arrive à cet état, OK. Alors vérifiez qu'en tant que Martin, il les a activés et 200 millisecondes, vous devez nous comme bon vous semble. Mais je pense que c'est un beau noir. Essayons donc notre bouton. Donc, pour cela, ce que nous allons faire, c'est simplement passer la vieille clé pour apporter du gaz. Ou nous pourrions venir ici pour trouver des biens. Et dans notre tutoriel, il suffit de certa sur notre composant, notre composant de bouton, et faites-le glisser. Et voyons si ça marche. Allons au terrain de jeu. Et quand nous planons, nous voyons que c'est le cas. Et quand on clique, c'est noir. Donc, ça marche. Notre premier composant interactif. Bon, alors passons à la prochaine. 3. 03 bouton radio: Allons donc pour l'imbrication des composants pendant que nous avons ce son interruptif et horrible. Le prochain sera donc le bouton radio. Il va être, va adopter la même approche que l'est. Nous allons donc créer un cercle de 24. Et oui, et ce que nous voulons, c'est créer toujours le composant le plus complexe possible. Ensuite, puis retirez certaines parties. Alors, al'Banna caressez-nous, disons quelque chose comme ça. Et le champ dans ce cas va être blanc. Et c'est important. Comme plus tard, nous aurons comme un bel effet de vol stationnaire cool. Je vais juste dupliquer cette ellipse. Je vais juste commencer à renommer. Il s'agit donc du cercle sélectionné. Ce sera notre arrière-plan, notre cercle de fond. Et celui-là, qui se trouve dans le fond. Cela va être notre état de vol stationnaire. Ok, donc je vais démarrer comme un arrière-plan survol. Vous allez le voir maintenant. Maintenant, ce que nous voulons, c'est aussi. Oui, sélectionnez ces couleurs, mettez-les à l'extérieur et mettez-les comme trois. Cela va donc être notre état de vol stationnaire. Nous allons obtenir quelque chose de plus et pas si dur. Ce serait donc notre sélection avec un domaine de vol stationnaire. Peut-être que j'ai mis comme quatre ici dans notre milieu Hubbard ici, comme quatre pour que nous puissions en voir plus. Et ce serait notre excellent composant avec tous les éléments, avec la sélection du matériel, tout. Ce que nous allons maintenant faire ici , c'est créer un composant et le renommer en bouton radio est sélectionné. Survol. D'accord ? Nous avons donc notre premier composant et ce que nous voulons faire , c'est le dupliquer comme on peut le voir. Donc, nous voulons obtenir que c'est cette instance. Et maintenant, nous allons commencer à apporter des changements ici. Donc, ça va être blanc. Nous allons créer l'état de survol, mais quand il n'est pas sélectionné. Nous avons donc cela et nous allons également créer. Maintenant, un composant dans le crâne, dans ce cas, n'est pas sélectionné. Ou par défaut. Vous pouvez le renommer ou le nommer comme vous le souhaitez. D'accord ? Je vais donc juste les dupliquer à nouveau et maintenant nous allons créer l'état où l'état par défaut n' est pas sélectionné et n'est rien de Hubbard. Donc, pour D, c'est ce que je vais faire, c'est ces AVC, je vais juste l'amener en blanc. Ok, donc ce serait notre bouton radio par défaut. Donc, non sélectionné. Par défaut ou tout simplement comme ça. Et un autre état que je n'ai pas est juste un bouton sélectionné, pas avec l'état de survol. Je vais donc juste dupliquer ces déduits. Nous l'avons donc désormais comme une composante indépendante. Et encore une fois, ces antécédents portuaires que nous avons, et cela va l'amener au blanc. Nous avons donc désélectionné par défaut et l'état de survol. Et maintenant, je vais créer à nouveau, a un composant. Il s'agit du port sélectionné, et non du port. Il s'agit de l'état par défaut, donc nous allons simplement le renommer. Et nous avons toutes ces dates ici pour le Holober. Je veux apporter quelques changements dans ces deux-là parce que nous, vol stationnaire, j'aime marquer un peu plus. Vous savez, vous savez, cette frontière ici. Nous avons donc créé nos quatre composants. Nous allons donc à nouveau les combiner en tant que variantes. Et je vais juste les réorganiser un peu parce que d'habitude vous avez leur bouton radio comme celui-ci. Ensuite, vous arrivez à l'état d'horreur. Lorsque vous cliquez, vous atteindrez le pic et l'état de survol. Et quand vous survolez ou que vous sortez de la souris, vous arrivez à cet état. Et si je clique ici, ou si vous l'avez probablement fait ici, il vient ici. D'accord ? Commençons donc à nouveau avec notre prototype ici. Ce que nous voulons, c'est que lorsque nous planons ici, il s'agit de celui-ci. Donc, au lieu de cliquer, nous avons tendance à faire un tour de vol intelligent à 100 millisecondes. Lorsque nous cliquons ici. C'est bien. Lorsque nous cliquons, nous voulons le changer en état, d'accord ? Et la même chose ici. Lorsque nous sortons du port, quand nous ne sommes plus sans pointeur ici ce que nous voulons, nous voulons arriver à cet état, d'accord, donc voici sa propre feuille de bouche. OK, vient ici. Et ce que nous voulons cela quand nous les avons planés, c'est dans cet état. Donc, ce que nous faisons, c'est simplement le faire glisser ici. Et pendant que la prostituée arrive à ces espoirs sélectionnés. Encore une fois, revenons sur notre terrain de jeu et venons ici à atouts et apportons notre nouveau bouton radio philosophie. Et voyons si cela fonctionne. Quand je survole, ça fait le vol stationnaire. Quand je clique, c'est parfait. Et j'en ai raté un. J'ai manqué un état est quand je clique ici, il doit revenir à la forme de S par défaut non sélectionnée. Nous revenons donc ici. Donc nous venons ici et quand nous prenons ici, ce que nous voulons, c'est arriver dans cet état, d'accord, donc c'est ce que nous allons faire, clic va changer ici. Nous revenons ici notre tutoriel et maintenant nous cliquons et comme vous pouvez le voir, nous l'avons là, d'accord ? Et il manque quelque chose parce que maintenant je ne suis pas en train de planer. Et comme vous pouvez le constater, l'état de vol stationnaire est là. Il y a donc une autre étape que nous devons faire , c'est que nous sommes en train de planer. Mais quand ce que nous voulons ici, c'est quand la feuille de Mao, alors que nous n'en sommes plus là, revient à celle-ci. Bon, voyons si ça marche maintenant. Ok, ça marche. Et lorsque nous la feuille de souris, comme vous pouvez le voir, elle a un état par défaut. Notre composant interruptif fonctionne donc désormais parfaitement. Passons donc à un autre composant. Allons avec le composant d'entrée. Il s'agit d'une question assez complexe. Allons-y. 4. 04 entrée: Bon, alors commençons également à concevoir nos commentaires. Encore une fois, permettez-moi de changer de côté plutôt que de prototype. Encore une fois, comme nous l'avons fait avec les boutons, mettons une hauteur à 40. Mettons notre rayon limite pour la lécithine un coup. Ici, vous pouvez créer l'entrée que vous voulez et le style que vous voulez ici, nous allons le faire avec un blanc. Habituellement. Comme je l'ai dit, j'aime créer les composants les plus complexes et les plus complexes au tout début, puis commencer à supprimer des pièces. Commençons donc. Cela va avoir comme un porte-place. Et c'est généralement un peu, oui, pas si sombre. Et aussi, une autre chose que nous voulons, c'est d'avoir ici, comme le nom du détenteur de la place, comme le nom de l'entrée ou de cette entrée, par exemple, est une étiquette d'importation, d'accord ? Ou appelons ça juste une étiquette. Dans certains intrants, comme dans le matériau, ce qu'il fait, c'est le porte-place ou l'étiquette est généralement à l'intérieur, puis vient, devient l'étiquette. C'est donc l'espace réservé bébé au tout début et des chaînes comme le travail. C'est donc quelque chose que nous allons faire. Et pour .org, nous allons créer. Voici une mise en page automatique. Et pour cela, il suffit d'appuyer sur Maj a et vous voyez que maintenant nous sommes là, nous avons maintenant la mise en page automatique ou vous pouvez venir ici et entrer et appuyer sur le clic droit et Alpha et la mise en page automatique. Et ce que nous voulons ici, c'est mettre comme un fond blanc dessus. Donc, oui, sein plus. Et nous pouvons voir que c'est trop grand et que nous n'avons pas besoin de beaucoup d'espace ici et là. Nous allons donc le mettre en deux. Et cela va être en deux. Donc, dans ce cas, nous avons l'étiquette ici c' est qu'elle ne polarise pas dans le porte-place. Ainsi, comme nous l'avons fait avec ces boutons radio, lorsque nous les survolons, nous voulons une bordure, concentrons sur les composants. Je vais donc juste le dupliquer et j'arrive ici, dans la façon dont cela se fait. Cela va donc s'appeler label. Nous avons l'espace réservé R ici, puis j'ai nos antécédents. Et ça va être le survol de fond. OK ? C'est donc le dernier. Ce n'est pas le fond qui va avoir ces quatre à l'extérieur comme nous l'avons fait ici. Je vais juste copier le style. Donc, pour cela, vous respirez le Commandement C. Et ici, nous allons le coller. Est-ce que notre arrière-plan a plané ? Donc oui, il est payé est basé sur le style et c'est juste ça. Bon, on a presque tous les éléments. Donc, oui, créons déjà un composant avec ça. Et ça va être notre survol d'entrée. Oui, survol du champ d'entrée. Bon, donc encore une fois, dupliquons ça et détachons-nous. Et ce que nous voulons maintenant, c'est de faire baisser ces étiquettes, ce qui va être notre espace réservé. N'oubliez pas que notre espace réservé va disparaître. Nous allons donc lui donner l'opacité de 0. Et cette étiquette aura la même taille qu'un porte-place. Nous en avons donc 16, 24. Nous allons donc maintenant les augmenter à 16. OK ? Et ce que nous voulons qu'ils soient, qu'ils soient au même endroit que ces espaces réservés. Donc, pour cela, et cela va se débarrasser de cela afin que nous puissions bien l'aligner. Nous supprimons donc ces mises en page automatique. Maintenant, c'est au même endroit, d'accord ? Et nous voyons ici dire la date et faciliter ces SAP. Nous les avons donc au même endroit. OK. Il s'agirait donc de l'état de vol stationnaire, mais pas de champ ou autre. Oui, c'est l'état par défaut, l'état de survol par défaut, d'accord. Et je vais juste créer un composant avec ça , puis le dupliquer à nouveau. L'ensemble de données, rappelez-vous, j'aime les créer et dupliquer ces composants. Parce que parfois, lorsque vous dupliquez ces composants de détails, ils ont modifié les noms. Et nous devons avoir les noms exacts à l'intérieur du composant afin de pouvoir également effectuer la transition. Ok, donc la prochaine étape sera notre état par défaut. Ils sont très basiques, d'accord ? Donc, dans ce cas, le coup va être le passage. L'opacité de ce trait va être 0. OK ? C'est donc notre état par défaut. Et ce serait notre domaine, cet état en fait. Alors quand, lorsque l'entrée est déjà champ et que nous voulons une autre étape ici, c'est pourquoi taper. Nous allons donc répliquer lorsque nous cliquons sur une frappe importante de ces tapes. Tant que vous commencez à cligner des yeux. Et nous voulons reproduire cela aussi, d'accord ? Et au tout début, nous avons ces espaces réservés, comme nous aider. Je vais donc juste copier ça et le coller ici. C'est donc bien. Et la même couleur et, et ce sera notre domaine de dactylographie. OK ? Nous verrons maintenant que c'est peut-être un peu fou. En ce moment, l'intrigue va bien se passer, donc oui. OK. Donc, nous en avons déjà à peu près tous. Donc, listez, encore une fois, sélectionnez tous les composants combinés en tant que variantes. Cette propriété va être l'État. Il s'agit de la valeur par défaut. Et nous avons l'exagéré. Nous avons ces mouchoirs celui-là. Je ne l'ai pas, désolé. J'ai oublié de manger, c'est ça. Je vais donc le créer en tant que composant et vous pouvez le faire glisser ici. Et maintenant, nous avons un autre repos. Nous l'avons vu. Nous allons voir que nous avons quatre États. Ils sont Fault, qui est celui-là. Nous avons l'état de survol ici ou l'état par défaut. Ensuite, il pourrait s'agir du champ quand, quand, lorsque l'entrée est champ, ici nous allons avoir ce survol. Et c'est ce qui va être le point de mire lorsque nous tapons. Alors connectons ce prototype pour voir comment il fonctionne. Et plus tard, nous allons ajouter d' autres interactions dans ses composants, donc dans ce cas, ce que nous voulons, c'est que pendant le vol stationnaire, nous voulons revenir ici. Onclick. Pourquoi ? Quand, lorsque nous cliquons ici, nous voulons revenir dans la gomme dans cet état. Honnêtement, nous allons y aller. Et oui, On Click out quand on a survolé ça, en planant sur la feuille de Mao, on veut arriver dans cet état, d'accord ? Et dans cet état, ce que nous voulons, nous ne voulons pas cette frontière. Nous allons donc faire passer l'opacité à 0. Donc, c'est le domaine qui indique, d'accord ? Et c'est qu'ils ont été successoraux. Et pour la Journée du diabète, il y a quelque chose d' intéressant avec cet effet clignotant. Pour ces derniers, nous allons créer d' autres composants interactifs. Il ne s'agira que d'une seule ligne. Disons que c'est quelque chose autour de ça. Voyons voir. Oui, quelque chose autour de ça va marcher. Et pour cela, nous ne voulons créer que 22 composants, un avec le noir et l'autre avec le Norba, une basicité de largeur 0. Ce sera donc comme faire ces changements. Voyons ça. Alors appelons-le cligner des yeux, être noir. Et l'autre va être, je vais ajuster cela et changer l'opacité à 0. Et créons un composant avec lui, c' est-à-dire le clignotement lumineux. Et ces deux composants, nous allons les combiner en tant que composante clignotante. Et nous avons ici, ça va devenir noir et ça va être la lumière, et ça va être cette date. Et ce que nous voulons qu'il s'agisse d'une animation continue entre ces deux éléments. Ce n'est donc pas lorsque le clic n'est pas un moment de survol. Nous voulons juste que la fin s'assiette tout seul. Donc, pour cela, ce que nous faisons, c'est arriver au prototype. Et nous avons ces composants, l'autre composant, invisibles. Donc, ce que nous allons faire, c'est juste pour le connecter. Et au lieu de cliquer, nous allons nous rendre après un retard. Alors que voulons-nous ces composants quand ces composants, c'est là, sur le canevas, ça va commencer tout seul à fonctionner après un certain retard. Dans ce cas, ce que nous voulons que cela commence immédiatement. Il s'agit donc d'une milliseconde, c'est le montant minimum que nous pouvons utiliser ici. Nous ne pouvons pas mettre 0, donc c'est une milliseconde et dans les étoiles, l'interaction de jour. Ok, donc ce que nous disons ici, c'est que lorsque ces composants sont à l'écran vont commencer dans une milliseconde. Donc, instantanément, il va commencer puis passer à cet autre état avec un animateur intelligent. Et ici, je vais augmenter ces 232300 millisecondes. Et que voulons-nous cela après 300 millisecondes de cet état, nous voulons revenir au premier. Nous créons donc cette illusion de clignoter comme le noir, opacité, la capacité noire, le noir. Vous savez, nous allons voir comment cela fonctionne maintenant. Donc, au lieu de cliquer à nouveau, nous allons après le retard et nous mettons ici comme une milliseconde. OK. Voyons donc comment cela fonctionne. Justin, notre terrain de jeu. Bon, voyons comment ça fonctionne. Nous venons donc ici sur notre terrain de jeu, nous appuyons sur Play, et nous pouvons voir que cela ne fait rien. Je ne sais pas ce qui se passe ici. Oui. Maintenant, ça marche. ces deux travaux prennent parfois un certain temps car, comme vous pouvez le constater, nous n'avons qu'une seule image et tout fonctionne ici. Nous avons notre type clignotant en état. Donc, ça marche. Revenons donc à notre interruption de ce composant ici. Je vais juste m'en débarrasser. Nous n'en avons plus besoin. Je pense que nous voyons que ça marche. Et ce que nous faisons, c'est que je vais encore faire glisser ces composants de liaison ou nous pourrions venir ici à des actifs, faire ressortir un clignement ici, et je vais juste l'ajouter à notre intuit, cette composante, OK ? C'est à ce moment que nous cliquons ici et que nous commençons à taper. Disons que nous avons cette composante clignotante ici. OK ? Voyons donc dans nos couches, oui, nous avons notre clignotement ici. OK ? Voyons donc comment notre contribution fonctionne jusqu'à présent. Revenons et appuyons sur Play. Donc maintenant, oui, il y a quelque chose que je ne me débrouille pas bien ici. J'ai oublié de le connecter. Ce n'est pas le domaine. Je veux que le domaine que je veux par défaut soit l'état par défaut. Donc, oui. Et j'ai ici quelque chose qui ne fonctionne pas vraiment correctement. Donc oui, nous avons l'état par défaut. Voyons notre prototype. Pendant que vous survolez des chaînes ici, tout en cliquant sur les changements de frappe, d'accord ? Et lorsque vous tapez ici sur la feuille de souris va changer ici. Ok, donc oui, ça marche, ça marche bien. Donc, exactement lorsque nous planons ici, nous voyons que nous avons cet état. Lorsque nous cliquons, c'est une étoile comme nous écrivons. Et imaginez que nous avons écrit quelque chose à l'intérieur de l'entrée et quand nous survolons son champ, d'accord ? L'entrée est donc terminée. Et ici, la chose la plus intéressante pour moi, c'est comment implémenter ces éléments clignotants à l'intérieur de ces entrées, d' accord, pour que vous puissiez créer une interaction plus complexe. Allons donc avec un S1. Dans ce cas, il va être d un fileur. C'est plutôt sympa. Allons-y. 5. 05 spinner: Hé, alors arrêtons que sans un spinner pour ça, je vais juste créer un rectangle. Pour voir aussi notre spinner. Je vais créer le cercle avec vous de 32 sur 32 avec cette belle taille. Et je vais juste ajouter un coup ici. Eh bien, pas encore. Ici, ça va être un trait blanc. Vous pouvez donc voir que nous avons ces arcs ici. Donc, ce que nous pouvons venir ici. Et ici, nous allons en faire 65 %. Nous voyons donc que nous avons cela et que nous n'avons plus besoin d'un accident vasculaire cérébral. OK ? Vous pouvez donc voir que vous pouvez le déplacer et plus tard c'est ce que nous allons faire. Et si vous pouvez le laisser comme ça ou si vous voulez créer comme un rayon de bordure ici, vous pouvez simplement appuyer sur. Ou vous pouvez le faire, vous savez, vous pouvez le faire comme bon vous semble, alors c'est bon pour moi. Ce sera donc notre premier domaine de ces fileuses. Ce sera donc le dernier fileur. Ou vous pouvez l'appeler correctement ou vers le haut ou autre, disons les écrire. Ok, ça va être notre premier état. Une fois encore. Nous tamisons les seins ou Alt pour le dupliquer puis le détacher. Nous faisons cela pour que le nom reste le même, d'accord ? Ellipse 1. Et ici, nous voyons le nom de cet élément, le même, car si vous dupliquez au tout début, il va changer le nom en ellipse 2 et 3 et 8, 4, et plus tard, il ne choisira pas l'animation D. Il est donc important que lorsque vous allez animer quelque chose intelligemment, vous avez besoin des mêmes noms, d'accord ? Et le même genre d'éléments ici. Donc, oui, ce que nous allons faire, c'est dans l'état suivant qui va tourner vers le bas. Donc, pour cela, ce que nous allons faire, c'est faire pivoter celui-ci et celui-ci. On le veut comme moins 90 degrés. Et ça va être notre bas, à droite, en bas. OK ? Encore une fois, nous le dupliquons avec ça, c'est tout. Nous sélectionnons à nouveau l'élément et nous le relions davantage à un 180. Et ce sera notre regret ici. Et ça va être notre bas gauche. Et nous avons besoin du dernier état. Il y a, encore une fois, dupliquer le néerlandais et sélectionner l'élément puis filmer aussi, 90 degrés. Et encore une fois, nous le sélectionnons et nous créons un composant à partir de celui-ci. Et ça va être LefTop. Et nous avons déjà tout ce dont nous avons besoin. Laissez-moi juste ajuster cela pour que nous puissions mieux les animer. Permettez-moi d'aligner un peu ça. Et ça, apportons ces deux-là ici. OK ? Nous allons donc créer un corps et avec tous ces composants qui vont les combiner comme variantes, ce sera la position. OK ? Commençons donc par celui-ci. Nous voulons commencer ici, venir ici, venir ici, venir ici, venir ici. OK. Ou est-ce que vous pourriez commencer ici, s'il vous plaît. Mais c'est le cas, commençons par le A. Nous venons donc ici pour prototyper. Et ce que nous voulons, rappelez-vous ce que nous avons fait avec l'état clignotant. Nous voulons être autonomes pour qu'il s'anime tout seul. Encore une fois, après un délai d'un millisecondes, nous voulons plutôt animer le S en animant intelligemment celui-ci. Mais au lieu d'entrer et de sortir de l'ISI, ce que nous voulons, c'est un mouvement linéaire. C'est donc linéaire. Nous n'avons pas telles ruptures dans tout le domaine, donc nous l'avons, nous voulons le linéaire ici. Commençons par 300. instant, plus tard, si nous voyons vers une baisse de quelque chose, nous pouvons modifier cette valeur. La prochaine étape consisterait donc à passer à ces domaines. Et encore une fois, nous passons après un délai, une milliseconde, linéaire, 300 millisecondes dans Smart Animate. Et de cet état à celui-ci, encore une fois, après un retard, un denier millisecondes ou 300. Et encore une fois, nous l'avons fait, ce sera une boucle. Encore une fois, nous avons ici, nous voulons ici après un délai d'une millisecondes et 300 avec une milliseconde linéaire. Bon, essayons notre fileuse ici. Nous venons donc ici sur notre terrain de jeu et beaucoup moins de notre spinner ici. Bon, donc, je vais faire quelque chose, je vais juste m'en débarrasser. Je vais les changer trop bleues. Ou même je vais être un peu plus créatif. Disons. Et essayons quelque chose de différent ici. allons choisir ce bleu pour que nous puissions nous en débarrasser. Et ce que nous voulons cela quand ces mouvements vont changer de couleur. Donc oui, deux, pour voir une meilleure animation ici. animation plus fraîche, alors que les couleurs ne sont pas les meilleures. Mais oui, ça sauvera nos barbiers. Bon, donc ici, je veux commencer par le bon DOP. Bon, commençons par ça. Voyons donc comment cela fonctionne. Encore une fois, cela prend du temps. Donc, l'animation commence. Et maintenant, nous voyons que nous avons notre spinner et qu'il change parfaitement sa couleur. C'est très bien. Revenons donc. Et comme vous pouvez le constater, c'est tout aussi bas. Donc, si vous voulez que ça aille plus vite, c'est assez simple. Mettons ce petit peu ici. Nous revenons donc ici pour un prototype. Et ce que nous voulons faire, c'est changer cela en 150. Et encore une fois, nous allons sélectionner celui-ci, 150, 150, 150. Nous revenons donc ici. Nous pouvons voir que c'est maintenant beaucoup plus rapide. C'est mieux. Bon, nous avons donc créé notre spinner. Passons donc à un S1, qui va être notre barre de chargement, qui est assez similaire à ce composant que nous avons créé maintenant. Je vous verrai donc lors de la prochaine leçon. 6. 06 barre de chargement: Nous allons donc créer une barre de chargement. Donc, pour cela, je vais juste créer un bar sur les grands associés qui ont raison. Et ce que nous voulons, c'est avoir un contexte constant ici. Alors, que voulons-nous qu'ils créent ? Vous savez, un bar avec notre bleu. Nous allons choisir notre bleu ici. Et nous devons créer différents domaines. Ce que nous voulons, cette barre jusqu'au début apparaisse, puis nous emménageons ici. Et puis l'année sappy, ici, quelque chose comme ça. D'accord ? Donc, oui, c'est ce que nous allons faire. Nous avons donc besoin de différents états pour cela et ces barres, d' accord, ça va être, Allons ici en couches. Le gris va être notre arrière-plan. Et nous avons besoin de celui-ci qui sera notre barre de chargement. D'accord ? Je vais donc créer, ça va ressembler à l'état intermédiaire. Disons. Je vais les dupliquer dans ce cas, comme vous pouvez le voir, c'est conserver les noms, donc ce n'est pas l'ajout d'un ou deux ou trois, donc nous sommes bons à y aller. Et notre premier rendez-vous, ce que nous voulons, c'est juste un vide et vide oui. Et une barre vide et vide. D'accord. Donc pour ça, ce que je vais faire, c'est faire entrer ça ici et faire ça 0%, d'accord ? Et puis, en tant qu'état, ce que nous voulons, c'est que cette barre commence à se charger. Ce sera donc notre premier état. Ce sera notre deuxième état. Ensuite, ce bar va arriver dans cet état. Ok, donc ça va entrer au milieu et être plus grand. Et que voulons-nous comme état final ou intermédiaire, c'est celui-ci, et cette barre arrive ici, donc la barre va s'étirer un peu. Et l'état final, c'est assez similaire au premier. Mais à droite. Donc, ces barrettes invisibles, nous avons peur. Nous le voulons, nous voulons qu'il soit aligné sur les arrivés. Je vais donc juste m'aligner ici à droite. Et maintenant, comme nous pouvons le voir, nous avons cette barre invisible. Nous sommes donc prêts à y aller. Nous allons commencer à créer des composants avec lui. Créons ce premier composant. Créons-en un autre. Créons celui-là. Créons celui-ci et celui-là. Donc pour cela, je vais juste combiner ça comme baryon maintenant et les renommer pour charger embark. D'accord ? Et c'est le premier état. Ça va aller, ça va être le deuxième. Ce sera le troisième. Il va être le quatrième, et ce sera le cinquième État. D'accord. Et ça va être cette date. Je vais donc juste réorganiser ça. Pas important et en fait, mais pour garder les choses bien rangées. Et maintenant, il est temps de l'animer. Encore une fois, nous allons utiliser ce que nous avons utilisé dans le spinner. Ces interactions, qui sont de 1 après un délai, encore une milliseconde, nous voulons la rendre aussi intelligente. Et ça va être de 20 à 100, désolé. Et cela va être linéaire pour l'instant. Et encore une fois, on fait les mêmes choses après un retard d'une milliseconde que Martin, il a rendu linéaire. Oui, donc, et voyons, voyons comment ça fonctionne. Une milliseconde. N'oubliez pas que c'est important. Je ne sais pas pourquoi il ne conserve pas la valeur. Je dois donc le changer chaque fois que j'arrive après un retard. Voyons donc si tout va bien ici. Oui, tout ce n'est qu'une milliseconde. Encore une fois, nous venons ici sur notre terrain de jeu, venons à nos atouts et nous amenons notre barre de chargement ici. Quelque chose d'important. Pour que cela devienne une boucle, nous devons reconnecter la dernière à la première. Ok, donc encore une fois le calque une milliseconde, voyons comment cela fonctionne. Encore une fois, je dois appuyer sur R pour redémarrer le composant. Ouah, c'était plutôt cool. Vous voyez ? C'est donc ce genre d'escalade dans l'animation au milieu et disparaît. C'est très bien. Je suis donc très satisfait du résultat. Voyons donc voir. Un autre composant. Dans ce cas, il va être et il sera plus léger. Alors, je te vois que c'est moins que. 7. 07 Slider: Continuons notre voyage de composants interactifs, et créons le tennis plus tard. Le curseur est donc assez similaire à celui que nous avons créé ici. Encore une fois, créons comme un rectangle d'une grosse source. Dans ce cas, nous allons vers un autre rayon de frontière de 10. Donc, il y a la taille du déménagement là-bas. Alors créons comme 24. Il est donc assez grand pour que nous puissions travailler avec ça et le curseur. Exactement la même chose que ça. La barre de chargement a, nous avons besoin de deux rectangles, un pour l'arrière-plan et 14 quand, lorsque le curseur est bleu. Lorsque nous avons fait cela et que vous savez, nous en avons, comme des compteurs. D'accord ? Revenons donc ici à nos couches et voyons comment cela se passe. Ce que nous voulons ici, c'est notre contexte. Pour renommer cela en arrière-plan. Ce sera notre compteur. Vous pouvez appeler ça ce que vous pensez aller vers vous. Et ça va être l'air dragable. Je vais juste appeler ça de la drogue. D'accord ? Donc, avec ces éléments, nous avons tous, eh bien, et ceux-ci, je vais juste le rendre un peu plus doux et ça va être un peu plus sombre, quelque chose autour de ça. Ok, donc nous avons notre curseur ici. Encore une fois, ce que nous voulons que cela soit complet, c'est comme si c'était fait, puis commencez à faire des critiques. Pour commencer à déplacer les composants et les critiques ou leur donner de l'opacité ou pour travailler. Ok, donc nous avons notre curseur complet ici, donc nous allons créer un composant, d'accord ? Et dans ce cas, le curseur serait là. Et quoi ? Ensuite, nous allons dupliquer cela en tant qu'instance. Rappelez-vous que nous l'avons fait, c'est tout. Et encore une fois, nous allons déplacer nos composants vers la hanche pour remplacer à l'état initial, disons, d'accord. Donc pour D est ce que nous faisons est oui, grand bar R ici et commencez à le revoir ici. Bon, donc c'est le paradis. Et ce serait notre domaine initial. Nous créons à nouveau un composant. Et nous avons deux composantes, et c'est la fin, alors c'est un état orientaliste, d'accord ? Et encore une fois, nous les sélectionnons tous les deux, les combinons des variantes de masse, un état. Et le premier va l'être, donc ce sera le domaine initial ou par étoile, puis c'est parti. Notre n, d'accord ? Et encore une fois, nous allons venir prototyper ce que je veux, ce cercle, quand je commencerai à faire glisser ce cercle, il devient ici. Il devient l'État. D'accord ? Donc, pour cela, nous allons aussi l'animer intelligemment. Et au lieu de la clique, on va prendre de la drogue, d'accord ? Quand nous commencerons à conduire ceux-ci vont entrer dans l'état ou simuler comme nous le conduisons. Et encore une fois, lorsque nous laissons tomber cette balle ou un cercle vers la gauche, ça va commencer à devenir cet état. D'accord ? Donc, au lieu de Glick, son propre médicament, d'accord, alors voyons comment ces performances à nouveau, nous arrivons à des actifs et nous avons commencé notre ESL, soit je vais juste le renommer maintenant. C'est donc notre plus léger. Ok, donc nous venons ici, nous arrivons au panneau et cette composante, nous allons les lire dans un curseur. Bon, voyons comment ça marche. Une fois encore. Donc, si nous commençons par Dr, nous voyons que cela fonctionne parfaitement. D'accord ? Et si nous commençons à traîner et que nous voyons que nous avons des ECM ici, ce qui est super cool. C'est donc déjà fait. Passons donc à notre prochain tutoriel de tri sur la façon de créer des animations. Tous les champs, trois zones ou icônes ou quelque chose du genre. Allons-y. 8. 08 Illustration: Allons donc avec notre dernier composant interactif. Dans ce cas, je vais juste insérer une icône pour l'animer. Dans ce cas, nous allons utiliser l'icône Sparty que je vais simplement ajouter à partir d'un plugin quantifié. Je vais donc juste animer un peu DES. Nous pouvons donc voir comment implémenter ces animations dans nos prototypes. D'accord ? Donc pour ces derniers, ce que je vais faire est de dissocier cela et de l'ajouter dans un cadre plus grand pour que nous puissions mieux animer. Et nous pouvons voir maintenant que nous avons ces éléments dans un cadre plus grand. Bon, donc ça va être notre illustration. En tant que dernier. Ça va être notre, eh bien, je vais juste en mettre un pour l'instant. Et comme je l'ai déjà dit, il est important de nommer les choses. Vous pouvez donc voir que cette icône est composée de nombreux vecteurs, mais tous portent le même nom. C'est donc assez fastidieux, mais il faut les renommer pour pouvoir ensuite être animés de manière appropriée. Donc, dans ce cas, je vais commencer comme étant grand partout où vous le pouvez, utilisez simplement le nom que vous voulez. Je vais juste m'en débarrasser. Ce sera le bec rouge. Vous pouvez indiquer le nom que vous voulez. D'accord ? J'ai donc déjà tout renommé avec des noms uniques. Ok, donc ce que nous pouvons faire ici, c'est dupliquer notre illustration et de voir quels sont les états que nous avons, nous voulons qu'elle ait, d'accord ? Donc dès le début, ce que je veux, c'est que tout son élément soit plus petit. Ils vont donc venir d'ici, d'accord ? Et ils vont être à moitié comme une opacité de 0. Il va donc venir d'ici à ici. Et puis, ce que je veux, c'est comme une explosion, disons. Donc, tout va être un peu plus grand et comme s'épanouir. Certains d'entre eux sont plus petits. Alors venez ici. Et là encore, comme ça. Et devenez beaucoup plus gros si nous le voulons. Encore une fois, je vais être au hasard tous ces éléments et les faire descendre un peu plus gros , puis commencer à les positionner au hasard. Ok, donc on va voir qu' une super partie D de confettis voler est assez aléatoire. Voyons comment cela compte. Nous avons donc ces états ici. Et je vais ajouter un autre domaine final. J'espère que les choses ne changent pas. Les noms ne l'sont pas. Donc, ce que nous voulons que cela tombe, accord, donc nous voulons, comme tomber en cette année supérieure, quelque chose autour de ça. Cela va donc faire une tournure. Je me sens donc comme ça. Voyons comment ces cartes K, parce que d'autres comme vous pouvez le voir, je le rends super aléatoirement. Et ce que je veux que cela s'appelle ces éléments et les fasse disparaître. Ils commencent donc comme une sorte de mise à jour dès le début. Voyons comment cela arrive. Je vais donc créer plusieurs composants de cela. Donc, pour ça, je vais juste ranger. Je vais rendre ça un peu plus grand. Nous ne sommes donc pas contraints ici. Et faisons en sorte que ça se passe bien, peu importe. C'est donc notre troisième État. Bon, de toute façon, je vais juste l'utiliser et le ranger un peu. Et nous pouvons sélectionner tous ces cadres et créer plusieurs composants. Et ces composants, nous pouvons recombiner comme variance. Et cela va être notre illustration. C'est donc l'état initial. Donc je vais juste dire, et ce sera l'état initial, l'état deux, l'état trois et l'état quatre. Bon, donc c'est bon pour l'instant. Nous devons donc revenir au prototype et commencer à animer cela. Encore une fois, ce que nous voulons, c'est apporter le retard. Après un retard d'une milliseconde ces étoiles vont commencer à fonctionner. Nous voulons donc ajouter de l'intelligence, l'animer moins. Plomb. Le plomb n'est pas linéaire pour l'instant pour voir comment il fonctionne. Encore une fois, après un retard, une milliseconde arrive à celle-ci. Et encore une fois, après une milliseconde, nous voulons qu'il arrive à l'État. Et la même chose que nous voulons faire avec le dernier. Dans ce cas, nous voulons créer une boucle pour certaines animations comme celle-ci. Vous voudrez peut-être commencer et demi et N. Donc, dans ce cas, vous ne voulez pas de boucle. Vous allez importer cette dernière action ici, d'accord, mais dans ce cas, nous voulons voir cette boucle, comment ça marche ? Voyons donc comment cette illustration va apparaître. C'est peut-être horrible. Je ne sais pas. Voyons comment cela fonctionne. Je suis très excité de voir comment ça arrive. Très bien. C'est assez décalé. Oui, vous pouvez voir l'idée, non ? Ce n'est pas si cool. Ou de toute façon, j'espère aider à être meilleur, mais vous avez l'idée parfois lorsque vous entrez dans une transition vers une page ou quelque chose comme ça et que vous voulez voir quelque chose comme ça. C'est peut-être bien. Je vais donc apporter quelques changements ici. Pour voir, eh bien, cela commence à paraître beaucoup mieux. Et essayons quelque chose ici. Voyons si, au lieu de linéaires, nous mettons des transitions faciles et faciles, comment cela fonctionne. Voyons donc voir. Eh bien, ça commence à paraître beaucoup mieux. Nous faisons cela plus d'états intermédiaires pour le rendre plus naturel, quelque chose comme ça. Mais je pense que vous comprenez l'idée. Donc, oui, c'était notre dernière leçon de ce tutoriel. Passons donc à la fin des partitions à la vidéo de félicitations. 9. 09 Outro: Félicitations, vous êtes arrivés jusqu'au bout. J'espère que j'apprendrai à moitié tout sur les composants interagissant. Je vous encourage à essayer de reproduire la science que nous avons vue dans le tutoriel qui crée la vôtre afin explorer d'autres possibilités des composants interactifs. J'espère que vous avez apprécié dans l'ensemble et que vous avez aimé la vidéo, veuillez laisser un commentaire. Vous l'aimez même. Laissez également un avis. Et si vous avez un site oui, le lui pour plus de tutoriels ou vous êtes intéressé par quelque chose le lui pour plus de tutoriels ou vous êtes intéressé par quelque chose que vous n'avez pas trouvé de tutoriel là-bas, faites-le moi savoir et je choisirai de le faire. Et oui, si vous voulez être averti quand une autre image apparaît oui. Mousse sur la plateforme et vous serez mis à jour. Merci beaucoup d'avoir suivi le discours et je vous souhaite une bonne journée.