Comment animer une ébauche d'UI en utilisant Principle

1. À propos du cours: Je fais ça pour toi. Je concepteur basé au Kenya aujourd'hui je vais vous emmener à travers la façon de tout fait un croquis en utilisant le principe Slash est le mieux adapté pour les concepteurs qui ont esquissé tomber là vous sage et que vous voulez les prendre au niveau suivant. Les mauvaises choses en mouvement et en interaction. Pas d'expériences de friture. Principe noir pour prendre cette classe. La seule chose que vous allez avoir à faire est de vous rendre sur ce site de format principal pour voir en classe. 2. Préparation pour le cours : matériaux: afin de suivre facilement, je vous recommande de télécharger le juge de dossier ci-joint alloué dans la section de votre projet de cette classe. Installez les deux types de formulaires et ouvrez le fichier d'esquisse pour être ce que je vois à l'écran. C' est facultatif, bien sûr. Votre plus que libre d'utiliser votre propre croquis pour la divulgation si complète les vallées de croquis originales de M. Stefan et a été mis à notre disposition en difficulté. Je l'ai aimé parce que je l'ai trouvé assez basique pour démontrer les fondamentaux de l'animation en utilisant le principe vers le haut. Donc, en voyant la classe suivante, nous expliquons comment préparer des fichiers d'esquisse pour l'exportation vers le principe. 3. Préparer des ressources pour l'importation au principe: Donc, avant d'importer notre croquis tombe dans le principal il ya quelques choses que nous voulons clouer dans notre section croquis. Et la première chose est le nom de la sortie. Tu vas t'abandonner les taches de sang qui ont du sens de la mienne froide ici. Vu au centre. Donc, si vous avez un vous, j'ai volé dans le liquide d'embarquement comme l'ennemi pourrait vouloir avoir tous les écrans qui traitent avec ça dans un écran ascendant un accord avec inscrivez-vous dans une autre botte et ainsi de suite et ainsi de suite. Une autre chose est le regroupement de nos bateaux que vous voulez importer. Avoir ça sur une page. Maintenant, répétez ça encore. Assurez-vous d'avoir tous les aéroports que vous souhaitez importer. Deux principaux sur une page. C' est vraiment important et vous fera économiser une tonne de temps en tirant vos cheveux. Assurez-vous que tous d'entre eux je dans une page. Si vous avez, disons, une page, autre page supplémentaire ici, avoir une page à, et vous avez une autre sortie ici. Il ne sera pas importé si la page sur elle a sélectionné les pommes dans la page une de celles qui seront importées en principe. Une autre chose voudrait s'agenouiller. Est-ce que cela s'assure que vous avez les scènes qui vont être animées dans des groupements séparés dans la sortie ? Vous avez donc l'état régional dans son propre groupe votre état de transition dans son propre groupe et votre état final dans son propre groupe. Cela facilitera la tâche lorsque vous importez vos fichiers en principe. S' il vous plaît, s' il vous plaît, organisez vos actifs comme ceci pour vous faire gagner du temps à l'avenir. Une autre chose est ceci Vous pouvez envisager de concevoir tous les états de votre animation . Maintenant, dans la mesure où nous pouvons seulement avoir l'état original et sorte de visualiser à quoi ressemblera la fin . Cela nous donnera toujours un avantage si nous avons nos états de transition et nos états finaux avec Donc une chose que vous devez comprendre est la transition et l'état final va certainement vous donner un avantage. Ils ne sont pas nécessaires. Peut aussi bien avoir votre état régional et importer cela. Ensuite, allez faire le reste en principe. Mais après, si je vous les dessine à haute voix, ils souffrent d'un bon point de référence. La dernière chose à partir de laquelle on va partir, c'est que tu vas avoir besoin de nommer tes biens d'une manière sensée et que tu pourras y faire référence. En principe, je recommande généralement de le faire. Donne-les la même façon que tu les appellerais dans la vraie vie. Quand j'ai eu les actifs au début, ils ressemblaient à ça. Donc groupe à ovale, plus Leah importé. Si nous importons cela en principe, il n'y a aucun moyen de savoir quoi. Mais si nous les renommons comme cette action mais sur la réponse Mais sur le bouton de partage comme du beurre boda au lieu d'avoir quelque chose de aléatoire voir ce que le Bouddha appelle ici ? Ce rectangle froid sept rectangle sept ne sera pas cottage quand on a importé au principe . Ça va nous donner un moment difficile. Donc, une chose que vous voulez vous assurer est que vos états et tous les éléments dans un nom sensé donné , comme vous les appelez dans la vie réelle. Donc pour ceux d'entre vous ne savent pas que les fichiers plus tôt et les suivants, j'aimerais que vous fassiez quelque chose de petit en ce qui concerne me nommer. Vous voyez le dossier appelé Groupe simplement Renommer chaque dossier trop. Le groupe d'états Transition. C' est très facile, et si vous rencontrez des problèmes. Vous pouvez toujours commenter dans la section du projet ci-dessous, et je serai prêt à vous aider avec ces conseils. C' est la prochaine leçon où nous importons cette capture dans les princes. 4. Importer au principe: Salut, les gars. Bienvenue dans la classe. Donc aujourd'hui, nous allons nous occuper de la façon d'importer ce fichier de croquis en principe. Et la première chose qu'on va faire est d'ouvrir notre principal. Oui. Donc la première chose que vous devriez voir ici est laissez-moi juste minimiser ce n'est pas bon. Vous obtenez un hors-bord vide. Vous avez un écran précédent ici. Donc, tout ce que vous faites ici, vous pouvez être en mesure de prévisualiser ici. L' écran précédent est également livré avec un retour au début de l'animation ou aller à la première sortie. Donc, si vous avez C A ne serait pas alors appuyer sur commande pour dupliquer. Si vous êtes à la hausse et que vous les avez liés ensemble, vous pouvez le voir et il le ramène à leur premier état. L' autre chose émise note est principal vous donne la possibilité de travailler avec des formes. C' est un rectangle. Et comme vous pouvez le voir, il apparaît dans un aperçu. Et si vous le déplacez simplement, quelque chose que vous notez est l'Atwood actuel qui a sélectionné ISO, qui est actuellement dans la zone d'aperçu. Donc, au cas où vous avez un scénario où vous ne voyez pas quelque chose que vous venez de modifier de ce côté de l'écran apparaissant ici. Sachez juste que c'est probablement que vous n'avez pas sélectionné que je le ferais. Ainsi, vous pouvez travailler avec des formes. Vous pouvez travailler avec du texte. Cependant, nous ne recommandons pas que vous travailliez avec du texte si vous voulez un texte image. Donc, vous même un scénario sur le texte de l'anime Il suffit d'utiliser quelque chose comme Adobe après les effets. Principal ne gère pas les animations textuelles aussi bien de mon expérience passée que de l'expérience de la communauté principale. Donc, utilisez quelque chose comme après effets pour ça. Je vais juste supprimer ça. Aussi, vraiment ça fait ça. Donc, vous n'avez qu'une seule sortie. Donc, pour importer un fichier à partir de l'esquisse, suffit de lancer l'importation et que se passe-t-il est-il déjà pré-sélectionner le fichier qui est ouvert ? Et plus précisément, si on retourne à ah, sketch mile, il va en fait sélectionner ce fichier et il va importer cette page. C' est dans le tutoriel précédent. Je dis que dans le cas où vous avez des bateaux d'art qui ont besoin d'importer les avoir dans une page. Ce que nous allons faire, c'est revenir en principe. Qu' est-ce qui se passe ? Donc, cette valeur de deux x est quelle est la science de la qualité souhaitez-vous rendre les restaurants ? L' une des choses que vous devez comprendre est que lorsque vous importez vos actifs en principe, ils sont pasteurisés, ils sont pasteurisés, qui signifie que tout ce qui était un texte dans l'esquisse devient maintenant une image et que vous n'avez pas images vectorielles. En fait, c'est le truc. Vous n'avez pas d'images vectorielles en principe, part celles qui disent, si vous sélectionnez un rectal, ce sera une image vectorielle en principe. Mais si vous l'amenez d'ailleurs, ce sera le repos. Maintenant, il vous dit que la qualité à laquelle il voulait un X est pour une visualisation normale, et je préfère les travaux orteils afin que ce problème particulier de pixel soit le mieux adapté pour la direction à cela, s'il vous plaît. Mais j'ai vraiment excité avant d'aimer la qualité que vous pouvez utiliser. Trois. Exécuter une plage plus en détail de croquis, mais pour moi de x fait juste très bien. Alors, cliquez sur notre importation. Donc, si je viens de déplacer cela au centre, donc au moment où ils ont tous été importés dans un seul à bord, tous vont apparaître sur l'écran précédent. Si nous voulons seulement vendre commande de presse que déplacer électoralement que je sélectionne et je vais déplacer ces faire en dehors de la sortie dit que vous pouvez voir que disparu et puis je vais nettoyer sur la scène mis place vers le haut et je vais redimensionner ce bon. Alors, il va voir ici ? On a une belle Fitch là-bas. Donc juste pour confirmer ce que j'ai dit, si vous regardez cet actif particulier, comme vous pouvez le voir, nous ne pouvons pas l'éditer. Il a été habillé, élevé son pas directeur. C' est la même chose que l'effet de grande tante, et vous pouvez voir où un bon nom vient en. Donc nous ne sommes pas vraiment, vraiment confus. Donc, avec cela, nous avons notre horaire important en principe et vous pouvez le prévisualiser ici. Vous avez appris à importer votre fichier d'esquisse dans principal, comment créer un pas augure comment utiliser la crème précédente. Et nous allons commencer à travailler sur la façon d'animer cette bataille particulière pour ressembler à quelque chose de proche de notre état final. Je te verrai dans la prochaine dernière 5. Notre première animation : le bouton d'action: donc bonjour là. Bienvenue dans un autre cours sur la façon d'animer un croquis. Toi, j'utilise le principe. Donc, pour résumer la dernière leçon, nous avons appris comment importer notre fichier d'esquisse dans le principal jusqu' à comment créer un pas ennuyé comment utiliser des éléments tels que le rectangle et le texte. Pourquoi devrait-on les utiliser ? Je ne devrais pas. Nous avons appris qu'en cliquant sur Importer, il nous offre la possibilité d'importer le fichier d'esquisse ouvert depuis l'esquisse vers le haut. Nous avons également discuté de la qualité que vous souhaitez rendre vos couches de restaurants. Et aujourd'hui, nous allons regarder comment effectuer l'animation réelle. Donc pour aujourd'hui, nous voulons animer ce fond particulier et l'avoir à cet ex l'avoir de l' état final à ce bas particulier, et nous ne toucherons rien d'autre pour l'instant, même ces icônes. Donc, ce que nous allons faire est que Foster commencera par dupliquer cette œuvre d'art. Donc, sélectionnez la scène mise en place et appuyez sur la commande D, ce qui créerait une nouvelle sortie. Et comme vous pouvez le voir, c'est juste ici. Donc il suffit de sélectionner l'icône plus sur le deuxième haut serait en fait, ce que je vais même faire, je vais juste nommer ceci ? Je dirai Start State et j'appellerai cet état final. Donc, dans l'état final, le bouton shoot, L'icône X aurait dû tourner d'un tel nombre de degrés. C' est donc le panneau, que vous pouvez utiliser pour modifier les propriétés des éléments, que vous voyez à l'écran. Vous pouvez manipuler la propriété X. Pourquoi, Si vous cliquez sur l'étiquette de leur propriété spécifique, vous pouvez simplement conduire à ah deux position ou changer cette propriété avec une plus grande position. Je vais juste tout retourner à la façon dont ça va. Donc, la propriété que nous voulons animer dans ce cas est l'angle. Alors commençons par le faire tourner à, et c'est 45 degrés cool. Donc si on part ici, c'est notre état de départ. Dans notre état final, vous verrez qu'il est reflété. Mais comment pouvons-nous l'amener à animer cela et à le faire passer à cela ? Nous avons besoin d'un événement qu'il répondra idéalement, quand vous en haut, il est supposé faire passer cette icône à cette icône X ici, donc nous double-cliquez sur le bouton d'action et cliquez sur le bouton éclair pour ajouter un événement. Donc, vous allez sélectionner le haut et juste tenir sur votre souris et le faire glisser jusqu'à l'état final que vous voulez. Donc, si nous cliquons, vous pouvez voir qu'il a réellement animé. Et probablement ce n'est pas si visible en ce moment, parce que les degrés qui étaient irritants est dans autant. Donc ce que je vais faire, c'est que je vais sélectionner l'icône plus et je vais probablement la faire tourner un peu plus, hum, pour quelque chose. Voyons voir, la prochaine fois que ça ressemble à quelqu'un 33, il est vérifié. C' est aussi simple que ça. Donc, si vous cliquez sur la flèche, vous pouvez réellement voir que vous n'avez pas l'option orteil jouer autour avec l'accélération et le timing de cette animation. Donc tu vois, je veux qu'une tante de l'animation commence rapidement. Andi, alors et alors voyons, comme vous pouvez le voir. Mais j'aime les par défaut. Je vais juste garder ça. Mais juste pour que vous sachiez, vous pouvez réellement changer ces facilités particulières. Vous pouvez utiliser le graphique une recherche pour créer ce qui est une anse personnalisée. Alors revenons à l'animation originale et ouais, hum, pas un lisse, mais vous comprenez l'idée. Revenons donc à une valeur par défaut. J' aime comment cela fonctionne, comme à quoi cela ressemble et un certain nombre de choses. Donc, disons dans cette animation, c'est de l'action. Mais à droite Et dans cet autre état, appelons simplement cette action mais sur et appelons cette icône plus deux et voyons quel sera le résultat. Comme vous pouvez le voir, il n'anime plus que nous étions habitués, car ce qui se passe, c'est que vos couches sont censées être nommées de la même manière à l'extérieur . Pour que l'animation soit totalement réussie pour l'orteil d'animation en fait, toutes vos couches doivent être identiques et vous ne pouvez même pas voir qu'on nous dit ici. Oui, comme vous pouvez le voir dire animer en nommant Leon à la fois sur les tableaux, bouton d'action plus icône et ainsi de suite et ainsi de suite. Alors qu'est-ce qu'on va faire dans ce tableau d'art particulier ? Nous devons avoir le bouton d'action, puisque nous commençons là que l'état de départ est le beurre d'action et l'icône plus dans l'état final, il va chercher un calque appelé bouton d'action et plus icône toe. Appliquez l'effet de transition. Donc, si nous cliquons que de nouveau remarquera que maintenant il s'anime bien. Donc, l'autre chose que nous voulons faire est quand vous cliquez à nouveau sur le X, il doit revenir en arrière. Donc, c'est assez simple. Et ce que vous faites, c'est que vous cliquez simplement sur le clic sur l'action, mais sélectionnez arrêt et pointé vers la destination que nous voulons. Et quand nous cliquons, nous avons l'effet qui peut avoir un état final, et vous pouvez basculer entre les états du bas, qui est ce que nous voulons essentiellement. Bientôt notre prochaine classe, nous allons examiner l'utilisation des composants de sorte que nous n'avons pas besoin de créer un nouveau hors-bord pour chaque transition finale. Et c'est une coupe courte comment gagner du temps lors de l'animation. Donc avec ça, je vais te donner un petit défi. Vous pouvez ajouter un autre élément à l'écran et simplement essayer d'animer de différentes manières. Vous pouvez changer la position de cette bouteille, probablement le déplacer de, disons, avoir la position de départ là et dire que la position finale devrait être ici. Et si je fais ça, comme vous pouvez le voir, il sera juste déplacé là. Donc, le défi que je vous donne est juste de jouer avec les différents types d'assouplissement sur ce jeu avec les différents types d'effets. C' est très, très simple et familiarisez-vous avec eux avec ça, je vous verrai dans la prochaine classe. 6. Animation finale : les boutons de l'option: Salut. Aujourd'hui, on va voir comment animer ces trois boutons. Désolé pour ça. Comment animer les trois boutons et les faire venir de sous le bouton plus et sortir de ce côté Similaire à la façon dont nous avons le marqué en transition. Donc, la façon dont nous allons le faire est d'abord, nous avons besoin de chacune des icônes d'une origine. Donc, l'idée devrait être quand je clique dessus, ils devraient sortir de dessous ce bouton. Donc, de l'état, c'est dans l'état d'origine que je vais faire. Nous allons avoir un changement ici. Donc, je vais faire est que je vais juste prendre cela les options révélatrices et ce que je vais faire. Je vais copier. Et je vais coller ça et je vais déplacer ça ici. Je vais juste aligner ça. D' accord. Impressionnant. Je vais éteindre ça pour l'instant parce qu'on n'a pas besoin de voir ça en action. Et si nous avons remarqué, si vous vous souvenez de la dernière fois pour moins de 20 viandes, eh bien, ils doivent être nommés de la même façon. Alors, en finale, où est-ce ? Oui, dans les états finaux sont ennuyés. Nous avons également besoin des mêmes couches de l'autre côté. Alors je le ferai, je le ferai. Je les cacherai de vue et je les copierai et les bêtes. Oui. Donc juste après le copier-coller, nous pouvons maintenant commencer à animer ces états et je peux commencer à réorganiser ces éléments sous ce bouton particulier. Alors maintenant, je vais prendre ça au moment où je vais le faire manuellement. Oh, laissez-moi juste les ajouter ici quand vous les empilez les uns sur les autres et les empilez sur le dessus et ensuite je vais déplacer le bouton d'action ci-dessus pour qu'il soit assis au-dessus d'eux et je vais aussi en fait, puisque nous avons déjà fait cela, je vais supprimer Copier cela. En fait, il n'y a pas besoin de cette action, mais maintenant aussi, supprimez le bouton d'action et oui, nous y allons. Il y a donc une chose que nous devons changer. Cependant, cela est à un angle de degré zéro. Oui. Alors voyons. N' est rien exactement. Comme prévu. Donc, quand nous animons à partir de quand ils cliquent dessus d'ici à ici, donc deux choses vont se passer. Tout d'abord, nous devrions obtenir le bouton d'action passer à sur l'icône X. Et la deuxième chose est que ces Icahn devraient apparaître amusants les touches fléchées pour simplement les déplacer . Mais ils devraient vraiment se présenter. Et on a juste aligné ça exactement. Donc, ils devraient en fait venir de sous l'icône aussi bien. Donc, quand nous cliquons que ceux-ci apparaîtront également. Donc, la première chose que nous devons nous assurer que nos couches ont effectivement nommé le même nom. Et comme vous pouvez le voir, le nom est différent. Donc ça ne marchera pas vraiment. Donc je vais prendre un peu de temps et nettoyer ça. Pour ne pas animer tout cela, c'est juste si nous appuyons longuement dessus, l'événement par défaut qui sera sélectionné est un sommet. Donc si on laisse tomber, ce qui va se passer, c'est bien , euh, mais il y a une chose qu'on doit animer et c'est l'icône X. Alors nous allons juste nous précipiter dans l'icône plus, le plus jeune Waas 133 et avec ce boo et comme nous l'avons fait là-bas, mais sur les filles, nous allons ajouter un haut en arrière. Et tout comme cette animation fluide de toutes les icônes juste là 7. Animations réutilisables en utilisant des composants et des fins de clôture: Il y a donc une fonctionnalité en principe appelée composants qui nous donne la possibilité de créer des animations réutilisables. Donc, je veux dire, tels composants n'ont pas essentiellement besoin d'avoir un arrière-plan complet derrière eux tout le temps. Vous pouvez simplement avoir cet élément particulier comme son propre composant, juste en animant seul. Donc, pour créer un composant ou allégué à ce sujet dans un composant, ce que nous allons faire, je vais cliquer dessus. Et si votre propre principe trois. Il suffit de cliquer sur le composant Créer et cela devrait chronomber votre couche dans un composant. Donc, la raison pour laquelle il a cette adresse parce qu'il y a un événement auquel il était déjà attaché , donc il fera à la place bien, eh bien, ne le touchez pas. On n'en a plus besoin. Et revenons à l'instance et à ce que je vais faire. Je vais prendre cela et pour éditer vous sélectionnez les composants, qui a l'icône d'engrenage et cliquez sur le composant d'édition, et je vais créer un nouvel art serait où je vais coller. Laisse-moi m'assurer qu'ils font la queue. Ok, les alignent sur. Je vais augmenter la taille de ça vers le haut. Laissez-moi parfumer cela et centrer cela aussi. Ok, donc la même chose. Et si j'ai choisi là parce que vous pouvez voir. Mais il semble aller de l'avant. Donc, cela signifie qu'il y a une partie de celui-ci qui n'est pas aligné. Oui, c' est le truc de l'animation. Vous devez vous assurer que le chili se déplace aussi peu que possible pour créer le statique. Je sens que nous désirons gagner juste un peu plus et étaient là. Ok, donc juste pour renommer, j'appellerai ça options. Oui. Donc, si vous revenez à l'instance, nous pouvons maintenant voir que nous n'avons pas besoin d'avoir de relation avec cela seulement. Cliquez sur ce bouton. Et comme ça, nous n'avons pas besoin d'avoir deux états, en particulier pour les petits composants tels que celui que vous devez animer sur différents écrans. Et, comme d'habitude, renommez vos composants. Oui, alors c'est tout. Et vous pouvez supprimer cela, serait. Il n'est plus utilisé, et c'est tout. Vous avez donc appris à faire les animations sans les composants. Evil toe a appris comment les composants peuvent entrer pour vous permettre de construire des animations réutilisables et d'accélérer votre travail. Grippe Donc, je vous encourage certainement à vérifier le prochain cours que je vais avoir, qui plongera plus profondément dans le principe dans des choses comme les effets de parallaxe défilant comment utiliser différents événements pour créer des animations bien connues qui se trouvent sur dribble. Et je vous encourage à rester seule. dehors de cela, je vous encourage à partager votre projet, partager ce que vous venez avec, et je ne manquerai pas de le commenter. Avec ça, j'ai une belle journée et merci d'avoir écouté.