Adobe XD : Animations

1. Introduction : Adobe XD Animations: Hey, les gars d'aujourd'hui vont examiner quelques trucs et astuces wjxt pour leur fonction d'animation automatique , donc cela sera utile si vous voulez l'utiliser pour, comme, un test utilisateur et que vous voulez obtenir un prototype à un fidélité plus élevée et commencer à tester. micro-interactions rendaient les choses plus réalistes. Cela peut également être utile pour les présentations. Si vous voulez créer quelque chose comme une bobine de sizzle ou quelque chose qui va susciter un client vraiment excité. Eso l'un d'eux sera bon pour cela. C' est mieux si vous avez une connaissance pratique du Dhobi X ici aussi, aussi, mais je le ferai et j'ai effacé les fichiers de début et de fin pour vous. Si vous n'avez pas autant d'expérience, ne vous inquiétez pas. Vous pouvez toujours ralentir et suivre. Um, ouais, je pense que c'est tout. Alors commençons 2. Connectez-vous : Animations de base: Ok, Donc pour commencer, on peut ouvrir le fichier d'animation de courrier d'escargot, mais j'ai inclus pour tout le monde pourrait maximiser l'écran. Donc j'ai fait ça juste pour qu'on ne perde pas de temps à concevoir un tas d'éléments. Et cela peut vraiment être sur des conseils et des astuces de l'ennemi automobile. La première chose que nous pouvons faire est de faire glisser ces autres tableaux d'art ci-dessous parce que ce qui va commencer par est la loi et l'écran juste ici. Donc, juste est un arrière-plan rapide sur ce que l'animation automatique fait et pourquoi il est si utile, c'est qu'il change fondamentalement juste les éléments entre nos tableaux. Donc si on fait une copie de notre journal d'art dans un, on a cet escargot juste ici. Et si vous regardez en arrière sur cet aéroport, il s'appelle exactement la même chose. Mais si nous le bougeons comme ça et puis nous avons un prototype, le multi-acte celui-ci sur la transition du robinet que nous voulions animer à la place et en utilisant les durées de la colonne vertébrale. Très bien. Pourtant, pour aller le précédent vous cliquez, vous remarquerez que nous obtenons cet ennemi auto. Et donc l'un des plus grands avantages de ce programme est que vous pouvez réellement faire ce super rapide et vous pouvez le faire avec tous les mêmes éléments sur notre carte. Vous n'avez pas à concevoir quoi que ce soit que nous allons supprimer ce mois-ci. Donc, j'ai en quelque sorte parcouru quelques animations de base et mis en place certaines dans ce fichier qui pourraient être utilisés soit pour un test utilisateur, soit ils pourraient être utilisés dans une présentation. Kallakis est un rial pour enthousiasmer les gens à propos de votre travail, mais nous commencerons à dupliquer cet aéroport une fois de plus. Et donc, disons que nous voulons que ces éléments glissent un peu vers le haut, juste quand quelqu'un arrive sur le premier écran afin que nous puissions le déposer vers le bas. On peut laisser tomber le A pastie le changera à zéro. Donc, tout ce que vous pouvez éditer sur ces éléments sont des choses qui pourraient être animées automatiquement. Donc, vous pouvez faire un passé un Vous pourriez faire frontière. Vous faites une couleur de remplissage, vous pouvez faire la taille. Tu as une liberté comme ça. On est juste utile de se rappeler que s'il y a quelque chose que je n'ai pas couvert ici, vous pouvez probablement l'animer automatiquement. On est juste utile de se rappeler que s'il y a quelque chose que je n'ai pas couvert ici, Euh, en fait, je veux que cet escargot commence par ici. Je copie et colle aussi parce que je ne veux pas escargot pour bouger encore. Qu' est-ce qui s'est passé ici sur notre conseil ? Donc, si vous cliquez sur prototype, tout l'ennemi 0.2 est généralement à propos de l'endroit où j'aime rester avec la plupart des animations. C' est un peu comme un standard US. Tu veux qu'il soit assez rapide. Le truc avec eux, si jamais ça se sent trop lent,ily a des chances que ça soit trop lent, et ça doit être plus rapide. Le truc avec eux, si jamais ça se sent trop lent, y a des chances que ça soit trop lent, J' aime rester autour de point pour les choses. J' essaie d'être plus dramatique de ma course comme une seconde. Mais généralement tout type d'interaction que l'utilisateur va avoir Vous allez vouloir qu'il soit pointé vers peut-être 0.0.3 max moins parce que nous ne voulons pas que quelqu'un ait des éléments lents sur. Vous êtes là. Eso remportant seulement 2.2. Donc cette animation comme nous le voulions si nous fermons ça. Ok, donc maintenant on a une animation qui va de Logan pour se connecter une. Mais disons que nous voulons que notre escargot déménage. On peut y aller et traîner sont assis à l'arrière à cet endroit, et on va vouloir animer entre là aussi. Donc, si vous allez vous remarquer, je clique sur le tableau d'art entier quand je fais cela de vous appuyez n'importe où sur la transition du portail d'art à l'écran suivant. Et une partie de cela est que ces interactions ne sont pas quelque chose que l'utilisateur aurait à interagir , donc elles sont plus à des fins de présentation. Il est donc plus facile de cliquer n'importe où sur l'écran. Avoir l'animation continuer, mais si c'est quelque chose comme pour un bouton qui entrera dans plus tard, je vais cliquer sur le bouton directement au lieu de Lahore board. On veut que ça mange dehors et parce que c'est un clou maintenant et qu'il est plutôt lent, on veut que ce soit un aspect de marque qui va faire quatre secondes juste là pour la durée. Donc, si nous jouons ceci quand nous cliquons, obtenir très lent courrier escargot efface cela, vous regardez depuis le début de votre petit seinen et nous allons cliquer à nouveau. Ok, maintenant que nous avons ça, nous pouvons aller ajouter des éléments de texte ici 3. Connectez-- : Animation de texte: donc éditer des textes fonctionne de la même façon que se terminant comme une forme et auto ennemi, il va juste jumeler entre le à nos frontières pour créer un effet. Nous ne le ferons pas. Donc ce que j'ai fait, c'était copier et coller cet élément et on va mettre un email ici. Tournons ce fond élémentaire de Marseille Key Main et sera la même chose avec un mot de passe pour en créer une copie. Mais c'est un mot de passe qu'on ne veut voir personne. Donc, la jeunesse, beaucoup d'étoiles. Je suis au bureau. Eh bien, plupart du temps va rendre le texte noir pour vous, donc il apparaît un peu mieux, donc on pourrait juste le laisser comme ça et le laisser s'animer automatiquement entre les deux. Il est sorti. Je ne veux pas que ça soit 2.2. On verra à quoi ça ressemble. Ok, ça apparaît. Ce n'est pas quelque chose de fou. Et c'est aussi quelque chose que vous pourriez juste dio avec les transitions d'écran régulières. Vous n'auriez même pas à utiliser l'animation automatique. Vous pourriez utiliser plus, laisser notre transition à la place, et ensuite simplement se dissoudre. Ça va te donner exactement le même effet. Mais nous voulons que ce soit que nous ayons juste un peu de flair. Donc, nous allons concevoir. On va créer un rectangle ici. Nous pouvons aller sur le jury, remplir, toujours comme éteindre est tombé. Lorsque je crée quelque chose que je veux dire utiliser le masque, il sélectionnera ces éléments. Nous allons aller à l'objet et faire un masque avec la forme, puis doubler rapidement. On peut éditer le masque et on va le ralentir jusqu'à ce qu'il se cache. La meilleure petite pièce couvre tout le texte et ici, vous remarquerez que vient de l'appeler masse Groupe One Nous allons faire est que nous allons réellement entrer et nommer animation email. Il est important que vous ayez bien nommé les choses, parce qu'un Dairy X identifie les éléments par le nom eso Si vous entrez et que vous avez des trucs qui s'appellent Groupe 123 Groupe 1000, il est vraiment facile de perdre une trace sur ce qui est animé, et si vous le faites assez, vous pouvez avoir des choses qui animaient en même temps deux choses. Vous êtes nommé Groupe 1, donc c'est juste une bonne pratique. Toujours nommer les choses comme vous allez afin que nous allons faire la même chose va créer un rectangle pour le mot de passe, nous éteindre à nouveau et tous les sélectionner les deux. Aller à la forme des maîtres d'objet Una n'a pas couvert tout le chemin. C' est très bien. Nous allons double-cliquer. Qu' est-ce que c'est ? Et la même chose groupe de masse Will dio mot de passe innovation aussi retourner ces deux éléments X de cette façon. Donc ce qu'on va vouloir en premier, c'est craindre que ces noms d'espaces réservés disparaissent. Nous allons définir la capacité à zéro, puis à partir de cette forme d'art et copierons et collerons. Et une fois que nous avons fait cela, nous pouvons entrer et ouvrir cette animation pour mot de passe. Nous allons zoomer vraiment quiz, peut-être encore plus près. Qu' est-ce qui utiliserait pour faire glisser cette boîte vers l'extérieur ? Vous allez faire la même chose à l'animation e-mail. C' est comme cette boîte, traînez-la jusqu'au bout. Donc ce que ça va nous donner un effet de type assez subtil parce que cette masse va s'ouvrir et le faire un peu. Ils sont plus propres, un peu plus amusants, plus de trucs qui se passent, tu sais, d'autres intimes. Il est sorti. 0.2, c'est bien. Et au lieu de taper, ce que nous allons entendre ici, c'est le temps de garder le retard à zéro. Donc, fondamentalement, ce que cela signifie est, une fois que vous cliquez, avoir cette animation terminée. Il va immédiatement alimenter cette animation pour qu'on puisse jeter un oeil à ce que ça ressemble . Donc le texte a disparu. Et puis on a eu ce bel effet de type qu'on voulait. Ça a l'air bien pour l'instant. Voyons tout ça depuis le haut. Juste pour être sûr à nouveau d'être tapé. Ça remonte le robinet. L' infirmière Neil croise, alors on reçoit notre texto, Sammy. Donc la prochaine chose qu'on va vouloir faire, c'est signer. 4. Connectez-vous : État du bouton pressé: donc nous ne voulons pas simplement cliquer sur un bouton. On veut que le bouton ait, genre, genre, un saké de presse. Donc, la première chose que nous pouvons faire pour cela est de copier et coller ce bouton de connexion. J' aime toujours ajouter une bordure que nous allons utiliser, c'est un masque à une frontière et ensuite éteindre la vente juste pour qu'on puisse voir à quoi sert le masque. Bien sûr. Ensuite, nous prendrons un cercle en place qui, au milieu d'un bouton guérira dans la toux de la frontière . On va faire glisser le bouton d'inscription au-dessus de tes lèvres et ensuite on va créer un masque. Donc nous avons le groupe de masse 1, et nous allons aller de l'avant et nommer que nous allons le nommer, connecter. Mais l'animation, on va double-cliquer et désactiver le passage A de ce cercle zéro. Maintenant que nous avons cette configuration sur notre connexion, nous allons copier et coller ce tableau d'art entier. Et une fois qu'on entrera, on pourra s'ouvrir, saisir nos lèvres. Ce que nous allons faire est de transformer la capacité à, disons, 70% et ensuite nous allons augmenter que j'utilise le décalage d'option pour l'augmenter uniformément jusqu'à ce qu'il occupe tout l'espace des boutons. Ça va ? Maintenant a l'air bien. Et puis on va vite sur ce tableau d'art et on pourrait prendre un bouton d'inscription ici, et on va faire un prototype sur le mais cette fois, au lieu de ton tableau, tu tapes, bien que intime, il est sorti, cette fois sera cassée. J' aime généralement utiliser snap pour les réponses de bouton parce que c'est un peu plus. C' est un peu plus rapide, un peu plus actif. Ça va arriver assez vite. Donc c'est bien de donner un peu de lumière, et ça arrive. Faites un peu plus évident que quelque chose a répondu comme ça. Ensuite, nous allons en haut de la page de connexion et nous allons la connecter. Teoh notre page de boîte de réception, attrape tout ça. Et là encore, on va faire le temps. Est-ce qu'il veut que cela arrive très rapidement ? En fait, ne pas animer ça, on va faire la transition. La raison pour laquelle nous faisons cela est parce qu'il ne sert à rien d'animer l'honneur, animer quoi que ce soit ici si c'est une transition d'écran si massive. Donc juste point à ce que c'est amusant. On verra à quoi ça ressemble et on le regardera encore une fois. Qu' est-ce que le clavier ici est de revenir, et nous obtenons une assez belle mais en réponse là. Donc, la clé est tout au sujet de la subtilité de ces animations. C' est ce qui attire l'attention des gens. Donc, il est toujours bon d'avoir un oeil pour le détail, comme la France, puisque cette animation est un cercle qui se met à l'échelle au lieu de juste un. Mais nous avons mis sur le dessus de cela qui a changé les couleurs et puis en fait juste changer la qualité de l' animation. Il est non seulement ce n'est pas seulement une transition, c'est quelque chose qui a un peu plus de profondeur et de mouvement qui le rend plus intéressant, mais pour la prochaine étape va commencer à travailler sur la boîte de réception. 5. Boîte de réception : Répétition de la grille et à déformation: Ok, donc une fois que nous serons à l'écran de notre boîte de réception, vous remarquerez que nous avons ces courriels fictifs ici qui n'ont pas vraiment de nom, sujet ou de temps en eux. Donc, ce que nous pouvons dio est de cliquer sur cet élément, puis aller à la grille de répétition. Et une fois qu'on fait glisser ça vers le bas, il est évident que tu reçois plus de courriels fictifs. Mais le problème est, disent-ils juste, nom, nom, sujet dans le temps, ce qui a l'air terrible. Donc, quand le plug cool dans que j'aime vraiment et suggérerais tout le monde essai est répéteur juste ici. Donc, si vous avez une grille de répétition qui vous permet de mettre, comme le texte fictif et d'autres éléments que vous pouvez réutiliser dans toute la grille Donc, si nous cliquons sur cela et puis cliquez sur répéteur Donc, nous obtenons toutes ces options et vous remarquerez dans cette goutte menu bas, vous obtenez les éléments qu'ils étaient en Europea cred. Nous avons donc le nom, heure du sujet et le chemin de la ligne et du rectangle. C' est juste le cercle de sélection à gauche, donc nous allons commencer par le nom. Donc, si nous obtenons une liste déroulante de catégorie et allons au nom et que nous voulons prénom et nom de famille, nous allons postuler. Puis fermez ça juste pour voir ce qui s'est passé. Donc on a des noms qui ouvrent tous sa valeur de nom. Appelez-les. Et si nous doublons rapidement juste une note rapide si vous remarquerez que la zone de texte ici est en fait beaucoup plus grand que le nom, ce qui est une bonne pratique lorsque vous configurez une grille de répétition que vous avez le texte factice lui. Parce que si je devais le faire pour pointer, il le jetterait vraiment si le nom était trop long et il commencerait à tomber dans ces autres zones de texte. Excusez-moi, voyez une nouvelle recherche. Il est donc toujours utile de faire la taxe de zone en sélectionnant la même chose avec le sujet. Donc, nous avons utilisé le texte de zone pour aller aussi loin que nous le voulons, et le temps et le temps écrivent vraiment beaucoup de temps et ensuite lui donner un peu d'espace au cas où les temps un peu plus longs que prévu pour ce juste équipement afin que nous puissions cliquer en arrière, retourner dans répéteur. En ce moment, nous voulons un sujet, la catégorie. Donc, il y a beaucoup de choses que vous pouvez choisir ici. Euh, en fait, une des meilleures catégories. Je pense que pour les e-mails, Internet et vous pouvez simplement cliquer sur la phrase ici. Ce sera comme au hasard. Um, louanges du développement, mais je pense que c'est assez utile pour une phrase e-mail que nous pouvons appliquer à ça. Et on voit qu'on a ce pop là-haut. Mais nous pouvons aussi passer à l'heure pendant que nous sommes ici. Retournez à la liste heure de rencontre et vous pouvez sélectionner la période de date, donc nous allons coller le temps. Euh, des périodes récentes. Très bien. Nous achèterons des vêtements. Réponse. Maintenant. Nous avons des noms sujets dans le temps assez rapidement, et cela s'est étendu à ces éléments ici. Mais comme nous avons tous ces éléments ici, nous allons vouloir faire défiler une houle pour que vous puissiez cliquer sur sa planche et traîner vers le bas, et nous irons juste là. Et une chose que vous remarquerez. Donc, si nous allons jouer ici sur moi défiler, nous avons cet élément qui bouge avec, et nous ne voulons pas que l'action flottante. Mais il devrait toujours être réparé. Donc, nous allons fermer, cependant, et nous allons cliquer et vouloir revenir à cette couche étant vous. Ensuite, si vous rapide les éléments et obtenir un prototype, nous pouvons fixer la position lors du défilement, puis accéléré Vous jeu rapide et juste une note rapide pour vous devrait normalement faire cela avec ces autres éléments aussi bien. Mais juste dans ce fichier, ceux-ci ont été configurés pour être position fixe lors du défilement déjà. Donc, je suis un peu très rapide avec la grille de répétition et répéteur la prise. Nous obtenons en fait un flux de courriel assez haute fidélité assez rapidement avec un défilement, qui, comme vous pouvez l'imaginer entrer et taper du texte fictif, et tout cela serait en fait un gros tracas. C' est donc agréable de pouvoir le faire rapidement et d'avoir quelque chose qui semble assez réaliste. 6. Envue : Répéter la grille et les états de boutons: Donc maintenant, ce que nous pouvons faire est de déplacer ces autres ports, et la prochaine chose fera sortir ses idées est en fait la boîte de réception envoyée, afin que nous puissions copier et coller ceci. Rends-en exactement la même chose. Mais cette fois, nous allons vouloir que cette icône se mette en surbrillance au lieu de notre icône dans la boîte afin que nous puissions opter pour le déplacer et le rendre un peu plus grand. Et je veux que la couleur change bien, donc on doit remplir la couleur bleue. Nous voulons cette icône puisque n'ont pas été sélectionnés ici pour revenir à ce gris. Je voulais aussi être un peu petit ici, aussi, aussi, juste là jusqu'à ce qu'il s'harmonise avec ces autres éléments. Donc, ce que nous pouvons faire est rapide sur cet élément. Obtenez un prototype Jag sur la transition. Ennemi auto. Il est sorti. Spine 0.2 est très bien. Vérifions pour voir à quoi ça ressemble. D' accord. Ça a l'air bien. Ce genre anime comme vous voulez, mais il y a quelques problèmes. Un qu'on ne peut pas cliquer en arrière. Deux. Ce sont tous les mêmes e-mails et informations, ce qui n'a pas l'air très réaliste, et il dit toujours en dollars Woops, allons changer cela. Je veux que ça dise envoyé. Et donc, si nous cliquons et sélectionnons notre grille de répétition, nous pouvons réellement retourner dans notre fiche et menu ouvert répéteur, et nous pouvons changer ces choses afin que nous sélectionnions le nom. On reprendra la fin comme un nom. C' est comme, d'abord et a beaucoup perdu son téléphone. Et ça va changer tous ces éléments, et nous ferons la même chose pour le sujet aussi. Donc j'ai un internet, une phrase qui va changer ça. Et puis la dernière chose est également de mettre à jour les temps qui fonctionne avec moi. Mettez à jour les heures. Ok, bien. Et si vous voyez que vous comparez entre ces deux sont des ports. Ils ont changé, jamais les choses ont l'air bien. Et nous allons vraiment vouloir être en mesure de retourner à notre boîte de réception afin que nous puissions mettre Predator drag serré que sur auto animate. Il est très bien. Donc maintenant, quand on passe, eh bien, on a changé le nom d'un centime et on a aussi toutes sortes de différents emails envoyés juste pour rendre un peu plus réaliste, comme si vous parlez en fait basculer entre la boîte de réception et mois d'envoi. Donc la prochaine chose que nous pouvons faire est le prototype. À quoi ressemblerait un nouvel e-mail ou une nouvelle composition d'email. Et pour ce faire, il va falloir cliquer sur ce bouton plus pour que la nouvelle fenêtre e-mail apparaisse. 7. Composer un nouvel e-mail : Les États de superposition et de button: J' ai inclus que vous email fenêtre ici, mais nous devrons avoir notre réponse de bouton avant d'y arriver. Donc copiez et collez. En fait, avant de copier la pâte, nous allons aller de l'avant et ajouter ce masque pour créer cette réponse de bouton. Donc, une copie et coller cela tourner la bordure sur le remplissage à travers Office ombre. Eh bien, maintenant que nous avons ce contour, créez un cercle dans le cercle du milieu pour qu'il n'y ait pas de bordure dans un Phil blanc, et nous voulons que ce soit sur le dessus, nous sélectionnerons Ben pour ces éléments. Nous allons créer un masque double rapidement ici, et nous allons nous assurer que c'est votre capacité d'un pourcentage parce que nous ne voulons pas qu'il apparaisse lorsque le bouton n'est pas équipé et qu'il est nommé une maîtrise d'un. Opel due appellera cette animation de bouton d'action flottante, et maintenant nous pouvons copier et coller cela sur. Euh, cette erreur que ça a presque fait c'est, euh, tu dois te rappeler que pour animer quelque chose, l'animation doit exister sur le premier tableau d'art ainsi que sur le second, donc c'est toujours bon. pour entrer et le configurer sur le premier, puis copier-coller. Comme ça, les noms seront toujours les mêmes. Parce que si vous commencez à copier et coller et créer de nouvelles animations plus tard sur la route, le nom et peut devenir tout à fait un problème um, va vous assurer que tout orthographié exactement à la lettre. Correct. Nous allons ouvrir ça, nous irons à l'Ellipse et au musée, et nous voulions revenir sur un 70% pour obtenir cette réponse rapide et ensuite, eh bien, augmenter. Et je tiens juste le changement d'option à l'échelle uniformément là à partir du centre a besoin d'aller plus culte, et donc nous allons prototype. Donc, lorsque vous cliquez sur ce, vous voulez que cette réponse apparaisse et allez-vous accrocher parce que c'est un bouton State T était amusant. Ennemi auto et nous ne voulons pas qu'il s'agisse d'auto ennemi. Nous voulons notre nouveau message quand ils vont venir aussi. Donc ce que nous pouvons faire ici ce dragon sur un bon moment. Ce que j'ai fait là était juste de sélectionner l'art seins nus versé. On ne veut pas de cette animation automatique. On va l'utiliser tard ici. Donc, l'une des raisons pour lesquelles l'une des chutes de l'animation automatique est tout doit être sur ce tableau d'art original. Mais pour une superposition de symbole, il est généralement préférable d'aller de l'avant et d'utiliser l'un de leurs préréglages pour glisser dans. Glissez vers le haut, bas. De gauche à droite sont généralement assez rapides et faciles à utiliser, et il garde tout séparé sur le ou le bord parce que cela ne devient pas un tracas lorsque vous avez de gros éléments comme celui-ci se déplacent sur l'aéroport d'origine. Donc si tu peux, j'essaie toujours d'utiliser chaque jambe juste pour garder les choses un peu plus propres. Et nous le voulions. Il est sorti. 0.2, c'est bien. Voyons à quoi ça ressemble. Nous allons cliquer ici. Nous obtenons notre réponse et la fenêtre à venir. Essayez-le encore une fois. Ça a l'air bien. Donc, après avoir reçu notre nouveau message un jour à venir, faites-le parce que j'aime qu'ils soient à 70. Exactement génial. Donc la prochaine chose que nous pouvons faire est de faire monter notre menu 8. Paramètres : Slider: ont donc inclus ce menu pour nous juste ici. Donc si on passe par la boîte de réception et qu'est ce que Will Dio ? En fait, nous allons copier et coller tout ce port d'art parce que nous n'utiliserons pas ce menu comme superposition. Et je vous expliquerai pourquoi dans une seconde. Nous avons donc copié et collé l'ensemble du calque de la boîte de réception ou du tableau d'art là. Excusez-moi ? Alors ce qu'on va faire, c'est prendre les paramètres de la boîte de réception. En fait, il suffit de copier et de coller ça sur le dessus. Je pense que nous avons quelques éléments cachés là-bas. Oui. Des temps cachés là-bas. Donc, nous pouvons simplement supprimer ça. Donc, une copie et coller ce menu sur le dessus ici, nous allons le faire glisser sur la bonne position parce que nous voulons venir quand nous avons cette icône. Donc c'est bien. Mets-toi ça en contact. Nous avons donc un retour serré à notre boîte de réception. Pas là. Donc on veut là-bas à la place. Transition supérieure dissoute sans pointer vers tout. Il semble allongé là. Une chose à savoir chaque fois que vous faites glisser dans le prototype. Il se souvient de la dernière chose que tu as faite. Donc la dernière chose qu'on a fait était une transition, donc ça va se souvenir de ça, mais si on s'anime automatiquement et change l'heure où tu te souviens de la dernière soupe sélectionnée Ellen, tu as cliqué sur le matériel Donc la dernière chose qu'on a fait était une transition, donc ça va se souvenir de ça, mais si on s'anime automatiquement et change l'heure où tu te souviens de la dernière soupe sélectionnée Ellen, et puis nous obtenons ce menu qui fonctionne comme nous le voulons pour vous. Mais on ne veut pas qu'ils viennent en toi. Nous voulons interagir avec la densité d'affichage ici. Donc ce qu'on peut faire, c'est copier et coller à nouveau cet aéroport, et ensuite on va créer un curseur pour la densité d'affichage. Donc nous allons retourner à notre ville de design, prendre un rectangle, le glisser sur l'ombre portée. Si vous remarquez qu'il y a, genre, un petit chevauchement d'ombres portées parce que ces éléments en haut, , on va réparer ça avec un masque parce qu'il n'est pas en fait au-dessus de ce menu. Alors, Phil s'est éteint et nous a traînés jusqu'à utiliser un masque. Et ce que cela va faire est juste de retirer cet élément d'ombre portée de ce menu parce que c' est un peu distrayant de l'avoir là. Parce que c'est vraiment comme si je glisse hors de la densité d'affichage. Ensuite, nous pouvons créer un rectangle ici. Ça va être l'arrière-plan de notre curseur. Prends ce rayon en amenant et on le changera à ça. Gray a dit, c'est notre fond de curseur. Vous pouvez aussi créer un cercle ici, et ça va être notre élément de curseur. Cette taille devrait être très bien. Si nous pouvons trouver le centre quelque part, alors nous voulons que ce soit bleu. Donc je vais copier et coller cette année de texte d'affichage au lieu de taper quelque chose de nouveau. Donc ce sera dans la même pensée. Tout. On va en prendre un de moins. En fait, je vais avoir un point ici. Je pense que le point pour moi est un peu plus facile à traîner autour. Absolument. Vous êtes plus facile de faire glisser des éléments autour et de remodeler des choses autour de 14. Trouvez une copie et collez-la encore une fois, puis plus. Donc, ce que nous faisons, c'est que nous créons un curseur ici qui va changer la densité d'affichage de nos e-mails de moins en plus pas trop compliqué là-bas. Donc, comment on va faire ça, c'est qu' une fois que nous aurons créé notre cidre, on pourra aller de l'avant et relier ça. Donc, si nous allons afficher la densité, cela viendra et n'est pas trop Oh, venez transition appropriée. Nous pouvons juste utiliser le point de dissoudre pour vous est très bien. afin que nous puissions vérifier juste pour nous assurer que cela casse. Ça a l'air amusant. Et une fois que nous aurons fait ça, nous allons copier et coller cette planche d'art une fois de plus. Ce que nous voulons, c'est voir à quoi ressemblerait notre conseil s'il y a moins de densité dans notre humain. Alors, quelles radios ? On va sélectionner le bouton du curseur, on a un prototype de dragon. On va aller à Auto Enemy, en fait, ce qu'on va faire zéro, ils ont dit un robinet qu'on va faire glisser. En fait, quand vous faites glisser rapidement, vous n'avez même pas l'option. Teoh faire un temps parce que c'est quelle que soit la réponse du dragon de la souris. Donc, si nous entrons et regardons cela dans les nouvelles, nous pouvons faire glisser cet élément vers la gauche ou vers la droite. Donc ce sont les limites originales que nous avons définies pour auto intime, et c'est juste nous laisser le glisser au lieu de faire comme une animation de robinet Small fermer ça. Mais si vous remarquez quand on traîne ça, rien ne se passait. Donc, ce que nous pouvons dio est aller dans et changer la densité d'affichage de notre email en éditant sont répéter cred. Donc, c'est l'un des aspects cool d'avoir des grilles de répétition intactes est que vous pouvez faire des choses assez folles comme ça vraiment facilement, et parce que nous voulons moins de densité dans notre e-mail pour cet exemple, nous pouvons l'amener à environ là et puis double-clic a terminé la grille de répétition, et nous allons déplacer cette ligne un peu plus loin juste pour l'espacer un peu plus réaliste. Et ensuite, on peut déposer ça. Un peu de houle. Il suffit de laisser tomber la répétition Bon vers le bas, juste un cheveu dit. C' est basé plus sur ce top time. Et comme il s'agit de la même grille de répétition que ce tableau d'art, il sera automatiquement ennemi lorsque nous faisons glisser ce curseur. Donc, c'est l'un des avantages à propos de l'auto et moi en général et de l'utiliser avec une fonction de glissement . Vous pourriez faire quelque chose comme ça assez rapidement sans avoir à changer quoi que ce soit ou faire quoi que ce soit de fantaisie dans un autre programme. Vous pouvez tout faire avec des éléments dans son tableau d'art, et nous allons en fait nous débarrasser de ces manuels comme toute la planche d'art ici, aller à Predator et faire glisser ça jusqu'au premier plateau de départ. Nous ferons la transition de la touche. Il y a tout point à. Donc maintenant, si nous allons dans pourrait afficher la densité, utiliser leur curseur. On pourrait retourner dans le menu principal de la boîte de réception. 9. Réception de nouveaux e-mail : animation de notifications: Donc, la prochaine chose que nous ferons est de simuler la réception d'un nouvel e-mail ce week-end. Copiez et collez cette boîte de réception d'origine. Nous allons donc vouloir que ce nouvel e-mail apparaisse en haut de cette grille de répétition afin que nous puissions simplement faire glisser cela vers le bas pour oublier le même espace, commencer pour un e-mail, saisir un rectangle et ensuite glisser là. Ce que nous pouvons faire est juste aller de l'avant et étendre la forme tout le chemin sur le côté, et c'est un nouvel e-mail, donc nous allons faire une couleur différente comme le bleu et veulent des éléments de texte pour cela nous pouvons juste aller et doubler, Cliquez sur dit. Nous pouvons copier et coller ici un. Sélectionnez le rythme de répétition en dehors de celui-ci. Faites glisser le vers le haut de cette façon. Nous avons un texte qui est le même que théorisé ces courriels. Nous ferons la même chose pour le cercle sélecteur ici. Copier et coller de Sélectionnez une grille de répétition basée dragon up waken. Maquillez-vous sur votre nom pour ce premier e-mail juste pour que nous restons dans les lignes de garder l' air joli riel et ajustera le temps à. Donc maintenant que nous avons notre nouvel e-mail apparaissent, il va réellement baisser cette commodité vous commande déplacer le crochet gauche pour le laisser tomber tout le chemin juste pour être sûr que nous sommes derrière tous ces éléments. Et on manque une ligne ici. Et c'est parce que la ligne était seulement dans le bas et ils répètent grille. Je vais donc copier et coller cette ligne pour le haut et la repositionner en dessous. On a juste le reste. Ce support de courriel. On y va. Ok, donc on a une nouvelle configuration d'email et ce qu'on va faire c'est regrouper tous ces éléments de cette façon, on peut les ajuster comme ça. Contrôlez le renommage, ce nouvel e-mail. Donc ce qu'on peut faire, c'est copier et coller ce groupe, retourner dans notre boîte de réception originale collée, et on va le rétrécir rapidement. Notez si vous remarquerez quand le rétrécit ici. Ce texte ne rétrécit pas. Non plus. Vous pouvez réellement ajuster cela, comme revenir en arrière et changer ces deux points au lieu du texte de zone et la raison qui sera correcte pour ces instances. Nous ne mettons pas d'éléments répétiteurs dans ces champs, donc c'est bon si nous utilisons du texte de point sur eux et fondamentalement tout cela signifie qu'ils vont mettre à échelle quand nous mettons à l'échelle le groupe entier au lieu de simplement garder la même zone comme il serait pour le texte de la zone. Copiez et collez ça ici et nous minimiserons. Eh bien, en fait, suffit d'aller en double ramasser ces minimisant le petit C'est ce qu'ils n'ont pas à être parfaits parce qu'on va éteindre cette opacité de toute façon. Mais ils doivent être assez petits. Donc il n'y a pas de bizarre pour les genoux. Lorsque nous faisons l'animation, donc va changer l'ensemble A pastie leur 20 Je vais m'assurer de faire la même chose à l' ensemble du groupe juste là sur le texte a été sélectionné. On dirait tout le groupe. Bon sang, c'est un zéro fascinant. Donc, nous voulons que cela s'anime automatiquement, donc nous allons rapidement sur l'ensemble du tableau d'art et faire glisser également sélectionner au lieu de faire comme tapoter ou temps. Nous allons utiliser les touches cette fois, alors sélectionnez que ce qui vous permet de faire est d'utiliser n'importe quelle touche de votre clavier pour déclencher l' animation. Donc, si nous cliquons ici, nous pouvons appuyer sur la flèche vers le bas dans un signe que nous voulons la transition vers l'ennemi auto et il est hors point vers vous est très bien. Donc, l'une des raisons d'utiliser le clavier est utile ici est qu'il vous permet de contrôler quand vous pouvez déclencher des animations et ne semble pas tout à fait maladroit est comme cliquer quelque part sur la page pour déclencher l'animation. Et c'est aussi utile. Si jamais vous voulez faire une vidéo de capture d'écran, vous pouvez simplement utiliser les touches du clavier pour déclencher certaines de ces animations. Donc votre souris est et dans le cadre, Voyons voir. Donc, nous sommes sur la boîte de réception principale va appuyer sur la touche bas. Obtenez ce nouvel e-mail pour apparaître juste là. 10. Réception d'un nouvel e-mail : Micro-interaction: donc, nous ne voulons pas qu'un nouveau courriel apparaisse, bien que nous puissions y ajouter un peu de flair. Allons faire quelque chose à cette cloche parce que nous allons avoir les Vacances Unis dont nous allons vouloir. Quelques réponses ici. Une houle, donc nous allons créer un autre cercle un peu plus petit. On va se débarrasser comme on a un nouveau symbole d'identification là-bas. Nous allons copier et coller ça jamais. Et rappelez-vous, c'est l'élément de départ. Donc c'est la page principale que nous allons vouloir que ça augmente. Donc, nous voulons le rendre petit et éteindre la capacité. Sauf si c'est un Lips 5. Allons de l'avant et changeons cette alarme, je suppose. Alarmes. Mieux nom pour l'alarme, et je dois revenir en arrière et se rappeler de le changer sur l'écran aussi bien. Alors vérifions pour voir à quoi ça ressemble, pour que ça apparaisse une houle. C' est une belle touche à ajouter, mais disons que nous voulons faire un peu plus et ajouter un peu de subtilité et vraiment entrer dans, comme regarder une micro interaction pour que nous puissions réellement supprimer cela d'ici. Et donc, disons que nous voulons que la cloche sonne avant que la notification rouge apparaisse, donc nous pouvons faire est d'entrer et de faire pivoter. L' élément fera l'affaire. Tournez-le vers la gauche à environ 45 degrés et puis nous irons par ici. On va dupliquer cet aéroport une fois de plus, et on va supprimer ça d'ici, et ensuite on ira au bon 45 degrés. Et c'est là que ça finira par être au centre. Et parce que j'ai changé ces tableaux d'art et supprimé cet élément, en fait je vais l'ajouter à celui-ci, le réduire, changer la capacité à zéro. La raison pour laquelle je l'ai fait de cette façon est que c'est le tableau d'art sur lequel ces éléments commencent à apparaître. A l'origine, c'était celui-là, mais parce qu'on y a ajouté, on peut dormir ce moment. Donc, nous allons nous assurer que tout est connecté assez serré sur un raccourci cool. Voici la commande compressée A pour voir tous les points que les prototypes ont connectés. Il est utile de vérifier si vous avez oublié quelque chose ou si vous n'avez pas quelque chose connecté, peut vous faire gagner un peu de temps plutôt que d'essayer de faire le tour et de cliquer sur des éléments pour voir ce que vous vous souvenez. Il ne se souvenait pas d'animation. Donc garder hors de la flèche vers le bas va déclencher cela. Et donc nous voulons que ce tableau d'art passe automatiquement à la position suivante de Bell afin que nous signions heure. Zéro seconde 0,2. Eh bien, en fait, faites ce 0.4. Et la raison en est parce que cela bouge en fait 90 degrés. Donc, d'après ce tableau d'art, celui-là, c'était 45. Mais parce que vous vous balancez sur ce fond d'art, c'est en fait en train de bouger 90. Donc, pour garder cette apparence uniforme fera en fait 0,42 qui sont ennuyés. Et puis quand nous obtenons un pull, fera pointer à vous vérifier pour voir à quoi cela ressemble. Et encore une fois nous allons frapper le bas, continuer à travailler et cela même obtenir cette petite animation balançante juste là en haut. Et vous pouvez également jouer avec ce que les animations font réellement entre les mandats artistiques . Quand vous créez un petit micro et des interactions comme ça, je les utilise ici, qui fonctionne bien parce qu'il semble que la cloche a un peu de spectacle intérieur devrait ralentir quand elle frappe les Ozarks, mais vous pouvez aussi jouer avec, comme, comme, accrocher Artie et il est dehors et vraiment juste jouer autour et voir ce qui semble le mieux parce que beaucoup d'animation de cette façon est une sorte de ce qui se sent juste. Je sais que c'est le truc du designer de Miss cliché à dire. Mais si quelque chose se sent lent ou maladroit, il y a des chances que cela semble très maladroit et très lent pour quiconque l'utilise. Il est donc toujours bon de garder cela à l'esprit et de jouer avec les choses jusqu'à ce qu'elles se sentent bien . Ensuite, nous pouvons aller du haut pour sceller nos animations une fois de plus et nous assurer que tout est connecté afin que nous puissions le faire. Rapidement, nous pourrions venir vers Norse Neil pour glisser à travers quand nous signons bons ou envoyons des e-mails. Écrire un nouvel e-mail était là et il est affiché densité, puis appuyez sur ce clavier bas T pour voir notre nouvelle animation pop up sur Awesome. On dirait que tout fonctionne là. Donc c'est tout pour ce type de base de conseils et astuces de l'ennemi automobile 11. Outro: ce qui enroule cette classe. S' il vous plaît n'hésitez pas à essayer l'exercice de classe et laisser quelques commentaires et commentaires. Faites-moi savoir ce qui marche. Merci.