Donnez vie à un logo : Principes de l'animation pour les concepteurs d'animation

1. Bienvenue: Je dois avouer que même si je crée des animations pédagogiques pour gagner ma vie, je n'ai jamais aimé les films d'animation ou les émissions de télévision. Pour moi, ce que je fais est complètement différent des dessins animés. Quand je suis tombé sur 12 principes de l'animation de Disney, j'ai pensé qu'ils ne s'appliquaient pas à mon travail, mais je me suis trompé Bonjour, je suis Meghan Frias et bienvenue dans un cours essentiel et fondamental Donnez vie à un logo Principes de l'animation pour les motion designers. Le but des principes de l' animation est de créer l'illusion de la vie. Quel que soit le style d'animation, stop motion 2d3D ou les animations graphiques, l'objectif est de prendre quelque chose statique et d'ajouter du mouvement pour lui donner vie Les principes de l'animation sont essentiels pour y parvenir. Une animation de logo est le projet idéal pour mettre en pratique ces principes. Comme un logo comporte moins de couches et est plus court que ce que vous pourriez rencontrer dans d'autres projets d'animation, vous pouvez vous concentrer sur le perfectionnement de chaque principe et sur le peaufinage de chaque image Tout au long de ce cours, je présenterai de nombreux exemples de logos et vous guiderai à travers des exercices pour vous entraîner à appliquer chaque principe d'animation. Vous apprendrez à utiliser le principe de la mise en scène pour créer du rythme. Comment appliquer l'anticipation pour capter l'attention du public. Et comment ajouter des actions de suivi et de superposition pour rendre les animations plus réalistes et bien plus encore Avant de suivre ce cours, vous devez avoir une certaine expérience de l'animation et des After Effects. Vous trouverez plus de détails sur la page de description du cours , y compris comment suivre le programme de mon cours. Je recommande vivement mon cours sur les mouvements fluides comme condition préalable afin que vous soyez à l'aise ajuster les courbes de mouvement dans l'éditeur de graphiques. Les démos et les exercices pratiques téléchargeables se dérouleront dans After Effects, mais les concepts que nous aborderons s'appliquent à tous les types d'animation et peuvent être traduits dans n'importe quel logiciel Non seulement vous sortirez du cours avec un logo animé personnalisé, mais vous comprendrez mieux comment utiliser les principes de l' animation pour communiquer des idées et des émotions par le biais du mouvement dans tout projet de motion design. Si vous êtes prêt à donner vie à un logo, alors commençons. 2. Projet de classe: Ce cours est une fusion de l'animation de logo et des principes de l'animation. Le projet de classe consiste à animer un logo, mais en cours de route, vous apprendrez les principes de l'animation qui peuvent être appliqués à n'importe quel projet de motion design L'objectif de ce cours est de vous aider à concevoir une animation de logo personnalisée d' apparence professionnelle. Mais tout aussi, sinon plus important encore, vous devriez avoir une solide compréhension des principes de l' animation et de la façon dont vous pouvez les appliquer à votre futur travail de motion design. Je ne peux pas vous dire comment animer tous les logos possibles, et si un tutoriel prétend le faire, il y a probablement un hic Ils ne vous enseignent probablement qu' une seule technique générique simple. Une animation de logo de haute qualité est propre à ce logo spécifique. Il existe donc une infinité de techniques que vous devrez peut-être apprendre ou développer. Dans cet esprit, attendez-vous à ce que ce cours fournisse des directives sur la façon d'animer un logo Eh bien, en utilisant une liste modifiée moderne des principes de l'animation, vous devrez peut-être trouver d'autres ressources pour comprendre l'aspect technique du look que vous essayez d'obtenir. Je vais vous indiquer des ressources qui, à mon avis, vous seront utiles. Mais n'hésitez pas non plus à poser des questions dans l' onglet discussions de votre logo. Vous pouvez animer le logo d'une marque existante ou un logo que vous avez créé vous-même. Cela pourrait même être pour une marque imaginaire. Si vous ne savez pas quoi animer, vous pouvez créer un logo pour vous-même, pour votre marque personnelle Il peut s'agir d'une icône qui vous représente, votre nom, écrite de manière personnalisée. Ou tu pourrais faire quelque chose de cool avec tes initiales et l'animer. Nous allons commencer par passer en revue certaines des bases de l'animation de logos et les principes de l'animation. Ensuite, nous aborderons chaque principe. Tout au long de ces vidéos, je vais vous montrer différentes animations de logo afin que vous puissiez voir comment les principes peuvent être appliqués et inspirer pour votre propre animation de logo. Pendant que vous regardez, esquissez des idées pour animation de votre logo sous la forme que vous préférez. À la fin de la plupart des vidéos, il y a une invite pour vous aider dans le processus de planification de l'animation du logo pendant que nous examinons les principes de l'animation. Je vais vous montrer comment les appliquer à ces animations simples et à ces effets secondaires. Vous pouvez vous entraîner à mes côtés en téléchargeant ce fichier de projet. Chaque principe d'animation possède sa propre composition qui est entièrement configurée et prête à être mise en pratique pour que vous puissiez vous entraîner à appliquer ce principe Toutes ces compositions sont compilées dans cette composition, de sorte qu'à la fin du cours, vous aurez accès à ce guide pratique qui vous aidera à vous souvenir de tous les principes de l'animation Je vous ai également fourni une version complète au cas où cela vous aiderait à apprendre, mais ce n'est certainement pas aussi significatif que de terminer le guide vous-même. Si vous avez envie de commencer à animer votre logo au milieu du cours, alors allez-y Sinon, lorsque vous aurez fini regarder chaque principe de la vidéo d'animation, vous devriez avoir un plan solide pour commencer à animer votre logo Et vous pouvez vous rendre au travail et à la fin du cours, trouverez une vidéo bonus sur les techniques courantes d'animation de logos. Cela peut donc être utile sur le plan technique pour donner vie à votre logo. 3. Animation de logo 101: Parce que nos yeux sont naturellement attirés par les objets en mouvement. Animer un logo, même de manière simple, peut le rendre plus accrocheur Mais une animation de logo personnalisée peut permettre à la marque se démarquer encore plus et de la rendre plus mémorable. Si l'objectif d'un logo est communiquer l'essence d'une marque, l' animation du logo devrait aider à atteindre cet objectif et même communiquer des informations supplémentaires sur la marque La façon dont le logo est animé doit donner un aperçu de la marque. Ce logo à double jargon est dynamique et ludique, ce qui correspond à la façon dont le double jargon a donné à Pi qui correspond à la façon dont le double jargon a donné Ils apprennent une langue avec leurs personnages animés amusants. L'animation du logo Uber, en revanche, est beaucoup plus sérieuse. C'est simple mais efficace. Et les lignes parallèles qui ressemblent à des lignes sur une route indiquent ce que fait Uber lors de la planification de l'animation de votre logo. Réfléchissez à la façon dont il sera utilisé. Vous pouvez voir ici comment l'animation du logo fonctionne également comme animation de lancement de l'application Uber. Une animation de logo peut aider à expliquer ce que fait une marque et peut même raconter une mini-histoire sur la marque. Voici quelques exemples. Au début, ils ressemblent à des cercles abstraits, puis ils prennent la forme de raisins puis se transforment en liquide, ce abstraits, puis ils prennent la forme de raisins puis se transforment en liquide, qui fait allusion à ce que fait le vignoble dans ce fait le vignoble dans Lorsque cette ligne virevolte, elle suggère la forme d'un Cette animation du logo Google a été conçue pour assurer la transition entre les différentes marques principales de Google. C'est un cas d'utilisation unique, mais il peut peut-être vous inspirer pour l'animation de votre logo. Il est important de bien comprendre la marque afin que l'animation de votre logo corresponde à ses autres visuels, messages et valeurs Selon que vous êtes réellement engagé pour animer le logo ou simplement pour vous entraîner Voici quelques idées pour effectuer des recherches sur la marque avant de commencer à planifier l'animation de votre logo. J'espère que ce processus vous aidera également à trouver des idées d'animation. Il existe différents types d'animations de logo. Le premier est la révélation du logo. Le logo apparaît à partir de rien, s'arrête puis disparaît. Dans ce cours, nous nous concentrerons principalement sur la révélation des logos , mais sachez que ce n'est pas votre seule option. Dans certains cas, vous souhaiterez peut-être créer une animation entre deux versions d'un logo, comme par exemple, la marque du logo et le type de logo Vous pouvez également envisager de créer une boucle d'animation de votre logo. Il peut s'agir simplement d'une subtile animation en boucle si cela a du sens pour lequel vous prévoyez d'utiliser le logo Peut-être, comme pour un panneau numérique où le logo reste visible pendant un certain temps mais n'est pas le point central, aucun de ces types d'animations de logo convient parfaitement au projet de classe. Faites ce qui convient le mieux à votre logo. Si vous travaillez sur une animation de logo pour un client, assurez-vous de communiquer partie du logo que vous allez animer Qu'il s'agisse de la marque du logo, du type de logo ou des deux. Et si le slogan ou le slogan doit être inclus. Et réfléchissez à la manière dont l'animation du logo est prévue pour être utilisée. Pour animer les différents éléments du logo, vous aurez besoin d'un fichier Illustrator Vous devez séparer les différents éléments du logo dans leurs propres couches afin de pouvoir les animer. Vous devrez peut-être recréer certaines parties du logo en fonction de la façon dont vous souhaitez l'animer Veillez simplement à ce que votre recréation soit aussi parfaite que possible au pixel près. Je suppose que vous êtes à l'aise avec Adobe Illustrator, que vous pouvez préparer animation de votre logo et que vous savez comment importer le fichier Illustrator dans After Effix Si vous avez besoin d' aide pour tout cela, consultez ce didacticiel ou ce cours. 4. Introduction aux principes de l'animation: Les 12 principes de l' animation de Disney ont été inventés par Ollie Johnson et Frank Thomas dans leur livre de 1981, The Illusion of Life Comme le suggère le titre du livre, le but des principes de l'animation est de prendre illustrations statiques et de les rendre crédibles pour leur donner l'illusion de la vie Même si la technologie a changé depuis la sortie du livre, les principes étaient à l' origine destinés à l' animation de dessins animés en deux D dessinés à la main. La plupart de ces principes sont toujours très pertinents pour le motion design moderne. Mais dans cet esprit, nous travaillerons sur une liste modifiée de principes d' animation au fur et à mesure que vous travaillerez sur l'animation de votre logo. N'oubliez pas que tous les principes d' animation ne conviennent pas à tous les logos. Quel que soit le type d'animation, il est important d' utiliser intentionnellement les principes de l'animation. Passons maintenant à chaque principe de l' animation et commençons à planifier l'animation de votre logo. 5. Le ralentissement en début et en fin de mouvement: J'espère que vous connaissez les termes timing et espacement dans l'animation Je vais les passer brièvement en revue, mais s'ils sont nouveaux pour vous, je vous recommande vivement de regarder mon cours Smooth Moves pour apprendre tous les concepts que vous devez connaître et comment les appliquer à vos animations. Alors retrouvez-moi dans ce cours. Le timing fait référence au temps qui s'écoule entre les images-clés lorsque l'on examine la chronologie. Le timing est la distance entre les images-clés. Ainsi, comme vous le savez probablement, images clés plus rapprochées produiront animation plus rapide ou une synchronisation plus rapide que les images clés plus éloignées les unes des autres. Lorsque vous travaillez sur une animation très courte, comme un logo, vous pouvez vous attendre à consacrer un certain temps à la synchronisation de votre animation en déplaçant simplement les images-clés de quelques images Lorsqu'une animation n' est pas très longue, il est très important que le moment soit bien choisi. L'espacement est ce qui se produit dans l'espace entre les images-clés. N'oubliez pas qu'une vidéo n'est qu' une série d'images fixes passées sous nos yeux si rapidement que nous voyons une image animée. Lorsque les animateurs Disney ont inventé les principes de l'animation pour la première fois, chaque image devait être dessinée à la main Si un animateur voulait donner l'impression qu'un personnage se déplace plus lentement, cadres seraient rapprochés Alors que si un personnage était censé avoir l'air de se déplacer rapidement, cadres seraient plus éloignés les uns des autres. C'est de là que vient le terme espacement. Lorsque vous utilisez After Effects, l'ordinateur interpole toutes les images entre vos images clés Il s'en chargera pour vous. Mais en tant qu'animateur, vous pouvez contrôler la manière dont After Effects interpole entre les images clés de deux manières Tout d'abord dans le temps ou l'interpolation temporelle, qui se fait en ajustant l'assouplissement des images clés Cela est similaire à la façon dont un animateur dessine des images plus près unes des autres ou les éloigne pour des mouvements plus lents ou plus rapides Comme vous le savez, pour assouplir les images clés et After Effects, sélectionnez-les avec le bouton droit de la souris, choisissez Keyframe Assistant, puis Easy Ease ou utilisez le raccourci clavier Neuf images clés linéaires sont en forme de losange et les images clés avec quelconque assouplissement sont en forme de sablier Une fois que vous avez appliqué Easy Ease, vous pouvez personnaliser davantage ce mouvement dans l'éditeur de graphes. Et cela sera essentiel pour mettre en valeur les mouvements rapides et lents dans l'animation de votre logo afin de rendre plus réaliste ou plus expressive. Si vous n'êtes pas familier avec l'éditeur de graphes, mon cours Smooth Moves couvre tout ce que vous devez savoir. Le réglage de l' interpolation temporelle d' une animation peut modifier radicalement le message véhiculé par le mouvement Il peut indiquer le poids d'un objet et sa composition, s'il est léger et gonflable ou lourd et rigide Lorsque vous réglez le timing d'une animation, vous pouvez avoir l' impression qu'elle prend vie. Mais comme vous le verrez dans le reste du cours, intégration des principes de l'animation peut rendre l'animation encore plus vivante. La deuxième façon de contrôler l' espacement est dans l'espace, exemple à gauche, à droite, en haut et en bas du cadre C'est ce que l'on appelle l' interpolation spatiale. Et cela se fait souvent en ajustant la trajectoire d'une couche. Nous en parlerons plus en détail dans une vidéo ultérieure. Le premier principe de l'animation est directement lié à l'interpolation temporelle Et c'est ce qu'on appelle slow in and out. Les motion designers appellent généralement cela un mouvement d'assouplissement. Cela commence lentement, accélère, puis ralentit avant de s'arrêter peut être plus agréable à regarder qu' une animation linéaire, car elle reflète plus fidèlement façon dont de nombreuses choses bougent dans la vie réelle. Dans le fichier de projet After Effects fourni avec ce cours, trouvez le dossier des exercices et la première composition intitulée slow, In and out Pour le premier exercice, appliquez simplement Easy Easy aux images clés du carré inférieur. Je sais que cela peut sembler incroyablement facile, mais cette composition est intégrée à la composition principale où vous découvrirez tous les principes de l' animation Tous les exercices doivent être effectués pour y parvenir. Toutes les animations de logo n' utilisent pas plusieurs principes d'animation. Parfois, la seule chose dont vous avez besoin, c'est d'entrer et de sortir lentement. Ces exemples semblent très fluides et professionnels, mais le seul principe d' animation qu'ils utilisent est le ralentissement de l'entrée et de la fin. Remarquez que l'animation comporte plusieurs parties et que chacune d'entre elles utilise des ralentissements d'entrée et de sortie. C'est quelque chose dont nous parlerons plus tard. Si l'animation de votre logo n'a besoin que d'un assouplissement vraiment fluide, n'arrêtez pas de regarder. Rappelez-vous maintenant que les principes de l'animation sont essentiels pour améliorer tout projet de motion design Lorsque vous animez un logo, vous devez ajuster l'assouplissement de tous les différents éléments du logo Dans cet exemple, je n'ai utilisé aucun des principes de l'animation et toutes les images clés sont linéaires. Maintenant, comparez cela à cette version où j'ai simplifié toutes les images clés, mais je n'ai utilisé aucun des autres principes de l'animation. La deuxième version semble déjà bien meilleure. C'est moins mécanique et plus souple. Maintenant, regardez la différence. Lorsque je personnalise l'assouplissement de chaque élément. C'est beaucoup plus intéressant parce que j'ai exagéré un autre principe de l'animation, celui des mouvements lents et rapides, pour le rendre plus dramatique et plus vivant Il s'agit de la version finale qui intègre d'autres principes d'animation à. Nous y reviendrons plus tard. Une autre chose à prendre en compte lors de l'animation d'un logo est le flux global de l'animation Il ne suffit pas de s' assurer que mouvement de chaque élément est réglé avec précision. Vous devez également tenir compte de l'ordre et de la vitesse dans lesquels les éléments apparaissent, ainsi que du rythme qu'ils créent. Dans cet exemple, l'animation de chaque lettre commence et se termine en même temps. Même si l'animation de chaque lettre commence lentement, s' accélère, puis ralentit à la fin. Toutes les lettres le font en même temps. C'est prévisible, pas très intéressant. Vous ne voudriez pas non plus animer chaque lettre une par une car cela est également prévisible et risque de prolonger l' animation trop longtemps Il est préférable de les décaler et de les superposer lorsque les lettres arrivent C'est mieux, mais les lettres sont échelonnées du même montant pour chaque lettre L'animation globale est linéaire pour le rendre encore meilleur. Maintenant, j'ai échelonné les lettres. L'animation dans son ensemble démarre plus lentement avec moins de pièces en mouvement. Accélère au milieu lorsque plusieurs objets bougent en même temps, puis ralentit lorsque moins d'objets bougent. Cela a un bon flux global. Cela vaut pour les logos qui ne sont pas simplement du texte. Voici quelques autres exemples d'animations qui ralentissent le déroulement général de l'animation. À retenir, le principe de l'animation, connu sous le nom de ralentissement d'entrée et de sortie ou d'accélération, peut être appliqué au niveau d'une image clé ou à l'ensemble de l'animation 6. La mise en scène: mise en scène consiste à attirer l'attention du public le ou les éléments les plus importants d'une scène afin de communiquer efficacement un message. La mise en scène et l'animation sont similaires à la composition et aux illustrations. Il existe plusieurs manières d'attirer l'attention du spectateur sur l'aspect le plus important de votre animation. Faire un bon travail de mise en scène peut aider à rendre les scènes compliquées faciles à suivre. Une mise en scène efficace comporte beaucoup de choses. Concentrons-nous sur l'animation du logo. Lorsque vous réfléchissez à la manière dont vous souhaitez animer votre logo, essayez de créer deux à cinq phases ou scènes dans ce logo Tout s'anime pratiquement en même temps. C'est un peu chaotique et cela ne se passe pas très bien pour améliorer les choses. L'idée ici est similaire à celle dont nous avons parlé dans la dernière vidéo à propos échelonnement lorsque des éléments entrent et de l'utilisation du principe du ralentissement de l'animation dans son ensemble Lorsque vous appliquez le principe de la mise en scène, vous pouvez diviser l' animation en morceaux, que j'appellerai des scènes pour ce logo Comme nous avons différents types d' éléments dotés de différents types d'animation, j'ai divisé les différentes actions principales en scènes à tour de rôle. Remarquez comment les scènes créent un rythme avec chaque scène. Utiliser le slow in et le slow out entre chaque scène. Les éléments s'arrêtent juste un instant, puis une fois que le logo est dans son état final, il s'arrête plus longtemps pour que le spectateur puisse bien le voir. Ensuite, il s'anime. Cette version a une bien meilleure fluidité. Le spectateur sait où regarder. C'est donc une animation plus agréable à regarder. Cela fonctionne souvent bien de faire disparaître l'animation du logo, être plus simple et d'avoir moins de scènes que l'animation du logo qui apparaît L'animation du logo disparaissant pourrait n' être qu'une scène Vous devez tenir compte du contexte dans lequel votre logo sera utilisé. Mais généralement, une fois que le logo s'anime, le spectateur est prêt à voir ce qui va suivre Vous ne voulez donc pas faire traîner l'animation trop longtemps. Dans cette animation, il y a trois scènes claires à animer et elle s'arrête Puis deux scènes pour animer la scène 123, puis 12 pour animer. Cet exemple comporte cinq scènes plus courtes à animer dans 12345. Une mise en scène efficace peut également impliquer l'utilisation de différents outils pour attirer l'attention du spectateur. Nous avons tendance à regarder l'élément le plus grand, le plus brillant ou le plus rapide d'une scène Vous pouvez utiliser la couleur, la taille ou la vitesse pour diriger le regard du spectateur là où vous voulez qu'il regarde. Dans cette animation, la cuillère attire l'attention du spectateur vers le centre du cadre, d'où sortent les lettres Puis un petit carré tombe de la fin, ce qui attire l'attention du spectateur. Puisque tout le reste a cessé bouger, ce carré tourne en boucle, attirant notre attention sur le slogan ici. L'aiguille et le fil dirigent notre regard sur l' ensemble du cadre et l'animation des éléments du logo final suit toujours l' aiguille et le fil. Cela est particulièrement utile pour ce logo car il comporte deux lignes de texte et nos yeux doivent être dirigés de la droite vers la gauche lorsque le deuxième mot s'anime Il n'existe aucun exercice pratique pour ce principe d'animation, mais c'est maintenant à vous de planifier deux à cinq scènes qui constitueront l'animation de votre logo. Vous pouvez esquisser vos idées la manière qui vous convient le mieux. Assurez-vous de prendre en compte le flux ou le rythme de votre animation, en gardant à l'esprit le principe du ralentissement à l'entrée et à la sortie. 7. La trajectoire arquée: Le principe de l'animation, connu sous le nom d'Arc, est lié à l'interpolation spatiale Dans la vraie vie, les objets bougent souvent sous la forme d'un arc en raison de la physique ou de l'anatomie. Par exemple, une balle lancée ou rebondissant se déplace en forme d'arc Habituellement, plus un objet se déplace rapidement, plus sa trajectoire est droite. Pensez à une partie amicale de catch contre un joueur des ligues majeures de baseball, lançant la balle aussi fort que possible. Dans cet exemple, j'ai rendu le mouvement des colibris plus réaliste en l' animant en arc Les colibris sont cependant connus pour être rapides. Si je l'animais en ligne sur l'écran et que je voulais montrer à quelle vitesse il se déplace, je l'animerais en ligne droite Dans certains cas, les objets se déplacent en forme d'arc en raison de leur structure. Lorsque les couches sont parentées ensemble, l' animation d'un arc se fait pratiquement automatiquement Un autre exemple est celui d'une personne qui balance ses bras en forme d'arc raison de la façon dont elle est connectée au corps. Les pieds se déplacent en forme d'arc pour la pièce, qu'elle soit au-dessus du sol. Et les hanches bougent en une série d'arcs. Souvent, pour animer un objet en forme d'arc , il suffit d' ajuster la trajectoire de mouvement si vous avez sélectionné votre couche et qu'elle contient des images clés, mais que vous ne voyez pas de trajectoire de mouvement comme celle-ci Tout d'abord, assurez-vous que ce bouton est passé en bleu. La case Afficher les contrôles de couche sous vue est également cochée. Si vous n'avez pas de poignées à ajuster sur votre trajectoire de mouvement, accédez à l'outil stylo, cliquez et maintenez, puis sélectionnez l'outil de conversion de sommets Lorsque vous survolez un point ou une image-clé sur la trajectoire du mouvement, vous devriez avoir cette forme en V à l'envers, et vous pouvez cliquer pour ajouter ces petites poignées Assurez-vous ensuite de revenir à votre outil de sélection habituel en allant ici et en le sélectionnant, ou en utilisant le raccourci clavier V. Vous pouvez maintenant faire glisser ces poignées pour créer une forme d'arc. Voyons comment animer un objet projeté en l'air et qui se déplace en arc Tout d'abord, je vais définir des images clés pour simplement les déplacer sur l'écran. Ensuite, je vais passer entre ces deux images clés et simplement les déplacer vers le haut. Et cela créera automatiquement cette forme d'arc. Il ajustera automatiquement votre trajectoire de mouvement. Vous pouvez entrer et ajuster cela davantage. Je ne veux pas vraiment que ça se courbe ici. Je vais juste apporter ces poignées ensuite. Je vais ajouter des touches faciles à mes images-clés en faisant neuf. De cette façon, je peux les ajuster dans l'éditeur de graphiques. Si nous le rejouons maintenant, cela ne semble pas très réaliste. Sélectionnons ces images-clés et passons dans l'éditeur de graphes Je vais regarder le graphique de vitesse. La première chose que je peux voir sur le graphique de vitesse, c'est que le véhicule ralentit lorsqu'il s'arrête, lorsqu' il atterrit sur le sol. Nous ne voulons pas que cela se produise, car la gravité accélérerait les objets vers le sol lorsqu'ils tombent. Je vais simplement sélectionner cette image clé, la maintenir enfoncée, déplacer et la faire glisser vers le haut pour que la vitesse ne ralentisse pas lorsqu'elle atteint le sol. Maintenant, ça a l'air un peu mieux, mais c'est étrange que cela s' arrête complètement au sommet de l'arc, car cela n' arriverait pas dans la vraie vie. Nous avons besoin que la vitesse ne soit pas nulle à ce point central. Nous devons le faire, si nous essayons simplement de faire apparaître ces images clés, elles seront séparées comme ça. Nous devons plutôt les sélectionner. Cliquez avec le bouton droit pour accéder à la vélocité des images-clés. Cochez ensuite cette case qui indique Verrouiller en continu les données sortantes aux entrées. Maintenant, si je fais glisser ces images clés vers le haut, elles bougent ensemble. Je vais faire quelque chose comme ça. Parce que je veux que le haut de l' arc soit le point de mouvement le plus lent Voyons maintenant à quoi cela ressemble. Cela semble déjà beaucoup plus réaliste. Si vous souhaitez exprimer la composition de cette forme, vous pouvez ajuster davantage l' éditeur de graphiques pour qu'elle paraisse plus lourde, plus légère ou autre. Pour appliquer ce principe, vous devez prendre ces images clés linéaires situées dans le cercle inférieur et les ajuster pour rendre cette animation plus réaliste. La première chose que je vais faire est de faciliter l'entrée de cette dernière image-clé sur la position X. De cette façon, il aura l'air de rouler puis de ralentir lorsqu'il s'arrêtera. Je vais cliquer dessus avec le bouton droit de la souris. Accédez à Keyframe Assistant, puis il devrait avoir la forme d'un demi-sablier sur la gauche Ensuite, je vais sélectionner toutes les images clés en position Y et les appliquer facilement Elles sont prêtes à être ajustées dans l'éditeur de graphiques. Ensuite, je peux ouvrir l'éditeur de graphes. Passons au graphique des valeurs. Maintenant, je veux ajuster ce graphique pour le rendre plus réaliste. N'oubliez pas que la pente du graphique des valeurs à tout moment est la vitesse ici. Comme la pente du graphique se stabilise, la vitesse ralentit. C'est à ce moment que le cercle touche le sol pour la première fois . Cela signifie qu'il ralentit lorsqu'il atteint le sol. que nous ne voulons évidemment pas car la gravité attire les objets vers le sol. Il les accélère vers le sol. Je vais prendre cette poignée et la faire glisser vers le bas pour que ce graphique ressemble davantage à ceci, sans qu'il se stabilise. Ensuite, je vais faire la même chose pour tous ces autres points, juste au moment où ils toucheront le sol. De plus, lorsque le cercle se soulève du sol, il ne se courbe pas et ne se déplace pas lentement ici. Je vais également prendre ces poignées et les faire glisser vers le bas à des endroits comme celui-ci. Quand il rebondit sur le sol et remonte. Je vais faire en sorte que le premier manche soit un peu plus long que le second , car au fur et à mesure qu'il rebondit, il perdra de son élan De cette façon, le graphique reflète cela. D'accord, donc quelque chose comme ça a l'air plutôt bien. Mais rejouons-le et assurons-nous de pouvoir l' ajuster pour qu'il soit un peu plus lent au début. Peut-être faire ce saut, comme s'il avait une sorte de ressort ou une sorte de puissance provenant de la balle. Une autre chose à garder à l'esprit si vous animez à partir de zéro , c'est que les points où la balle rebondit devraient se dégrader avec Si vous deviez tracer une ligne d'ici à là, ces rebonds ne devraient pas toucher la ligne, ils devraient se trouver juste en dessous Ils se dégradent un peu plus à chaque fois que le cercle perd de son élan lorsqu'il rebondit Le résultat final devrait ressembler à ceci. Voici quelques exemples de logos qui incorporent des arcs lorsqu'ils animent quoi que ce soit, y compris un logo Gardez ce principe d' animation à l'esprit et demandez-vous si ce que vous animez doit se déplacer sous la forme d'un arc 8. L'anticipation: L'anticipation est un mouvement juste avant l'action principale qui va dans le sens inverse de l'action principale. Vous pouvez le considérer comme la fin ou la phase préalable à l'action. L'anticipation sert de repère visuel à ce qui va se passer. Il attire l' attention du spectateur sur cet objet afin qu' il le regarde et ne rate pas l'action principale. Des exemples d'anticipation dans la vie réelle incluent le fait de plier les genoux avant de sauter ou tirer le bras vers l'arrière avant de lancer une balle. L'anticipation peut être utilisée pour rendre les animations plus réalistes. Dans cette animation sur la cuisson de légumes, la main se déplace vers le bas en prévision de retourner les Ou bien, l'anticipation peut donner à une animation un aspect plus caricatural. Ce personnage d'Evocado plie les genoux en prévision de faire quelque chose d' aussi simple qu'une vague qui ne nécessite pas de fléchir les genoux L'anticipation peut ajouter de l' intérêt et attirer l' attention du spectateur lorsqu'il s'agit d'animer des éléments plus abstraits tels que des logos Mais avant de regarder des exemples de logos, entraînons-nous à appliquer l' anticipation dans le fichier d'exercices pour le carré du milieu. Je vais animer la position en se déplaçant un peu vers la gauche avant l'action principale, où elle se déplace vers la droite Je vais porter ma tête de lecture à une dizaine d' images, puis définir une autre position, image clé avec la même valeur Ensuite, je vais passer à la deuxième image clé et déplacer cette position vers la gauche. Allons-y à 200. ajoutons de la facilité à Si vous le souhaitez, ajoutons de la facilité à ces images clés . Vous pouvez ajuster ces images clés dans l'éditeur de graphiques pour donner un aspect plus personnalisé au carré inférieur. Au lieu d'animer la propriété position pour créer de l'anticipation, animons la propriété de rotation Si nous ouvrons cette couche sous Transform. Si nous devions faire pivoter cette propriété de rotation, elle tournerait à partir du centre du carré, elle traverserait le sol. Nous pourrions simplement déplacer ce point d'ancrage dans le coin inférieur pour qu'il pivote à partir du coin inférieur. Mais des images-clés sont déjà configurées ce qui gâcherait ces images-clés De plus, lorsque nous abordons des animations plus complexes, le fait que le point d'ancrage ne se trouve pas au centre et dans le coin inférieur peut être un inconvénient. Je vais vous montrer une astuce qui peut vous aider à atténuer les épingles situées sous le contenu il y aura un rectangle puis transformera le rectangle un. Ci-dessous, nous avons un tout autre ensemble de propriétés de transformation que nous pouvons animer. Et ces propriétés de transformation n' affecteront que ce rectangle. S'il existe plusieurs formes différentes dans cette couche de forme, ces propriétés de transformation affectent uniquement cette forme. Chaque forme de la couche aurait son propre ensemble de propriétés de transformation. Ces propriétés de transformation affecteraient alors tout ce qui se trouve sur l'ensemble de la couche. Ainsi, vous pouvez avoir essentiellement deux points d'ancrage différents pour la couche de forme principale. Nous allons simplement conserver ce point d'ancrage tel quel pour ne pas affecter les images clés déjà configurées. Mais pour ce point d'ancrage, vous pouvez voir que lorsque vous sélectionnez la forme, ce sera celui-ci ici. Nous voulons déplacer ce point d'ancrage, qui est le point d'ancrage de cette forme uniquement, vers le coin inférieur Ce rectangle ne mesure que 200 x 200. Ce point sera négatif 100, 100. Je vais le taper sur le point d'ancrage. Vous pouvez voir que cela m'a fait changer de forme. Mais une solution rapide consiste simplement à prendre la propriété position et à utiliser ce fouet pour relier la propriété position au point d'ancrage Maintenant, il a remis la forme en place. Cela signifie simplement que la propriété de position de ce rectangle sera toujours la même que celle du point d'ancrage. Je pourrais déplacer ce point d'ancrage, vous pouvez le voir se déplacer en bas. Maintenant, la position ne bouge pas. Je vais juste annuler ça. Le point d'ancrage est maintenant là. Si nous le faisons pivoter, il tournera à partir de ce coin au tout début de la chronologie. Je vais juste définir la propriété de rotation. Pour que cette rotation soit nulle , avançons dans le temps. Probablement juste un peu avant cette image clé de première position. Faisons-le revenir en arrière, peut-être quelque chose comme ça. Ensuite, je vais passer cinq images à égale distance après la première image clé et remettre cette rotation à zéro. Ajoutons de la facilité à ces images clés. Cela semble lent. Cela n'a pas vraiment l'air réaliste. Je vais ajuster ces images clés dans l'éditeur de graphes. Je regarde le graphique des valeurs ici. Comme je viens d'appliquer Easy Ease à ces images clés, ralentissent au fur et à mesure qu' atteignent le sol, ce qui n'est pas réaliste. La gravité l' attirerait vers le sol. Cette image-clé ne devrait pas ralentir. Au fur et à mesure qu'elle entre dans l'image clé, je vais faire glisser cette poignée vers le bas. Il accélère pour atteindre cette image-clé qui est plus belle. Mais nous pourrions peut-être même rendre les choses encore plus extrêmes. Fais-le tenir une seconde en haut ici. Voyons à quoi cela ressemble. Oui, ça a l'air mieux. Mais évidemment, passez autant de temps personnaliser pour qu'il ressemble exactement à ce que vous voulez Voici quelques exemples de logos utilisant l'anticipation. Ici, le O a une fin assez évidente . C'est de l'anticipation. N'oubliez pas que l' anticipation ne doit pas se trouver au tout début d'une animation. Dans cet exemple, les cercles se déplacent vers le haut avant de descendre, puis le logo principal apparaît Dans cet exemple, les points apparaissent par anticipation avant devenir le microphone et également avant d'écrire les lettres pour Google. Les points se déplacent légèrement entre les différentes scènes, ce qui pourrait être considéré comme une forme subtile d'anticipation. Dans cet exemple, les formes se déplacent légèrement vers le bas en prévision d'un déplacement vers le haut à mesure que les autres formes apparaissent. Il descend également anticipation avant de détruire les autres formes N'oubliez pas que l' anticipation peut être utilisée pour donner à une animation un aspect plus ludique ou plus caricatural Surtout si cette anticipation est exagérée. Nous parlerons plus en détail de l' exagération plus tard. 9. Suivre: Le suivi est le contraire de l'anticipation. Il s'agit d'une action consécutive à l'action principale qui dépasse ou dépasse l'état final ou la pose Le suivi est une action postérieure ou une reprise de l'action principale. Dans la vraie vie, il peut être difficile de s'arrêter. Soudain, lorsque vous faites un saut, vos genoux se plient légèrement. Ou lorsque vous lancez une balle, votre main continue de bouger même après que la balle ait quitté votre main. Le suivi est naturel. L'ajouter à vos animations peut donc les rendre plus réalistes ou les objets plus souples, et donc les dessiner pour l'exercice de suivi Commençons par le carré du milieu et animons la propriété position Je vais juste faire glisser cette dernière image-clé sur une dizaine d'images jusqu'à 25 images Ensuite, là où elle était à 15 images, je vais copier cette image-clé à 25 images et la coller Et puis faites-le glisser un peu plus vers la droite. Faisons 800 pixels. Ensuite, je sélectionnerai ces images-clés et je les simplifierai facilement. Je vais aller dans l'éditeur de graphes et améliorer un peu l'apparence. Je vais regarder le graphique de vitesse. Faisons en sorte que le ralentissement prenne plus de temps. Lorsqu'il s'agit d'un arrêt, c'est comme s'il y avait une friction avec le sol qui le ralentissait. Mais justifions le dépassement en le rendant un peu plus rapide vers la fin de l'animation de l'action principale Je veux dire, c'est comme maigrir jusqu'à arrêter, et puis c'est pour ça que ça dépasse Voyons à quoi cela ressemble. Ça a l'air plutôt bien. N'hésitez pas à l' ajuster comme vous le souhaitez pour l'animation du carré inférieur. Animons la propriété de rotation, comme nous l'avons fait avec l'exercice d'anticipation Je vais basculer vers le bas, passer sous le premier rectangle du contenu , puis transformer le rectangle 1 Je vais déplacer le point d'ancrage du rectangle de transformation 1 vers le coin inférieur droit. Cette fois encore, cela ressemble à la leçon d'anticipation. Si vous ne comprenez pas pourquoi je fais cela, assurez-vous de revenir en arrière et de regarder cette leçon. Ce point d'ancrage doit être 100, 100. Ensuite, je dois associer la propriété position à la propriété point d'ancrage afin qu'elle ne bouge pas. Tout est configuré et je peux maintenant le faire pivoter à partir de ce coin inférieur droit juste avant la propriété de position finale. Je vais faire pivoter le carré. Définissons ici une propriété de rotation. Vers 1 h 10, je vais juste vous appuyer sur le clavier pour que je puisse facilement voir les deux ensembles d'images clés Alors passons peut-être à peu près ici. Faisons-le pivoter, faisons 15 degrés, puis avançons de quelques images supplémentaires et remettons-le à zéro. Ajoutons ensuite de la facilité à toutes ces images clés. Je vais aller directement dans l'éditeur de graphiques et ajuster cela. Le rouge est la propriété de position et le jaune est la rotation, et je regarde le graphique de vitesse. Je vais ajuster la position de la même manière que je l'ai fait sur le carré du milieu. Faisons en sorte que ce soit un peu plus rapide vers la fin de l'action principale. Ensuite, pour ce qui est de la rotation, je veux qu'elle pivote très rapidement vers le haut, comme si elle était projetée dans cette rotation. Ajustons le graphique pour que cela se produise immédiatement, il s'affiche. Ensuite, je veux qu'il tourne comme si la gravité le tirait vers le sol. Mais c'est comme si on planait dans les airs. C'est comme vaciller quand on fait pivoter quelque chose Il va atterrir, mais rester pivoté vers l'arrière, comme s'il vacillait dans cette partie où le graphique est Voyons à quoi cela ressemble. Très bien, c'est donc notre exercice de suivi. Vous pouvez également combiner rotation et position pour que les deux agissent comme un suivi. Quelle que soit l'animation que vous animez, vous devez être en mesure justifier pourquoi elle se déplace comme elle le fait Voici quelques exemples de logos utilisant le suivi. Dans cet exemple, la ligne incurvée située sous le R, je vais appeler un smiley, que je vais appeler un smiley, pivote d'avant en arrière lorsqu'elle s'anime dans les trois points lorsqu'ils dépassent et rebondissent légèrement, ce qui peut être considéré comme un suivi dans les trois points ils dépassent et rebondissent légèrement, ce qui peut être considéré comme un ce qui peut être Lorsque le point blanc traverse les deux autres lignes vertes, il dépasse sa position finale lorsqu'il devient des lunettes, puis il rebondit dans sa position finale de repos C'est un autre exemple de suivi dans cet exemple que nous avons déjà considéré comme un bon exemple d'anticipation. Il y a également beaucoup de suivi dans la façon dont les lettres pivotent une fois qu'elles arrivent. De plus, lorsque les lettres tombent, il y a un certain dépassement et elles tombent plus bas pour revenir à leur position finale Tout comme l'anticipation, le suivi peut rendre vos animations plus réalistes, ou si vous les exagérez, il peut les rendre plus ludiques 10. Le chevauchement des actions: action qui se chevauche est le mouvement d'objets qui basculent, coulent, battent ou tombent derrière la masse centrale d' C'est généralement quelque chose que le personnage ou l'objet que vous animez fait involontairement Mais cela ne signifie pas que cela se fait automatiquement. Vous devez toujours l'animer. chevauchement des actions est dû à la façon dont les choses sont structurées L'élan généré par l'action primaire et les lois de la physique. Considérez cela comme une réaction en chaîne et considérez cela comme la façon dont les choses sont parentées dans After Effects agit par exemple d'un bras qui se balance pendant la marche, d'un geste de la main qui traîne derrière le bras ou d'objets soufflant dans Dans cette animation d' algues se déplaçant sous l'eau, remarquez comment le pédoncule de la vigne se plie, ce qui est l'action principale Et les feuilles pivotent, ce qui correspond à l'action qui se chevauche La rotation des feuilles est légèrement inférieure à la courbure de la tige Cette animation d'une fille faisant du vélo comporte un tas d'actions qui se chevauchent Sa tête, ses cheveux, ses boucles d'oreilles et sa chemise bougent dans le vent. Et le panier gonflable et les chiens, les oreilles agitées par le vent N'oubliez pas que les objets bougeront à des vitesses différentes en fonction de leur poids, de leur taille et de leur structure. Les actions qui se chevauchent peuvent se produire pendant une ou toutes les phases de l' anticipation d'une animation, de l'action principale, et se poursuivre pour animer l'action qui se chevauche. Dans notre exercice d'entraînement, nous allons ajouter un pli au carré. Pour ce faire, vous devez accéder aux effets et préréglages et simplement rechercher CC, plier puis le faire glisser sur le calque qui va probablement couper une partie de votre carré Et cela est dû à l' endroit où se trouvent ces manettes au début et à la fin du virage. Nous devons les placer plus près du carré afin qu'ils ne coupent rien. Mais au fur et à mesure que le carré se déplace sur l'écran, ces manettes restent en place. Ils ne bougent pas avec le carré. Voici ce que nous pouvons faire pour y remédier. Je vais passer en E, X, puis dans le virage Je dois également simplement ouvrir cette couche pour voir à la fois les positions X et Y. Vous verrez Y dans une seconde. Le début du virage se situera en bas du carré. Je vais cliquer sur ce chronomètre pour commencer à écrire des expressions Si vous n'avez jamais écrit d'expression auparavant, ne vous inquiétez pas. Je vais vous expliquer tout ce dont nous avons besoin. Pour saisir deux valeurs différentes, x et une valeur y, car c'est ce que le début implique. Je vais juste taper entre crochets parce que c'est ainsi que vous écrivez deux nombres comme ça. Ensuite, je vais utiliser ce fouet pour saisir l'emplacement de la position x. Maintenant, la position de départ du contrôleur de pliage sera toujours la même que celle du carré, c'est exactement ce que je vais vouloir. Ensuite, je vais écrire une virgule, et maintenant nous devons définir la position y. Je vais faire la même chose. Prenez le fouet et faites-le glisser vers la position Y. Ensuite, je vais faire plus 100 parce que je veux que ce ne soit pas au centre du carré mais 100 pixels plus bas, ce qui arrivera juste en bas du carré, parce que je sais que ce carré mesure 200 x 200 pixels. N'oubliez pas de taper un crochet, puis de cliquer dessus. Ensuite, si vous cliquez à nouveau sur CC, pliez-le, vous devriez voir que le contrôleur est attaché en bas ici. Nous devons maintenant faire la même chose avec le contrôleur final. Si vous vous inquiétez de la façon dont cela est recadré sur les côtés, nous devons simplement nous assurer que le contrôleur final se nous devons simplement nous assurer que trouve plus haut et cela résoudra Je vais encore une fois cliquer sur le chronomètre pour indiquer la fin du virage Premier type de support. Il en va de même pour la position X. Nous allons faire descendre le fouet jusqu' à la position X, puis une virgule, puis sélectionner le fouet jusqu'à la Nous voulons que ce contrôleur soit plus haut que le carré. Je vais faire comme moins 300 , puis le crochet final. Faisons un clic pour en sortir. Ça a l'air bien. Voyons si on change ça, ça a l'air bien. Ce n'est pas en train d'être coupé. Si le vôtre est coupé pour une raison quelconque, augmentez simplement ce chiffre. Animons maintenant la propriété bend. Je vais passer à la première image clé et régler le montant du pli à zéro. Ensuite, nous allons également définir le montant du pli à zéro sur la dernière image clé. Puis, au milieu de ces deux images-clés, plions-le vers l'arrière Ajoutons simplement de la simplicité à toutes ces images clés et voyons à quoi cela ressemble. Vous pouvez accéder à l'éditeur de graphiques pour ajuster davantage vos images clés, mais cela donne déjà un peu plus de personnalité au pour ajuster davantage vos images clés, mais cela donne déjà carré. Dans ce cas, le fait de rendre la boîte souple lui donne un aspect plus caricatural Mais les actions qui se chevauchent peuvent également être utilisées pour rendre les choses plus réalistes Comme vous l'avez vu dans l'exemple du vélo, les principes de l'animation peuvent être combinés pour obtenir un effet amélioré. Voici une animation simple explique la différence entre suivi et une action qui se chevauche , ainsi que la manière dont elles peuvent être combinées suivre signifie qu'il y a un couvre-chaussure après l'action principale action qui se chevauche signifie que les pièces d'un objet sont décalées et que, lorsqu'elles se déplacent, elles sont légèrement en retard par rapport à ce qui est à l'origine de l' Enfin, les actions de suivi et de chevauchement peuvent être combinées Pour donner un aspect plus dynamique à l'animation de l'exercice, vous pouvez ajouter un suivi à l'animation de flexion, qui agira comme une action superposée La façon dont il se plie d'avant en arrière lorsqu'il s'immobilise est appelée amortissement Les oscillations sont un autre moyen de rendre une animation plus réaliste Pour celui-ci, j'ai déjà ajouté l'effet de courbure pour vous. Accélérez juste un peu les choses. Je vais passer à la première image clé de la position, mettre le virage à zéro. Puis, au milieu de ces images-clés, remettons-le à moins 30. Ensuite, un peu après cette première image clé, définissons-la sur positif. Et un peu moins de 30, faisons le positif 20. Il va reculer dans l'autre sens, puis avancer un peu. Faisons marche arrière. Faisons moins cinq. Je ne fais que deviner ces chiffres et nous pouvons toujours les ajuster , puis recommencer et les remettre à zéro Il suffit de cliquer sur, vous, de voir ces images clés. Et ensuite, soulagez-les facilement. Voyons juste à quoi ça ressemble. D'accord, ça a l'air un peu lent, juste ici. Peut-être que si je ramène cette image-clé, je pourrai peut-être la ramener de cette façon Apportez-les de cette façon. Je vais juste ajuster le chronométrage pour qu'il se plie. Et puis, comme il a moins de place à plier, il va aller un peu plus vite. Voyons donc à quoi cela ressemble. C'est une petite animation de suivi assez subtile. Mais si vous voulez indiquer que le carré est fait de quelque chose de plus Jellowy, vous pouvez ajouter d'autres oscillations arrière, le faire plier davantage ou effectuer les ajustements nécessaires dans l'éditeur de graphes pour que votre imagination reflète la composition du carré Passons à l'exercice suivant, composition numéro six, en assemblant le tout pour cette animation L'idée est de combiner plusieurs principes d'animation dont nous avons parlé jusqu'à présent. Je vous laisse le soin de l'animer puisque j'ai abordé tout ce que vous devez savoir Mais voici ce que vous devez inclure pour l'action principale. Tu entres et tu descends lentement. Techniquement, il existe plusieurs façons d' intégrer l'anticipation. Mais j'avais prévu de faire revenir le carré avant le début de l'action principale. Pour intégrer une action de superposition, le carré se plie Comme il pivote en prévision de l'action principale. Ensuite, il doit y avoir une action de suivi et de chevauchement lorsqu' il pivote et se plie vers la droite après l' Enfin, il y a un suivi sur le suivi qui fait des virages d'avant en arrière avant de s'arrêter complètement Il y a une petite astuce que vous devrez utiliser avec le point d'ancrage pour que la rotation fonctionne correctement. Si vous regardez ma version complète, vous remarquerez que j'ai encadré le point d'ancrage et qu' il y a deux images-clés de maintien Pour la première partie de cette animation, j'ai besoin que le carré puisse pivoter en arrière de cette façon Le point d'ancrage doit se trouver dans le coin inférieur gauche. J'ai défini une image-clé de maintien sur le point d'ancrage pour que le point d'ancrage soit à moins 100, 100 pour le début de l'animation Une fois qu'il a atteint ce point, c' est-à-dire juste avant qu'il ne commence à tourner dans l'autre sens, à la fin de l'animation, j'ai défini une autre image-clé de maintien de telle sorte que le point d'ancrage se déplace en une seule fois vers le coin inférieur droit, soit 100 ou 100 Si cela n'a aucun effet sur la forme elle-même, cela ne déplace pas la position, c'est parce que ce que j'ai configuré dans cette première leçon avec anticipation, c'est cette partie où j'ai séparé la position du point d'ancrage Voici quelques exemples de logos qui utilisent des actions de superposition Eh bien, si vous regardez de plus près, certaines lettres contiennent des éléments qui sont en retard. Sur le premier D, la partie circulaire est en retard de la lettre lors suivi du rebond Un autre exemple est la façon dont le deuxième D pivote et rebondit. Vous pourriez également soutenir qu'il y a chevauchement d'actions sur l'ensemble du logo pendant la partie où les lettres se déplacent vers haut en prévision de leur animation Comme les lettres sont décalées, cela crée un effet d'action qui se chevauche Remarquez comment le carré vert fait rebondir les lettres, et elles agissent comme une unité La façon dont les lettres rebondissent toutes mais sont légèrement décalées est un exemple d'action qui se chevauche 11. Animation: Les animations secondaires sont des détails animés qui soutiennent l'action principale. Pensez-y comme si vous superposiez des animations. Ces petites animations secondaires embellissent ou améliorent l'action principale pour rendre l'animation plus réaliste ou lui donner plus Dans cette animation, l' action principale consiste à soulever des poids et l'animation secondaire correspond aux expressions faciales du personnage. Ici, l'action principale est la tortue qui bat ses nageoires pour nager La façon dont les ailerons se plient serait considérée comme une action qui se chevauche animations secondaires ici sont le clignotement et la respiration, que l'on peut voir sous forme de bulles Les animations secondaires devraient ajouter une signification supplémentaire qui ne détourne pas l'attention de l'action principale Par exemple, cela peut indiquer le caractère de leur humeur dans leurs émotions, intentions, leurs réactions, etc. Bien que vous puissiez entendre les termes « action superposée et « animation secondaire » utilisés de manière interchangeable, il s'agit de deux termes différents Ce sont deux moyens d'ajouter des détails et d'améliorer l'animation. Les actions qui se chevauchent sont généralement involontaires. Pensez à des objets qui se balancent, échouent ou prennent du retard, souvent à cause de l'anatomie du personnage ou de l'objet action qui se chevauche a besoin d'une autre action pour se chevaucher car il s'agit d'un résultat ou d'une réaction à une autre action Et cela ne serait peut-être pas possible sans cette autre action. L'action secondaire est plus susceptible d'être volontaire. Pensez à des personnages qui font plusieurs choses à la fois. Par exemple, si l'action principale consiste à marcher, le personnage peut tourner la tête et regarder autour de lui , ce qui constituera une action secondaire. Ce n'est pas nécessaire car il ne s'agit pas d'une réaction physique ou du résultat d'un autre mouvement. Il s'agit d'un mouvement supplémentaire qui pourrait se produire sans l'action principale. L'animation secondaire n'est pas toujours volontaire. Par exemple, des éléments tels que le clignotement seraient une animation secondaire plutôt qu'une action superposée Comme il se chevauche avec une autre animation, il ne s'agit pas d'une réaction ou d'un résultat d'une autre animation Vous avez déjà vu comment le mouvement de la tête, des cheveux, des boucles d'oreilles et de la chemise de la fille soufflés par le vent, et de la chemise de la fille soufflés par le vent le panier rebondissant et les oreilles du chien sont autant d'exemples d'actions qui se chevauchent Elles se produisent toutes parce qu'elle fait du vélo. L'animation de la langue du chien, comme s'il haletait, n'est pas une réaction aux autres mouvements, elle serait considérée comme une animation secondaire Le chien n'a pas besoin de haleter dans cette situation. Si le chien ne roulait pas dans un panier à vélo, il est peut-être encore haletant. Mais comme il serait réaliste pour un chien de haleter dans cette situation, ajout d'animations secondaires comme celle-ci peut aider à donner vie à la scène. Une animation peut être une animation secondaire dont les actions se chevauchent Par exemple, dans cette animation, l'action principale consistant manger la queue est une animation secondaire. Le chat est peut-être en train de manger sans remuer la queue. La façon dont le bout prend du retard est une action qui se chevauche Le point à retenir ici n'est pas que vous deviez choisir une animation pour comprendre ce qui constitue quel principe Ce qui est important ici, c'est que vous puissiez superposer les principes de l'animation pour créer l'illusion de la vie. Pour l'exercice pratique, je vais simplement ajouter une animation de rotation en même temps que l'action principale du carré se déplaçant sur l'écran. Cette animation de rotation est superposée à l'action principale, mais n'a rien à voir avec l'action principale. Je vais simplement définir une image clé, par exemple en commençant un peu après la première image clé, pour que la rotation soit nulle. Ensuite, à la dernière image-clé, animons-la à 180 degrés Ajoutons des facilités à ces deux éléments. Le terme action secondaire était à l'origine destiné à l' animation de personnages pour les logos. Nous pouvons utiliser le terme un peu plus librement pour désigner simplement des animations supplémentaires qui améliorent l'animation principale Dans cet exemple, la rafale qui provient de la bulle vocale peut être qualifiée d'animation secondaire. Ou dans cet exemple, les points d'accent sont des détails animés supplémentaires qui améliorent l'animation globale. Dans cette animation, plusieurs accents et rafales peuvent être considérés comme des animations secondaires 12. La compression et l'étirement: squash et l'étirement se produisent lorsqu' un objet est animé pour s'étendre et se compresser afin de lui donner une illusion de poids ou de flexibilité. Vous pouvez utiliser squash et stretch pour indiquer de quoi est fait un objet, qu'il soit dur comme une pierre ou souple comme du caoutchouc. Lorsque vous animez squash et stretch, considérez le matériau dans lequel l'objet est fabriqué et comment celui-ci se comporterait dans la vie réelle. Vous pouvez exagérer cela pour lui donner un aspect plus caricatural squash et le stretch peuvent être utilisés à des fins d'anticipation et/ou de suivi. Et lorsqu'elle est combinée à d'autres propriétés animées, elle peut créer des actions qui se chevauchent Dans cet exemple, au lieu d'avoir le gâteau attaché au sol lorsqu'il tombe, utilise la courge et l'étirement comme forme de suivi. Comme le gâteau se plie également d'un côté à l'autre lorsqu'il s'écrase et s'étire, cela peut être considéré comme un chevauchement Il y a aussi d'autres fois où le gâteau et les cerises s'étirent, comme ici, en attendant que la cerise soit jetée Et aussi quand la cerise tombe. L'utilisation du squash et du stretch rend la pièce plus expressive, intéressante et lui donne plus de personnalité. Lorsque vous animez squash et stretch, vous devez vous assurer de conserver le volume de l'objet pour lui donner un aspect crédible En d'autres termes, si vous étirez la hauteur d'un objet, vous devez également réduire sa largeur. plupart du temps, vous pouvez vous en tirer en redimensionnant un objet, sorte que les chiffres semblent égaux et opposés. Par exemple, si vous redimensionnez la valeur x à 120 %, puis vous redimensionnez la valeur y à 80 % Techniquement, ce n'est pas totalement exact, même si pour être précis, il suffit de quelques calculs simples L'aire d'un rectangle est égale à sa largeur multipliée par sa hauteur après que Effects utilise x et y. Allons-y. Avec cette équation, vous pouvez déterminer la surface Si vous utilisez la propriété scale pour animer le squash et l'étirement, vous pouvez simplement utiliser les pourcentages d' échelle 100 fois 100 égale 10 000 Maintenant que vous connaissez l'aire, vous pouvez réorganiser cette équation Si vous voulez écraser l'objet de manière à ce que x soit égal 120 %, vous pouvez déterminer quelle doit être la valeur y pour maintenir une zone cohérente 10000/120 est égal à 83,3 Il n'y a pas beaucoup de différence dans le premier exemple, mais le calcul est simple. Pourquoi ne pas être précis ? Vous pouvez rendre cela encore plus facile en configurant une expression pour automatiser les calculs à votre place si vous travaillez avec des cercles. Techniquement, la surface est égale à pi fois le rayon au carré. Mais lorsque vous essayez simplement d' animer le squash et l'étirement, vous pouvez vous en tirer en utilisant la même équation, x fois y égale la surface C'est suffisant car il n'est pas très important que vous calculiez l'aire de la forme avec précision. Il est juste important d' écraser et d'étirer la forme proportionnellement. La zone de la forme ne change pas. Si vous voulez être très précis lorsque vous travaillez avec différents types de formes, alors allez-y et faites le calcul. Mais sinon, vous pouvez simplement utiliser cette simple équation. Et l'expression que je vous montrerai plus tard fonctionnera également. Au cours de l'exercice pratique, j'ai configuré deux cercles différents. D'une part, vous allez animer la propriété size pour animer squash et stretch Pour l'autre, vous allez animer la propriété scale. Commençons par la propriété scale. Assurez-vous que celui-ci est visible et que l' autre ne l'est pas. J'ai déjà défini le point d'ancrage au bas de ce cercle pour vous. Parce que lorsque vous l' écrasez et que vous l'étirez, vous voulez qu'il s'écrase et s'étire depuis le sol. Il est logique que le point d'ancrage soit là. Vous verrez que j'ai configuré mes cadres clés de position. Mais si vous jouez à ce jeu, rien ne se passe encore réellement. Si le tien est comme ça, c'est censé être comme ça. Et nous allons y aller et faire en sorte que cela rebondisse réellement en utilisant ces images-clés existantes La première chose à faire est d'ajouter un as à ces images-clés , puis d' accéder à l'éditeur de graphes. Maintenant que nous avons des poignées, puisque nous les avons ajoutées, nous pouvons ajuster cette courbe et cela lui donnera un rebond Mais si vous ajustez cette courbe et que vous ne voyez rien se produire, exemple si vous regardez très attentivement, elle bouge légèrement. Mais regardez aussi l'échelle, elle se déplace à peine d'un pixel , même pas un pixel. Nous pourrions simplement continuer à faire glisser ces poignées et les vraiment jusqu'à ce que la balance s'agrandisse Mais j'ai trouvé que c'est plus facile de passer au milieu de ces images-clés, de simplement les déplacer et regarder comment l'échelle du graphique a déjà changé. Maintenant, je peux régler ces poignées beaucoup plus facilement. Ensuite, je peux même supprimer cette image clé, et l'échelle du graphique reste relativement la même. Cela permet simplement d' entrer plus facilement et d'ajuster les différentes poignées pour que vous puissiez effectuer ces rebonds. Je suis juste en train de régler ces poignées pour que la première sur le côté gauche soit un peu plus longue que celle sur le côté droit, peu plus longue que celle sur le côté droit, mais elles se renversent. La raison en est qu'au fur et à mesure que le cercle rebondit, il va perdre de son élan à cause de la gravité Cette courbe devrait être décroissante, mais pas simplement de façon linéaire Ces bosses devraient diminuer à chaque fois. Je vais juste ajuster mon graphique pour m'assurer qu'il reflète cela. Vous pouvez ajuster ces poignées vous le souhaitez, en fonction de la hauteur à comme vous le souhaitez, en fonction de la hauteur à laquelle vous souhaitez qu'elles rebondissent Vous pouvez régler cela avec ces poignées Une fois que votre animation est bonne, vous pouvez y ajouter du squash et du stretch. Je vais sortir de l'éditeur de graphes , puis ouvrir la propriété scale En ce qui concerne la propriété scale, je vais configurer cette expression pour automatiser l'écrasement et l' étirement afin de ne pas avoir à faire le calcul pour chaque image-clé, définir une expression sur laquelle vous souhaitez sélectionner une option ou Alt Cliquez sur le chronomètre , puis vous pouvez commencer à taper. Nous devons définir deux variables différentes. Les variables sont comme des noms ou des espaces réservés pour des éléments que nous utiliserons ultérieurement dans l'expression Je vais définir la première variable en tapant VAR, puis vous pourrez deviner ce que sera celle-ci. Pour la valeur x de l'échelle, je vais prendre ce fouet et simplement saisir cette valeur x en gros Je dis juste que la valeur x sera celle que j'ai définie ici. C'est tout ce que cela veut dire. Ensuite, pour la fin de chaque ligne, comme pour terminer une phrase par un point, vous devez la terminer par un point-virgule Ensuite, pour la ligne suivante, je vais définir la variable y. Alors je veux que celle-ci soit l'aire au-dessus de x. Si vous vous souvenez de cette équation, c'est ce que sera la valeur Y. Je vais définir le x en ajustant simplement cette valeur et en encadrant cette valeur Ensuite, il déterminera automatiquement ce que y doit être pour conserver la même zone. Je sais que l'aire de ce cercle est 100 fois 100. Je vais simplement saisir 10 000, puis diviser par x. Vous pouvez voir que 10 000, puis diviser par x. j'utilise maintenant cette variable que j'ai définie sur la première ligne, puis un point-virgule pour terminer la ligne, puis entre crochets parce que nous définissons deux Comme la balance nécessite deux nombres différents, ce sera simplement x puis y parce que je lui ai déjà dit quels seront ces nombres ici. Il existe certainement plusieurs manières de configurer une expression pour automatiser le squash et l'étirement, mais je pense que c'est la méthode la plus simple. C'est pourquoi je vous le montre ici. Maintenant, si je devais ajuster l'échelle X, je pourrais utiliser le curseur pour l'ajuster Faisons juste 150. Vous pouvez voir que la valeur Y a été automatiquement calculée pour moi à 66,7 %. Si je vais dans l'autre sens, 71 % dans la valeur x seront 140,8 dans la Je n'ai pas à m' inquiéter de la valeur y, je dois juste définir la valeur x. Vous pouvez entrer et saisir un chiffre, et cela fonctionne aussi. Vous pouvez également utiliser le curseur. Notez également qu' il semble que vous puissiez ajuster la valeur y, mais que lorsque vous lâchez prise, vous devez simplement ajuster la valeur x. Cela peut être un peu déroutant. Mais n'oubliez pas que vous pouvez définir la valeur x et qu'il calculera automatiquement la valeur y. Lorsque vous le remettez à 100, cela devrait sembler normal et ne pas être redimensionné cela devrait sembler normal de manière étrange Je vais juste fermer ceci et maintenant nous pouvons saisir cette valeur par image-clé Je vais me rendre à l'endroit où le cercle est sur le point d'atterrir. Et cela fera environ 20 images où il se déplacera le plus rapidement lorsqu'il tombera au sol. Et je vais définir la première image-clé à échelle ici. Ensuite, juste avant qu'il ne touche le sol, ce sera son plus long étirement. Il va être allongé, ce qui représente peut-être 80 % de la valeur x. Ensuite, dès qu'il atteindra le sol, lorsqu'il touchera le sol, il s' écrasera dans la direction opposée. Faisons juste 120 pour la courge. Et puis, lorsqu'il se soulève du sol, vous pourriez l'étirer comme s'il collait au sol. Ou vous pourriez simplement le faire revenir à sa forme normale. Voyons à quoi ressemblent cette première courge et ce premier étirement. Bien, maintenant faisons la même chose au prochain bond. Peut-être juste quelques images clés avant qu'il n'atterrisse. Je vais régler la première image clé, puis juste avant qu'elle n'atterrisse, réduisons-la un peu, car elle ne rebondira pas aussi haut, donc elle ne s'écrasera pas et ne s'étirera pas autant Faisons 85. Ensuite, une fois qu'il touche le sol, faisons 115. Ensuite, à l'image suivante, je le remettrai à 100. Ensuite, pour le prochain rebond, réglez la première image clé 100 %. Ensuite, elle s'étirera Faisons-en 92, encore moins. Quand il touchera le sol, il s'écrasera. Faisons un sur huit et revenons à 100 pour le tout dernier rebond. Je ne vais même pas m'étirer du tout, je vais juste faire une petite courge. accord ? Il n'y a pas vraiment d'intérêt à assouplir l'une de ces images clés, car les images clés séparées par une seule image ne sont pas interpolées. Donc je vais juste laisser ça tel quel. Et voyons à quoi ça ressemble. Voyons maintenant comment animer squash et stretch en utilisant la propriété size plutôt que la propriété scale Pourquoi voudriez-vous animer la propriété de taille ? Je vais vous montrer l'exemple complet lorsque vous animez la propriété de taille comme ceci Lorsqu'il atterrit sur le sol et s'écrase, il sera à plat par rapport au sol, ce qui semble plus réaliste Le truc, c'est qu'il ne s' agit pas vraiment d'un cercle, mais d'un rectangle aux coins arrondis. Il y a quelque chose que j'ai déjà préparé pour vous, mais c'est très important pour m'assurer que le squash et le stretch fonctionnent correctement. Sous le premier rectangle de transformation, j'ai configuré une expression pour que le point d'ancrage soit toujours au bas du cercle. Il sera centré x égal à zéro, puis y divisé par deux. La moitié de cette somme placera le point d'ancrage juste ici, en bas. Ainsi, lorsque nous installons la courge et que nous l'étirons, elle s'écrasera et s'étirera à partir du bas du cercle. Pour animer la propriété size et automatiser les calculs avec une expression, elle fonctionnera un peu différemment de la propriété scale Voyons comment procéder maintenant. Tout d'abord, je vais basculer entre le rectangle et le chemin du rectangle vers le bas rectangle et le chemin du rectangle afin que nous puissions voir la propriété de taille Avant de définir une expression sur la propriété size, je vais avoir besoin d'un contrôleur d'expression. Si vous n'en avez jamais utilisé un, ils sont en fait assez simples. Tout ce que vous avez à faire est de cliquer avec le bouton droit sur la couche, accéder aux commandes d'expression des effets, puis de contrôler le curseur, pour ajouter des effets ici Et puis voici le slider. Je vais juste sélectionner l' endroit où il est indiqué contrôler le curseur, appuyer sur Entrée et le renommer Cette valeur est en fait l' image-clé que nous allons utiliser pour notre valeur squash et stretch De cette façon, nous pouvons contrôler la courge et l'étirer avec quelque chose qui ne correspond pas à la taille réelle. Si vous voulez entrer et modifier la taille, vous le pouvez. Et cela fonctionnera toujours. Cette automatisation sera toujours déjà configurée. Je vais définir l'expression sur l' option de propriété de taille, ou je vais cliquer sur le chronomètre Ensuite, nous devons d'abord définir quelques variables. X va être une valeur x ici. J'utilise juste le pickwip pour copier cette adresse en gros. Et puis un point-virgule puis une variable pour Y, pareil. Saisissez cette valeur y avec le point-virgule pickwip. Ensuite, la variable suivante sera pour la zone are area, qui sera juste x fois y et point-virgule Ensuite, la dernière variable sera pour le curseur. Tu peux appeler ça comme tu veux, mais je vais juste l' appeler slider et prendre le pickwip et le Il y a encore une chose que je veux faire sur la variable slider Je veux que la valeur de ce curseur soit de 100. Lorsque le squash et étirement ne sont pas du tout du squash ou de l'étirement, ils agissent comme un pourcentage que je vais ajouter divisé par 100 pour que la valeur du curseur agisse comme un pourcentage Puis semicon. Ensuite, je vais simplement redéfinir x. Nous utilisons donc la variable x, mais en lui attribuant une nouvelle valeur. Nous utilisons donc la variable x, mais en lui attribuant une nouvelle valeur X est égal à x, quel que soit le paramètre défini ici multiplié par le curseur à l' aide de la variable du curseur, puis Cela signifie que nous influençons la valeur du curseur Supposons que la valeur du curseur soit 200, alors elle fera 200/100 fois X. De cette façon, nous influençons la valeur X, comme nous l'étions avec la propriété scale lorsque nous avons animé la propriété scale dans le dernier Ensuite, je vais redéfinir y comme étant l'aire au-dessus de X. Encore une fois, nous réorganisons simplement cette équation pour déterminer ce que doit être y. Si nous savons ce qu'est x, nous définirons x et y. Lorsque je clique dessus, je reçois un message d'erreur car la valeur du curseur est fixée à zéro et cela ne ressemble pas à diviser zéro par un nombre Je vais régler la valeur du curseur sur 100 parce que je veux que 100 soit normal, non écrasé ou Nous pouvons maintenant créer un image-clavier ce curseur comme nous l'avons fait pour la valeur d'échelle Et elle fonctionnera exactement comme la balance, sauf qu'elle aura un fond plat lorsqu'elle s'écrase Je vais juste vous appuyer pour faire apparaître ces images clés en position Y. Maintenant, je dois ajuster ces images-clés en position Y comme je l'ai fait pour les images-clés en position Y de la balance En fait, au lieu de tout recommencer, je peux simplement copier ceux qui ont déjà été simplifiés dans l'éditeur de graphes. Je vais juste les coller ici maintenant parce que mon point d'ancrage pour la propriété d'échelle était en bas et pour la taille, au milieu. Cela va légèrement décaler le cercle entre toutes les images-clés sélectionnées et ma tête de lecture au-dessus de l'une des images-clés Je vais juste le faire glisser vers le haut pour l'aligner sur cette ligne. Encore une fois, techniquement, ils devraient tous être à 900. Si vous voulez être vraiment précis, vous pouvez entrer et taper 900. Très bien, maintenant nous pouvons ajouter de la courge et étirer. Je vais juste basculer vers le bas. Trouvons ce slider. C'est ce que nous allons à nouveau saisir . Juste ici. Nous allons régler le curseur sur 100, juste avant qu'il ne touche le sol. Nous allons faire en sorte que cela soit étendu. Je vais régler ça à 80. Ensuite, lorsqu'il touchera le sol, nous l'écraserons peut-être 120, puis nous le remettrons à 100 Alors voici, 1805115. Et j'invente juste ces chiffres, fais ce que tu trouves bon. Très bien, maintenant que toutes ces images clés sont définies, vous pouvez la rejouer et voir à quoi elle ressemble. Voici quelques exemples de logos qui utilisent squash et stretch ici, les logos litière squash et stretch lorsqu'ils rebondissent sur place Dans cet exemple, le O et le point sur le squash et l'étirement. Remarquez comment, dans cet exemple, le premier cercle blanc s' écrase et s'étire Mais la balle à l'intérieur du B, c'est une balle de billard, ne s'écrase pas et ne s'étire pas. Il s'agit d'un bon choix de conception qui indique clairement qu' il s'agit d'une balle de billard, car les balles de billard ne s' écrasent pas et ne s'étirent pas dans la vraie vie. Une autre chose à noter est que lorsque le cercle blanc plonge, cela a un effet de maculage Ce qui est similaire à un squash et à un stretch, mais c'est un principe différent et le sujet de la vidéo suivante. 13. Flous: Les frottis ne figuraient pas réellement sur la liste des 12 principes d'animation originaux de Disney, mais ils ont été inventés par des animateurs de l'époque qui dessinaient chaque Ces animateurs avaient besoin d'un moyen d'indiquer que quelque chose se déplaçait rapidement entre les images Ils n'ont pas eu d'effets secondaires grâce un interrupteur de flou cinétique qui pouvait simplement être activé Ils ont plutôt eu l' idée de dessiner un cadre allongé, une tache pour indiquer un mouvement très rapide Bien que les techniques de création de taches aient changé, ce look est resté dans le motion design moderne Une méthode simple pour animer des taches sur un cercle consiste à créer une ligne tracée mais non remplie Assurez-vous ensuite que le trait a des capuchons ronds. Je l'ai déjà configuré pour vous lors de l'exercice d'entraînement. Pour animer cela, nous allons utiliser des tracés de découpage. Cliquez sur le bouton Ajouter et choisissez Découper les chemins. Je vais passer à environ 15 images et définir une image clé sur le début et les valeurs. Vous pouvez maintenant voir la gamme complète ici. Ce que je vais faire, c'est réduire la valeur à 0,1. De cette façon, cela ressemblera à un cercle. Ensuite, je vais passer à environ 01:15. Amenons la valeur de départ à 100 et la fin à 100 Mais en fait, nous avons besoin que le début soit 99,9. Cette valeur de 0,1 en fait un cercle Maintenant, si nous jouons à ce jeu, ce sera juste un cercle qui se déplacera sur l'écran pour ajouter des taches. Tout d'abord, ajoutons des éléments faciles à ces images clés, puis passons à l'éditeur de graphes. Je regarde le graphique de vitesse. Ce que je veux faire, c'est faire en sorte que cette animation aille très vite. Au milieu, ça va commencer très lentement, aller très vite, puis repartir très lentement. C'est le plus rapide. C'est à ce moment-là que je veux qu'il y ait le frottis Je vais ajuster ces graphiques pour que le graphique de la valeur finale soit aussi abrupt que celui-ci. Ensuite, le graphique de départ sera vraiment abrupt, comme celui-ci. Mais un peu à la traîne, c'est ce qui va créer l'effet de maculage Comme ces graphiques sont superposés, il peut être difficile de sélectionner la bonne poignée. Mais si vous sélectionnez d'abord la courbe, ces poignées apparaîtront afin que vous puissiez saisir la bonne poignée. Je vais juste le faire très haut, très rapide. Et puis ajustons également l'extrémité un peu plus rapidement. Quelle que soit la distance entre vos graphiques, leurs points, c'est là que se situera le frottis Si vos graphiques sont rapprochés les uns des autres, frottis sera plus petit Alors que si vos graphiques sont plus éloignés les uns des autres, votre tache sera plus grande Une fois que vous l'aurez obtenu comme vous le souhaitez, comme si c'était aussi grossier que vous le vouliez, voyez à quoi cela ressemble une fois joué Cette technique peut être un peu limitée, en particulier si vous avez une forme unique ou une couche laquelle vous souhaitez appliquer un effet d' écho ajuster et cadrer les paramètres pour animer un effet de traînée Mais pour rendre les choses encore plus faciles, je vous recommande de consulter l'outil de frottis gratuit de Battle X. Cette animation du logo utilise des frottis. Je vais vous montrer comment j'ai obtenu cet effet. Lorsque chaque lettre se déplace à son point le plus rapide, elle s'étale dans la direction dans laquelle elle se déplace Si vous regardez ce L, vous pouvez voir que j'ai encadré la propriété path lorsqu'elle se déplace vers le haut du L. Ces images-clés se déplacent dans cette direction Je les ai juste traînés comme ça pour les agrandir. Ensuite, quand il se déplace dans l'autre sens, je fais simplement glisser ces images clés cette façon pour créer cette tache. Je l'ai fait pour chaque lettre. Le O va être un peu différent parce que le O comporte deux chemins différents. Mais c'est fondamentalement la même idée. Au moment le plus rapide du mouvement, je fais glisser les images clés pour créer un décalage. Certaines de ces images-clés pour l'intérieur et l'extérieur du O, juste pour le rendre un peu plus intéressant Vous pouvez donc voir à quoi ressemble ce frottis. Voici quelques exemples de logos qui utilisent des taches. Cet exemple utilise des frottis ainsi que des anticipations et des suivis dynamiques pour donner au logo un aspect ludique Le logo Google n'est pas aussi dynamique et ludique, mais il utilise efficacement les frottis pour susciter l'intérêt. Dans cet exemple, lorsque le O, ou l'olive, tombe, il y a une grosse tache dans cet exemple Lorsque la boule blanche passe en dessous et vers le haut, puis devient la boule centrale du B, il y a une tache. 14. L'exagération: Tous les principes que nous avons abordés jusqu'à présent peuvent être appliqués pour rendre votre animation plus vivante et plus réaliste. En repoussant les limites du réaliste, vous pouvez ajouter de la personnalité et de l'expressivité à votre animation et lui donner une touche de dessin animé. Pensez-y comme un spectre à une extrémité. Une animation n'utilise aucun des principes de l' animation et utilise uniquement des images-clés linéaires. Il a l'air terne et pratiquement sans vie. Au fur et à mesure que l'on s'attache à perfectionner le timing et l' espacement des images-clés, les principes de l' animation L'animation devient plus réaliste et plus réaliste. Si vous repoussez les limites de la physique et exagérez le mouvement ou les principes de l'animation, l'animation devient plus ludique et caricaturale Ne pensez pas qu'il s'agit d'un spectre allant du mal au bien. Les animations réalistes et caricaturales peuvent être considérées comme un excellent travail lorsqu'il s'agit de décider où vous souhaitez placer votre animation dans le spectre. Tenez compte de votre public. Par exemple, dans le cadre de mon travail de création d'animations pédagogiques dans une entreprise de santé, nous avons découvert que notre public de patients trouve les animations de dessins animés condescendantes Ils ont l'impression qu'on les rabaisse comme s'ils étaient enfants parce qu'ils associent les dessins animés aux enfants C'est pourquoi je n'exagère presque jamais les principes de l' animation et je m'éloigne de ceux comme le squash, l' étirement ou les Avant de faire l'exercice d'exagération, nous devons faire l'exercice Putting it all Together qui combine différents principes d'animation dans l'exercice d' assemblage Tout d'abord, laissez-moi vous expliquer ce qui est déjà configuré pour vous. Si vous voulez vous entraîner davantage, n'hésitez pas à le supprimer et à repartir de zéro avec un nouveau carré d'abord sous le tracé du rectangle, puis de le dimensionner. J'ai utilisé la même expression que celle que je vous ai montrée dans la leçon de squash et d'étirement pour configurer le squash et l'étirement. Vous remarquerez également que sous Effets se trouvent un curseur de squash et d'étirement Vous allez l'encadrer pour animer le squash et l'étirement. J'ai également déjà configuré l'effet de courbure. J'ai séparé les valeurs de début et de fin afin qu'elles restent aux bons endroits Notez également que le point d'ancrage cette couche se trouve en bas du carré ici. Si vous basculez vers le bas du rectangle 1 , puis que vous basculez vers le bas pour transformer le rectangle 1, il y a également une expression sur ce point d'ancrage Commençons l'animation. Je vais suivre à peu près l' ordre de cette liste. Animons d'abord les positions x et y. Je vais juste appuyer sur P sur le clavier pour les afficher. Commençons par 15 images. De cette façon, nous nous donnons un peu de temps pour anticiper. Je vais définir le cadre clé de la position X et de la position Y, puis nous passerons à 1 seconde. Passons à 770. Ensuite, pour la position Y, je veux qu'elle soit au sol à 600. Je vais juste définir un cadre clé. Ensuite, au milieu de tout cela, allons-y et fixons cette position Y à environ 440. Ajoutons*** à ces images clés en position Y, pour les rendre plus arquées. Mais je vais aller dans l'éditeur de graphes, car je ne veux pas qu'il se courbe comme ça. Ce n'est pas très naturel. Je vais entrer et regarder le graphique des valeurs, puis prenons ces poignées et faisons-les glisser comme ceci. J'ai l'impression de l'avoir dit 100 fois, mais n'oubliez pas que cela doit être droit, afin que cela agisse comme si la gravité le tirait vers le sol. Il ne ralentira lorsqu'il se dirige vers le sol, il va heurter le sol fort. Ça a l'air plutôt bien pour le moment. Passons d'abord à l'anticipation. Je vais régler l'anticipation en utilisant squash et stretch. Il suffit de basculer vers le bas et de récupérer les effets. Ensuite, passez à la courge et étirez-vous. À partir du début de la chronologie, nous allons simplement régler le curseur de squash et d' étirement sur 100 Et puis avançons dans le temps. Peut-être environ huit images, à mi-chemin entre les images clés que nous avons déjà. Réduisons ce chiffre à 17, puis alignons-le avec le premier X et la première image clé de position. Faisons-le s'étirer comme s'il décollait du sol. C'est comme sauter, on en fera 93. Ensuite, une fois qu'il sera en l'air, je vais courir le squash et l'étirer. Je vais juste le remettre à 100. Ajoutons simplement Easy à ces images-clés jusqu'à présent. Il va s'écraser, s'étirer un peu, sauter et ensuite. Il va sauter dans son arc. Animons maintenant le virage pour une autre forme d'anticipation Je vais aborder l'effet de courbure au début de la chronologie. Nous allons simplement mettre le virage à zéro. Ensuite, aligné avec cette image-clé squash et stretch, je vais juste le régler sur 25 Il se penche en prévision de l'action principale, où il saute de haut en travers Passons ensuite à ici et remettons ce virage à zéro. Simplifiez facilement ces images clés. Je vais juste sélectionner la couche et appuyer sur le clavier pour la condenser Je ne vois que les propriétés avec des images-clés. Très bien, nous avons l' air bien pour l'instant. Passons maintenant à quelques images avant qu'il n'atterrisse. Je vais régler la courge et l'étirer pour qu'elle soit juste une courge ou m'étirer juste avant qu'elle n'atterrisse. Allons-le un peu. Que diriez-vous de 92 alors, au fur et à mesure qu'il atterrit, écrasons-le comme s' il était touché. Donnons-lui un peu de temps pour récupérer. Je vais passer à 110, puis le remettre à 100. Nous pouvons facilement simplifier ces deux derniers cadres clés. Ajoutons maintenant la propriété bend au moment de l'atterrissage. Faisons en sorte qu'il soit plié en arrière. Faisons le négatif 25. Ajoutons ensuite quelques oscillations d' amortissement. Faisons-le bouger d'avant en arrière. J'aime bien la gelée quand il s'agit de se reposer. Allons-y et faisons-le avancer. Peut-être même un positif de 25, juste pour qu'il revienne dans l'autre sens, lui laissant un peu de temps. Remettons-le dans l'autre sens. Puis peut-être en avant, puis enfin jusqu'à zéro. Je vais laisser ces images-clés pour le moment, mais si les vôtres ne vous semblent pas tout à fait correctes , n' hésitez pas à ajuster leur chronométrage ou à passer dans l'éditeur de graphiques en dernier pour le suivi Ajoutons une diapositive. Il va atterrir puis glisser légèrement au-delà de sa position d'atterrissage. Ramenons simplement cette position x. Allons-y en 820. Ensuite, je vais cliquer avec le bouton droit de la souris, accéder à Keyframe Assistant et faciliter la tâche de cette façon Cela va ralentir. Lorsqu'il s'agit d'un arrêt, c'est comme s' il y avait une friction entre le sol et le carré, ce qui finit par arrêter de glisser. Voici ce que nous avons jusqu'à présent. une chose que je n'aime pas, c'est au début quand il s'agit d'anticiper. Le carré glisse cause de la façon dont il s' écrase et s'étire Mais j'ai l'impression qu'il devrait revenir en arrière anticipation et ne pas glisser légèrement vers l'avant. Comme vous pouvez le voir ici. Il glisse légèrement vers l'avant. Je vais résoudre ce problème en définissant simplement quelques images clés de position. Si vous ne voyez pas vos règles, vous pouvez appuyer sur la commande R ou sur le contrôle R pour les voir. Ensuite, je vais passer à la première image clé en position X. Et il suffit de faire glisser un guide de la règle et de le positionner juste au début du carré. Vous pouvez zoomer pour obtenir une précision maximale. Maintenant, si je reviens à ce squash et que j'étire et plie l'image-clé ici à huit images, vous pouvez voir qu'elle avance depuis la ligne de départ Ce que je vais faire, c'est simplement ramener cette position X. De cette façon, il ne respectera pas cette directive. Ensuite, je ferai la même chose au début de la chronologie. J'ai juste allégé toutes ces images clés. Facilitons-les facilement pour qu'ils s'alignent. Mais quand je fais cela, remarquez comment cela change réellement l' arc de la ligne. Parce qu'il ajuste les valeurs de la position x. Je vais en fait remettre celui-ci à une image clé linéaire normale. Voici à quoi ça ressemble. Maintenant, je trouve que ça a l'air beaucoup plus propre. Parce qu'il ne glisse pas au début. Il ne glisse que lorsqu'il atterrit, ce qui est logique. La prochaine étape de notre liste est la superposition actions en animant l'effet de courbure Mais nous y sommes déjà parvenus en animant le virage lors de l'anticipation et du suivi Mais quand il est en l' air, il est plutôt statique. Il ne se plie pas beaucoup. Je pense que nous pouvons améliorer un peu les choses. Peut-être que cette image clé où elle revient à zéro, supprimons-la. Peut-être que quelque part par ici, ramenons-le à moins 25. Peut-être comme si l'air offrait une certaine résistance. Et c'est pourquoi il se penche en arrière. Suivant. Et en fait, la dernière est l'animation secondaire. Ajoutons une rotation au carré. Il va donc sauter, pivoter, puis atterrir. Si nous devions simplement animer l'ancienne propriété de rotation normale située sous la transformation de cette manière, alors je devrais faire une révolution complète Si vous le nettoyez, vous remarquerez immédiatement un problème Cela se produit, cette coupure est due à l'effet de courbure. Si vous vous souvenez de la première utilisation de l'effet de courbure, nous avons dû configurer ces expressions lesquelles nous établissons les valeurs de début et de fin du pli de manière à ce qu'elles correspondent au carré lorsqu'il se déplace sur l'écran. Maintenant que nous faisons pivoter le carré, il est à nouveau perturbé car les valeurs de courbure de début et de fin restent inchangées. Ils ne pivotent pas avec le carré. Au lieu d'essayer de mettre à jour cette expression, ce qui pourrait devenir vraiment compliqué. Au lieu d'animer cette rotation, j'ai une autre astuce qui va rendre les choses beaucoup plus faciles Je vais juste enlever ces images clés. Ensuite, je vais passer aux effets et aux préréglages et rechercher Transform Sous le magasin, il y a cet effet appelé transformation. Et je vais l'appliquer à cette couche qui me donnera ce tout nouvel ensemble de propriétés de transformation qui seront appliquées à l'ensemble de la couche. C'est donc une autre façon d'obtenir points d'ancrage, des propriétés de position et tout ce que vous pouvez utiliser pour superposer différentes propriétés de transformation afin d' obtenir des effets complètement différents ou pour faire des choses comme ce que nous essayons de faire maintenant, il suffit de faire pivoter ce carré sans tout casser sous la transformation. Je vais d'abord devoir configurer le point d'ancrage en position afin qu'il y ait des expressions pour le verrouiller. Parce qu'à l'heure actuelle, remarquez que ce contrôleur est ici, qui est le point d'ancrage ce carré à partir de cet effet de transformation que j'ai appliqué. Ensuite, l'autre sera pour le poste, il y en a deux en fait, ils étaient l'un au-dessus de l'autre. Je dois les placer en haut de la place. Et aussi de se déplacer avec le carré au fur et à mesure que le carré se déplace. Cela devrait vous sembler un peu familier, similaire à l'effet de courbure. Je vais juste annuler cela sur la propriété de position des effets de transformation. Je vais cliquer sur le chronomètre pour commencer à écrire une expression Ensuite, je vais juste définir deux nombres. J'ai besoin de crochets. Ensuite, je vais prendre le fouet et le faire glisser vers le bas jusqu' à la position souhaitée La position de cette propriété de transformation sera toujours la même que celle de la couche. C'est tout ce que nous devons faire ici alors. Ensuite, définissons la position y. Je vais faire la même chose. Prenez le fouet et faites-le glisser vers le bas jusqu'à la position Y. Rappelez-vous maintenant comment le point d'ancrage ce carré se trouvait ici en bas du carré. C'est ce que je dis jusqu'à présent. Mais quand le carré pivote, je veux qu'il pivote à partir du centre, au lieu qu'il soit en bas Je dois le déplacer vers le haut. Ce carré mesure 200 x 200 pixels. Pour le déplacer à mi-chemin, cela fera -100. Ensuite, je vais placer un support pour les fermer. Maintenant, lorsque je clique dessus, le carré a disparu, mais ne vous inquiétez pas, car l'étape suivante corrigera le problème. Sur le point d'ancrage, suffit de relier le point d'ancrage à la position et il revient. Une fois que tout est configuré, nous pouvons animer cette propriété de rotation sous l'effet de transformation Je vais régler la rotation à zéro ici à 15 images. Puis à la fin, quand il arrivera, je vais juste le configurer pour qu'il en soit un. Simplifiez facilement ces images clés. Maintenant, si nous le rejouons, il devrait fonctionner correctement. Si le vôtre rencontre un problème sous les effets, assurez-vous que CC le plie au-dessus de la transformation dans la pile de couches. De cette façon, la transformation sera appliquée à l'ensemble de la couche et aucun élément ne sera coupé. Si le pli est appliqué après la transformation, l'ordre des couches est très important ici. Assurez-vous que c'est exactement comme ça. La dernière chose à faire ici est d'affiner le mouvement de tous ces différents images-clés dans l'éditeur de graphes. Je vais vous appeler juste pour faire apparaître toutes les images clés , puis nous pourrons entrer et nous assurer que tout est vraiment impeccable. Je n'enregistre pas toujours cette étape par exemple J'ai déjà ajusté les images clés en position Y, mais pour la plupart de ces autres images clés, je ne les ai pas vraiment touchées dans l'éditeur de graphiques. Commençons par l'effet de courbure ici. Il s'agit simplement d'une simple simplification, mais je pense que nous pouvons rendre ce mouvement plus spectaculaire. Passons dans l'éditeur de graphes et faisons simplement glisser ces poignées. Cela commence plus lentement, va encore plus vite au milieu, puis finit un peu plus lentement. Ça va vraiment exploser. Ensuite, pour ces oscillations, je vais juste y aller et les réajouter parce que vous pouvez voir à quel point la forme était foirée auparavant Je pense que cela lui donnera automatiquement une meilleure apparence. Mais ici, quand il atterrira, je pense que l'impact à l'atterrissage devrait le faire aller un peu plus vite. Juste par ici. Ajustons simplement ce graphique. Il recule plus rapidement dans l'autre sens. Voyons à quoi cela ressemble. Très bien, ça a l'air plutôt bien. Examinons maintenant le curseur sur le squash et l'étirement ici au début Il devrait probablement correspondre au graphique de courbure de ces deux images clés. Faisons-le un peu plus vite au milieu et plus lentement des deux côtés. N'oubliez pas que tout ce qui contient deux images clés dos à dos du graphique ne signifie pas grand-chose car il n'y a pas d' interpolation en cours Même si cela semble étrange à certains endroits, vous pouvez simplement l'ignorer. Ensuite, à la fin, entre ces deux dernières images clés, il devrait peut-être commencer à décompresser rapidement , puis simplement ralentir Je pense que cela aurait du sens quel que soit le matériau dont il s'agit. Je vais juste faire glisser ces poignées comme ça. Et encore une chose sur la rotation. Rendons les choses encore plus dramatiques. Ce sera donc plus lent au début et à la fin et plus rapide au milieu. Très bien, voici donc le résultat final de l'exercice Putting it all together. Pour ce qui est de l'exercice d'exagération, je vous ai déjà configuré deux cases sur lesquelles figurent les images clés de l'exercice d'assemblage. Celui du haut n'est censé être qu'une référence. Il s'agit de tout assembler tel quel. Et puis l'exagération sera de tout mettre en place. Ensuite, vous devez entrer et ajuster ces images-clés pour exagérer les animations Il y a un tas de choses différentes que tu peux faire. Je ne vais pas passer en revue toutes les étapes car vous pouvez voir comment j'ai choisi de le faire en entrant et en regardant l'exercice terminé. Mais vous pouvez exagérer cela en augmentant la quantité de courge et d' étirement au lieu d'une sur sept. Peut-être que cette courge en fait 125 Alors ici, au lieu de 93, peut-être que ça passe à 70, puis ainsi de suite pour le reste de ces images-clés. Ensuite, pour le virage, au lieu de passer à 25, peut-être qu'il va jusqu' à 40, vous obtenez le point. Vous pouvez également accéder à l'éditeur de graphiques et ajuster la courbe de mouvement. Sauvez peut-être la rotation. Peut-être que tu le rends encore plus raide. C'est encore plus rapide au milieu. Il suffit de parcourir et d'apporter des modifications pour exagérer les animations de ces images-clés existantes C'est là que votre connaissance de la marque est utile. Réfléchissez au style d' animation qui correspond à l' essence de la marque. Dans quelle mesure l'animation de votre logo devrait-elle se situer dans le spectre ? Réfléchissez ensuite à la manière dont vous pouvez exagérer les principes d'animation que vous comptez utiliser ou les atténuer pour les adapter à ce style d'animation 15. Prochaines étapes: J'espère que vous avez maintenant une solide compréhension des principes de l' animation et que vous avez un plan pour animer votre logo Il est maintenant temps de mettre vos connaissances à profit et d'animer votre logo Comme je l'ai mentionné au début du cours, je ne peux pas vous montrer toutes les techniques dont vous pourriez avoir besoin pour animer votre logo personnalisé Mais j'ai préparé une leçon supplémentaire sur les techniques courantes d' animation de logos et sur la bonne direction pour en savoir plus. J'adorerais voir ce que vous allez proposer, alors publiez l' animation de votre logo en tant que projet de classe. Vous trouverez des instructions dans la section des projets et des ressources. Si vous avez besoin d'aide , créez votre logo sous forme de vidéo ou de fichier cadeau et téléchargez-le en tant que projet de classe S'il y a quelque chose en particulier sur lequel vous souhaitez obtenir des commentaires, veuillez inclure une note pour me le faire savoir. Vous pouvez également me taguer sur Animation. Bien entendu, si vous publiez votre projet sur Instagram, si vous trouvez ce cours utile, j' apprécierais vraiment que vous en écriviez quelques-uns. Cela m'aide à créer du contenu plus intéressant pour vous. Merci. Pour continuer à apprendre, cliquez sur mon nom à côté cette vidéo pour découvrir les autres cours que j'enseigne. Certains de mes cours sur l'animation de texte pourraient vous intéresser mes cours sur l'animation de texte Assurez-vous de me suivre sur Skillshare. Et inscrivez-vous à ma newsletter pour savoir quand j'aurai un nouveau cours pour vous. Merci beaucoup d'avoir regardé et à la prochaine, je suis heureuse. Animation. 16. BONUS : techniques d'animation de logo: Dans cette vidéo, je vais vous montrer quelques techniques courantes d'animation de logo. Et je vais vous indiquer où vous pouvez en apprendre davantage sur l' une de ces techniques. Et restez dans les parages jusqu'à la fin, car j'ai un conseil supplémentaire pour vous aider à comprendre comment animer votre idée d'animation de logo Petit avertissement, je vais vous montrer des exemples que je n'ai pas réellement créés. Donc, même si je peux me faire une idée précise de la façon dont ils ont été animés, je n'en suis pas sûr à 100 %. L'un des aspects amusants d' After Effects est qu'il existe généralement plusieurs façons d' obtenir des résultats similaires. La première technique est celle des trimpathes. Les tripathes vous permettent d' animer des lignes. Bien qu'il s'agisse d'un concept très simple, les possibilités sont infinies. Les tracés de découpe peuvent être utilisés pour animer des textes tels qu'ils sont dessinés dans les œuvres Idéal à la fois pour le séraphin sur sable et le lettrage de script. Les tracés de découpage sont également parfaits pour animer les lignes d'accent. Il existe de nombreux exemples de logos animés avec des tracés de découpage. Une fois que vous saurez quoi rechercher, vous serez en mesure de les repérer. Chaque fois qu'un dessin au trait apparaît, il y a de fortes chances qu'il ait été animé à l'aide de Trimpas Vous pouvez également animer des points ou des lignes se déplaçant le long d'un tracé personnalisé à l'aide de tracés de découpage, comme dans cet exemple Pour animer avec des tracés de découpe, vous aurez besoin d'un calque de forme After Effect comportant un trait mais pas de fond. Vous devrez peut-être recréer certaines parties de votre logo pour y parvenir Vous pouvez le faire dans After Effects, mais je trouve que c'est souvent plus facile à faire. tant qu'illustrateur, c'est très important pour donner l'apparence au dessin et même si cela peut être fastidieux, il ne faut pas l'ignorer Assurez-vous que chaque tracé ou forme comporte un trait et qu'il n'y a aucun remplissage. Les lignes doivent également avoir la même largeur d'un bout à l'autre. Et tu ne peux pas utiliser de pinceaux. Si c'est un problème, j'ai un conseil à vous donner pour la prochaine technique. Il est également préférable de placer chaque tracé ou forme que vous souhaitez animer dans sa propre couche étiquetée Si vous avez utilisé Illustrator, vous devez importer votre logo dans After Effects sous Importer sous. Assurez-vous de choisir la composition, conserver la taille des couches. Alors écris. Cliquez sur les couches vectorielles et créez des formes à partir de couches vectorielles ou utilisez la surcharge pour rationaliser ce processus. Ouvrez ensuite l' une des couches, c'est un chemin avec un seul trait Cliquez sur le bouton Ajouter et choisissez Trim Paths. Vous pouvez maintenant animer les propriétés de la trajectoire de découpe pour que la ligne soit tracée Si vous souhaitez inverser le sens de la trajectoire, cliquez sur ce bouton. Vous pouvez animer des points qui se déplacent sur l'écran et même leur donner un effet de traînée en utilisant le trim pass Pour ce faire, vous souhaiterez que le chemin parcouru par les points soit une couche de forme comportant uniquement un trait. L'épaisseur du trait doit être égale à la taille du point. Réglez les capuchons sur des capuchons arrondis, ajoutez du trimpass et définissez la valeur du trim pass sur un très petit nombre, exemple 0,1 pour former un point Vous pouvez maintenant animer la valeur de décalage pour déplacer le point le long de la ligne Vous pouvez également animer l'étoile et valeurs, puis décaler leur mouvement dans l'éditeur de graphes pour créer un effet de traînée Je sais que c'était rapide, mais je aborderai plus en détail dans ce cours. Dans cet exemple, ces points sont en fait créés à l'aide de tracés de découpage sur un cercle. De cette façon, il était très facile de les animer en train de tourner en cercle parfait Ces points sont en fait une couche circulaire qui comporte un contour mais pas de remplissage. Il y a en fait deux cercles situés l'un au-dessus de l' autre et l'un d'eux est simplement retourné à 180 degrés. C'est pourquoi il y a deux points. abord, pour les animer , en partant du centre, j'ai animé la taille du cercle Ensuite, pour faire tourner ces points, j'ai animé le décalage. Ensuite, pour leur donner un effet de traînée, j'ai animé les valeurs de début et de fin Ensuite, si vous êtes curieux de savoir, lorsqu'ils deviennent des o avec un cercle découpé au milieu, j'utilise des couches séparées et j'utilise des tapis pour découper ce cercle. Ils ont découpé ce cercle intérieur. De toute évidence, de nombreux logos ont tracés de découpe de texte qui peuvent être un excellent moyen d'animer des textes. Mais il existe également d'autres options. Consultez cette vidéo et ce guide pour en savoir plus sur l' animation de textes La technique suivante consiste à utiliser des tapis. Les tapis vous permettent de contrôler quelles parties d'une couche sont visibles. Ils vous permettent de recadrer, de croiser et d'exclure les formes animées et superposées Voici les notions de base sur les tapis. Choisissez d'abord la couche que vous souhaitez recadrer. Je souhaite recadrer ce design en plein écran qu'il ne soit visible que dans la couche de texte portant la mention « mats ». Sur la couche de dessin, je vais choisir la couche de texte comme tapis. Il existe différents types de tapis, alors consultez ce didacticiel pour en savoir plus. Voici quelques exemples de logos susceptibles d'utiliser une sorte de tapis ou de masque. Dans cet exemple, il y a probablement un cercle qui agit comme un mat pour recadrer les extrémités de ces lignes. Ici, il semble que des cercles jaunes suivis de cercles verts remplissent chaque lettre. Les lettres font office de tapis. Pour les cercles colorés. Il y a probablement un tapis caché qui empêche les lettres EVO de ressortir à gauche du V lorsqu' elles se mettent en place. Vous pouvez également combiner des garnitures, des animaux de compagnie et des tapis. De cette façon, vous pouvez révéler des formes qui ne sont pas simplement un simple trait avec une épaisseur uniforme sur l'ensemble. Cela peut être utile si vous souhaitez animer du texte dessiné, mais que la largeur du texte n'est pas tout à fait la même sur tout le pourtour Vous pouvez également utiliser cette technique pour révéler des lignes présentant un effet de pinceau ou une texture. Cet exemple est tiré de ma classe de lettrage animé. Une autre technique qui peut s'avérer utile consiste à animer la propriété de trajectoire d'une couche de forme Ainsi, vous êtes totalement libre de transformer la forme. Pour animer la propriété path, vous aurez besoin d'une couche de forme After Effect Si vous travaillez avec des illustrations vectorielles d' Illustrator, vous pouvez écrire, cliquer sur le calque et choisir créer des formes à partir du calque vectoriel. Ou si vous souhaitez animer le chemin du texte, vous pouvez cliquer avec le bouton droit sur une couche de texte et choisir Créer des formes à partir du texte Si vous avez une forme paramétrique à effet secondaire, telle qu'un cercle, un rectangle, un polygone ou une étoile, et que vous voyez quelque chose comme trajectoire rectangulaire, mais pas simplement une trajectoire, vous pouvez convertir la forme en forme de Bézier Pour obtenir la propriété path correspondante, cliquez avec le bouton droit de la souris à l'endroit où il est indiqué rectangle ou n'importe quel chemin de forme. Choisissez ensuite convertir en chemin de Bézier. Vous avez maintenant une propriété de chemin que vous pouvez encadrer par un clavier. Voici quelques exemples de logos susceptibles d'avoir la propriété path animée. J'ai converti ces lettres en formes et j'ai animé la propriété path pour créer l'effet de traînée dans cette animation de logo La façon dont la tête du ourson s'allonge peut être réalisée en animant le tracé de la La manière dont cette forme s'étend peut être créée en animant la propriété de trajectoire de la forme Lorsque vous faites quelque chose comme ça, il peut être plus facile d' animer à l'envers Vous commencez donc par l' état final de la forme et déplacez vers la gauche sur la chronologie pour définir les images-clés précédentes. La façon dont les lettres se développent peut également être réalisée en convertissant le texte en formes et en animant les propriétés du tracé Consultez ce guide pour en savoir plus sur l'utilisation des formes et After Effects. Encore une fois, vous pouvez combiner différentes techniques. Par exemple, vous pouvez animer le tracé des lignes dessinées à l' aide de trimpass pour leur donner un aspect plus dynamique morphing de formes ou d'icônes peut être un moyen unique d' animer un logo. Voici quelques exemples de logos utilisant le morphing. Dans cet exemple, le Barry s'intègre en transformant les formes. Cet exemple montre ce que fait la marque en animant des icônes morphantes avant de révéler le logo Cet exemple suit une idée similaire pour expliquer en quoi consiste la marque. Pour en savoir plus sur la création d'animations de morphing, consultez mon cours sur l'animation icônes de morphing et N'oubliez pas que de nombreux logos sont animés simplement en animant les propriétés de transformation standard Vous n'aurez peut-être pas besoin de faire quelque chose de très sophistiqué pour communiquer efficacement ce que représente la marque grâce à l'animation de son logo. Assurez-vous simplement d'utiliser tous les principes d'animation adaptés à l' animation du logo et accédez l'éditeur de graphiques pour affiner ces courbes de mouvement. Passons à l'astuce supplémentaire : si vous trouvez une animation de logo sympa, mais que vous ne savez pas comment elle a été créée, voici une astuce simple mais efficace. Vous pouvez soit télécharger la vidéo pour pouvoir la parcourir au ralenti, soit prendre une vidéo de la vidéo sur votre écran et mettre votre téléphone en mode ralenti Eh bien, vous ne devez jamais copier le travail de quelqu'un d'autre. Vous pouvez le regarder au ralenti pour avoir une meilleure idée de ce qui se passe. Cela peut vous aider à comprendre comment ils ont pu obtenir un certain effet, afin que vous puissiez en créer votre propre version unique. Encore une fois, ne copiez pas le travail d'autres personnes. Utilisez cette astuce pour en savoir plus sur l'inspiration en matière d'animation de logo. Consultez mon tableau Pintrest et suivez-moi, car je continuerai à épingler de plus en plus au fur et à mesure que je créerai ou trouverai de nouvelles J'espère que ces techniques vous ont aidé à comprendre comment animer votre logo. Les liens vers toutes les ressources que j'ai mentionnées se trouveront dans la section des ressources de classe 17. BONUS : erreurs courantes d'animation de logo: Voici six erreurs courantes lors animation de logos et ce qu'il faut faire à la place Commençons par la pire erreur : massacrer le logo. Ce que je veux dire, c'est qu'une fois que le logo s'anime, il doit être parfait au pixel près par rapport au logo original, jusqu'à chaque courbe de couleur, chaque coin, etc. Lorsque vous animez un logo, vous devrez peut-être en recréer certaines parties pour pouvoir l'animer Vous pouvez également utiliser des masques pour animer le logo qui apparaît. Si vous ne faites pas attention, un coin peut être coupé ou une couche peut être heurtée pour vérifier que tout est correct Assurez-vous de sauvegarder une nouvelle version non modifiée du logo Importez-le ensuite et superposez-le sur l'état final de votre logo animé pour l'utiliser comme référence Pour vous assurer que tout est aligné, vous pouvez régler le mode de fusion du logo d'origine de manière à ce qu'il soit différent mettre en évidence les incohérences L'erreur suivante est de rendre l' animation du logo trop lente et/ou trop longue. L'animation d'un logo doit durer de trois à dix secondes. S'il s'anime simplement, il devrait être plus court, plus proche de 3 secondes. contre, s'il s'anime à l' entrée et à la sortie, il devrait être plus long, environ 10 secondes, pour laisser le temps de faire une pause au milieu afin que les spectateurs puissent voir le logo complet L'objectif d'une animation de logo est d'attirer l'attention du spectateur et de transmettre ce que le logo représente dans les plus brefs délais. L'animation du logo doit être rapide. La dernière chose que vous voulez faire est d'ennuyer ou de frustrer vos clients en leur faisant regarder une animation lente ou prévisible avant qu'ils ne puissent passer à l'action L'erreur numéro trois est d'utiliser le cadre entier. Il peut être tentant d' animer le dévoilement d'un logo en faisant apparaître des éléments du logo hors écran Mais avant cela, considérez tous les cas d' utilisation de l'animation du logo. Si la taille de l'écran ou le rapport hauteur/largeur changent, vous devrez trouver un moyen d'en tenir compte. Faire un tas de versions différentes peut être très pénible. Cela ne semble vraiment pas professionnel de montrer des bords bruts là où œuvres d'art sont coupées de manière maladroite, même si ce n'est que pour une fraction de seconde Vous rencontrerez également des problèmes similaires si l'ensemble de l'écran change de couleur comme dans cet exemple. Je ne dis pas que c'est mal d' animer un logo comme celui-ci, je dis simplement qu'avant de le faire, vous devriez envisager tous les différents cas d'utilisation de l'animation de votre logo Si vous devez créer différentes versions pour différentes tailles d'écran ou différents formats d'image, cela peut être un véritable casse-tête. Je recommande plutôt animation complète de votre logo soit contenue dans une zone relativement petite, comme celle-ci. erreur numéro quatre est d'utiliser des éléments incompatibles dans l'animation de votre logo Lorsque vous animez un logo, vous souhaiterez peut-être intégrer de nouveaux éléments qui ne figurent pas dans le design du logo lui-même Il peut s'agir d' éléments simples tels que des formes, des lignes ou des taches, ou d' icônes ou d'illustrations complètement nouvelles Quoi qu'il en soit, tout élément l'animation de votre logo doit être lié à la marque. Assurez-vous que toutes les couleurs correspondent à la palette de couleurs de la marque. Le niveau de détail est constant, notamment en ce qui concerne l'épaisseur des lignes et la cohérence du style général. Si vous n'avez pas créé le logo, mais que vous avez choisi de créer vos propres icônes à intégrer à l'animation, veillez à ce qu'elles correspondent au style du logo. Si vous pouvez consulter le concepteur du logo, soit pour lui demander de concevoir les icônes soit pour vous assurer que celles que vous avez conçues correspondent. L'erreur numéro cinq est de ne pas obéir aux lois de la physique. Lorsque des objets tombent, la gravité les accélère vers le sol. Ne vous contentez donc pas d'assouplir facilement ces images clés. L'objet ralentira avant d'atterrir, ce qui aura l'air incorrect parce qu'il l'est. Vous devez plutôt accéder à l'éditeur de graphiques pour ajuster la courbe de mouvement. Lorsqu'un objet est projeté en l'air, il se déplace généralement sous la forme d'un arc Le mouvement devrait démarrer rapidement raison de la force projetée dans l'air. Même si cette chose est imaginaire, au point le plus élevé, l'objet devrait ralentir mais ne pas s'arrêter. La vitesse ne doit donc jamais atteindre zéro. Lorsque l'objet tombe, la gravité l'accélère vers le sol. Encore une fois, vous devez accéder à l' éditeur de graphes pour créer cette courbe de mouvement. Pour rebondir, il faudra également respecter les lois de la physique. Si l'éditeur de graphes vous fait peur, consultez mon cours sur les mouvements fluides pour apprendre tout ce que vous devez savoir sur la création mouvements réalistes et d'effets secondaires La dernière erreur est le manque de rythme ou de fluidité. Une animation de logo peut être une simple révélation qui commence lentement, s' accélère et se termine lentement. Il peut également contenir quelques segments ou scènes qui créent un rythme. Regardez la différence entre ces deux animations. Celui de gauche utilise toutes les images-clés linéaires et tout est animé Dans le même temps, pour celui de droite, les images-clés ne sont pas linéaires. Ils ont été ajustés dans l'éditeur de graphes pour donner à chaque élément une courbe de mouvement personnalisée, et le moment où chaque élément entre en jeu est décalé. Ce logo est beaucoup plus intéressant et agréable à regarder. Comme vous l'avez appris tout au long du cours, intégration de quelques principes d'animation peut améliorer encore davantage cette animation. Examinons maintenant la différence entre la première version linéaire ennuyeuse, la deuxième version à flux amélioré et la version finale qui utilise les principes de l'animation 2. 18. BONUS : comment j'ai animé ce logo: Dans cette vidéo bonus, je vais vous expliquer étape par étape comment j'ai créé cette animation de logo. Examinons les fichiers du projet pour la version finale, puis je les recréerai étape par étape Il s'agit de la composition principale dans laquelle j'ai trois versions différentes de la même animation de logo. Donc, si j'entre dans le vif du sujet, c' est là que se déroule toute l' animation. Et puis, si je reviens à la composition principale, ces deux compositions supplémentaires sont destinées aux couches d'accent Je vais vous montrer comment procéder à la fin. Commençons par recréer cette animation. Je vais créer une nouvelle composition. Je le fais de 1 500 x 1 500 pixels, 30 images par seconde et d'une durée de 5 secondes. L'étape suivante consiste simplement à utiliser des couches de texte pour recréer le logo Je vais donc écrire chaque lettre sur sa propre couche de texte. Vous pouvez voir tous mes paramètres pour ma police ici, mais n'hésitez pas à utiliser les vôtres. Ensuite, je vais juste être paresseux, le dupliquer puis modifier la lettre. Ensuite, je vais répéter cela pour les autres lettres. Il peut être utile de zoomer et d'activer la grille pour vous assurer que tout est bien aligné. Comme je vais animer les lettres en changeant de forme, par exemple pour créer ces taches, je dois les convertir en couches de forme Pour ce faire, cliquez avec le bouton droit sur l'une des couches de texte, Créer, puis créez des formes à partir du texte. Pour une raison quelconque, il ne vous permet pas de les faire toutes en même temps. Si vous en sélectionnez plusieurs, l'option est excellente. Je vais supprimer les couches de texte d'origine. La façon dont je vais aborder cette animation consiste à animer les propriétés de position et d'échelle de chaque lettre, puis à la fin, je vais revenir arrière et animer la propriété du chemin Commençons donc par le L. Et la première chose que je veux faire est de déplacer le point d'ancrage de manière à ce que, lorsqu' il est redimensionné , il soit redimensionné depuis le haut. Et il sera également animé depuis le haut, donc je pense qu'il sera plus esthétique de le faire redimensionner par le haut que de le faire redimensionner à partir de l'endroit où se trouve actuellement le point d'ancrage. Pour déplacer le point d'ancrage, vous pouvez utiliser l'outil Pan Behind. Ensuite, si vous maintenez la commande enfoncée, elle se mettra en place. Ensuite, je vais ouvrir la propriété position passer à 25 images et définir une image-clé. Revenons ensuite à dix images et déplaçons-le vers la gauche. Ensuite, au début de la chronologie, faisons-la monter. Nous animons simplement à l'envers. Donc quelque chose comme ça. Je vais également ajouter un peu de suivi. Donc, au lieu de simplement l'arrêter ici, il va dépasser sa position finale puis y revenir Pour ce faire, je vais passer à 1 seconde, copier et coller cette image-clé, donc c'est la position finale, puis je vais revenir à cette image-clé à 25 images et déplacer le L un peu vers la droite Alors maintenant ça ressemble à ça. Ce sont toutes des images-clés linéaires, ce qui donne à l'animation un aspect vraiment ennuyeux et mécanique Donc, ce que je vais faire, c'est les sélectionner et faire F neuf à Ess. Vous pouvez également cliquer avec le bouton droit sur Accéder à Keyframe Assistant, puis sur EZ Es. Ensuite, je vais ouvrir l'éditeur de graphes avec les images-clés toujours sélectionnées pour ajuster ce graphique et le rendre encore plus beau Donc pour le moment, ça a l'air un peu mieux, mais je peux le rendre encore plus accrocheur abord, je vais cliquer sur l'une des images-clés pour faire apparaître les poignées, puis faisons-la simplement glisser Shift enfoncée pour m' assurer que je ne vais pas comme ça et ajuster l'image-clé Je vais le faire glisser pour que ça aille plus vite au début. Je recherche le graphique de vitesse. Ceci montre un graphique de la vitesse au fil du temps. Ça va démarrer assez vite. Le pic de vitesse est juste là, puis il va ralentir à mesure qu'il atteindra cette première image-clé Alors exagérons ce mouvement, il sera plus lent, puis plus rapide et plus lent Et puis, pour ce petit pic d'anticipation, je vais faire de même. Voyons donc à quoi cela ressemble. Bien mieux. Vous pouvez peaufiner cela autant que vous le souhaitez, mais continuons. Ensuite, je vais animer la propriété scale. Une fois cette couche L sélectionnée, je vais appuyer sur Shift S pour afficher la propriété d'échelle. Je vais passer à dix images et définir la valeur de l'échelle à 100 %, et au début de la chronologie, je mettrai l'échelle à zéro. Alors maintenant, il va augmenter au fur et à mesure qu' il descend, puis il se déplacera. Ajoutons un suivi à cette animation deux. Je vais donc déplacer cette image-clé sur 15 images pour qu'elle soit de 100 %, puis je vais régler la valeur d'échelle pour qu'elle soit légèrement supérieure à 100 % Faisons-en 15 ici, donc ça va augmenter un peu trop, puis diminuer à nouveau. Ajoutons EZ EZ Es à ces images-clés. Ensuite, allez dans l'éditeur de graphiques et rendez-les un peu plus dramatiques. Je vais donc essayer de faire correspondre le graphique de position pour que la vitesse maximale soit juste là. Et voyons à quoi cela ressemble. Il ne nous reste plus qu'à faire des animations de position et d'échelle similaires sur toutes les autres lettres. Si nous passons à la version finale, vous pouvez voir que le O supérieur va tout droit vers le bas et le G va tout droit vers le haut, puis le dernier O monte puis vers la gauche. Notez également que j'ai positionné chacun des points d'ancrage de manière à ce qu'il se soit en haut si les lettres sont en haut soit en bas si les lettres sont en bas. Je vais accélérer cette partie car elle est assez répétitive. Vous pouvez ajuster l'assouplissement d'ensembles d'images-clés sur plusieurs couches en les sélectionnant toutes en même temps, en ajoutant des facilités, puis en accédant à l'éditeur de graphes, puis en accédant à l'éditeur de graphes, puis en cliquant et en faisant glisser le pointeur pour sélectionner l'image-clé, puis vous pouvez saisir ces deux poignées J'ai les animations de position pour le O, le G et le O, et j'ai déjà ajusté l'éditeur de graphes pour le O et le G, mais pour ce dernier O, il a le même type de mouvement que le L. Je veux donc copier cet assouplissement exact sur ces images-clés Il existe un outil pratique qui est gratuit ou payant votre guise, appelé Es Copy, où vous pouvez facilement le faire. Donc, si vous sélectionnez les images-clés, cliquez sur Copier, puis vous sélectionnez les images-clés sur lesquelles vous souhaitez coller ces valeurs d'assouplissement Je ne veux pas vraiment coller les images-clés , car le O serait alors là où se trouve le L. Je veux juste coller ces valeurs d'assouplissement. Je vais donc juste appuyer sur Es sur une copie Es, et maintenant il y aura le même assouplissement. ce qui concerne la propriété scale, vous pouvez copier et coller les images-clés exactes sur chacune des autres lettres Voici à quoi cela ressemble jusqu'à présent. Animons maintenant la propriété path chaque lettre pour lui donner cet effet de traînée. C'est un autre principe de l'animation. Je vais commencer par le L et ouvrir pour trouver la propriété path Je vais passer à 25 images et définir une image-clé de trajectoire, puis je vais me déplacer là où elle commence à se déplacer vers la droite heure actuelle, le tracé complet et tous les points sont sélectionnés, je ne peux donc pas ramasser et déplacer des points individuels. Donc, ce que je vais faire, c'est cliquer sur «   off », puis cliquer de nouveau sur « L. Maintenant vous pouvez voir que le chemin est visible, mais aucun des points du chemin n'est sélectionné ». Je vais donc zoomer, puis simplement cliquer et faire glisser le pointeur sur tous ces points sur la gauche pour les sélectionner, et je vais les faire glisser vers la gauche. Ensuite, je vais revenir à dix images, puis je vais copier et coller cette image-clé pour que le L retrouve sa forme normale Ensuite, au début de la chronologie, le L est redimensionné jusqu' à zéro, donc je ne peux rien voir Je vais ouvrir la propriété scale et simplement prendre ces images-clés, les déplacer , puis régler l'échelle sur 100 Maintenant, je peux vraiment voir sur quoi je travaille, et je vais sélectionner l' endroit où il est à nouveau écrit L, et je vais sélectionner l' endroit où il est à nouveau écrit L, sélectionner ces points supérieurs du chemin, puis les faire glisser vers le haut pour faire en sorte que le L soit haut. Ajoutons es Es à ces images-clés, puis passons dans l' éditeur de graphes et rendons ce graphique un peu plus intéressant C'est peut-être quelque chose comme ça. Ensuite, je dois supprimer cette image-clé de balance et les remettre en place. Voici à quoi cela ressemble. Pour que les frottis soient beaux, il est important que la substance à l'origine de ce mirage ne donne pas l'impression de revenir en arrière à cause du Permettez-moi donc d'expliquer davantage ce que je veux dire. Donc, si on passe à côté de ça et qu' on se concentre uniquement sur le L, ici, le L n'avance pas assez vite pour donner l' impression que c'est une tache qui sort de derrière le L. Cette partie épaisse du L s'écaille en quelque sorte des deux côtés, à gauche et Pour résoudre ce problème, nous devons trouver la partie la plus rapide de l'animation de position. Donc, si je vais dans l'éditeur de graphiques et que je regarde le graphique de vitesse, ce sera le pic ici même. Et c'est là que je veux que le frottis soit le plus large La partie la plus importante sera donc cette image-clé. Donc, si je fais simplement glisser cette image-clé , ça va aider Et puis si je vais également dans l'éditeur de graphiques et que j' ajuste ce graphique pour qu'il soit le plus rapide au moment où il est taché Donc comme ça. Maintenant, rejouons-le. Ça a l'air bien mieux. Donc ici, il ne fait que se déplacer, et le frottis sort de derrière le L. Il n'a pas l' air de s'écailler Cela ressemble plus à une tache. Passons maintenant au O. Donc, pour le O, si vous entrez dans la propriété path, il existe en fait deux propriétés de chemin différentes car il existe un chemin intérieur et un chemin extérieur. Je vais donc déplacer ma tête de lecture à 25 images et définir une image-clé de trajectoire pour les deux Ensuite, je vais revenir à 15 images et zoomer sur le O. Pour l' instant, si je devais simplement animer ce point ici, le O ne s'étirerait pas d'une manière que je trouve belle Je vais donc annuler cela et accéder à l'outil Stylo, puis cliquer et maintenir pour trouver l'outil Ajouter un sommet Je vais me rapprocher de ces points existants et en ajouter un autre. Il est donc probablement utile de zoomer encore plus. J'ajoute donc un point juste à côté du point existant des deux côtés. Et je vais également devoir le faire sur le cercle central. Ensuite, je peux sélectionner avec soin uniquement les points supérieurs , puis les faire glisser vers le haut pour créer cette tache. Ensuite, au début de la chronologie, je vais copier et coller ces images-clés pour que le O commence comme une forme normale Voici donc à quoi cela ressemble. Faisons en sorte que ce miroir ressemble davantage celui-ci et veillons à ce qu' il ne fasse pas marche arrière afin que le frottis se produise pendant la partie la plus rapide du mouvement du O. Je vais ouvrir la propriété de position. Regardons simplement où se situe la partie la plus rapide du mouvement. Cela se produit ici, ce qui peut rendre le frottis dur parce qu' il s'écaille à ce moment-là En fait, ajustons simplement cette propriété de position. Peut-être que si la partie la plus rapide du mouvement se trouve juste ici, je vais déplacer ces deux images-clés de manière à ce que, lorsque le o est le plus taché, il s'aligne sur la partie la plus rapide de la position du o. Ensuite, je veux que le cercle intérieur soit un peu plus petit pour que le dessus soit plus épais pour lui donner un aspect plus taché. Ensuite, je veux que le cercle intérieur soit un peu plus petit pour que le dessus plus épais pour lui donner un aspect plus taché Je vais aller dans le cercle intérieur, zoomer , puis saisir tous ces points et les ramener vers le bas. Et ajoutons Ess à ces images-clés. Vous pouvez accéder à l'éditeur de graphiques et ajuster encore plus ces images-clés, mais continuons J'espère qu'il sera relativement facile de comprendre comment animer le G et le O en fonction de la façon dont j'ai animé la propriété de trajectoire du L et du premier O. Donc, pour gagner du temps, je vais passer à autre chose, mais voici ce que j'ai obtenu jusqu'à présent Une chose que je veux ajuster, c'est que vous pouvez voir les lettres lorsqu'elles sont minuscules comme ça, et je veux éviter cela Je vais donc passer à trois cadres et simplement couper le début des lettres pour qu' elles commencent directement à trois cadres. De cette façon, les lettres apparaîtront et vous n'aurez pas à voir si elles sont vraiment petites. La prochaine chose que je veux faire est d'échelonner les couches pour que les lettres n' arrivent pas toutes en même temps Faisons donc entrer le L en premier. Et je ne les répartis pas de manière uniforme, car je veux l'animation suive le principe de facilité d' entrée et de sortie, que vous pouvez appliquer aux images-clés, mais que vous pouvez également appliquer à l'animation d'un logo dans son ensemble Donc, la façon dont cela fonctionne est que le L va démarrer l'animation, et il se passe relativement peu de choses. Et puis il va se passer d'autres choses au milieu de l'animation. Ensuite, ce dernier O terminera l'animation de manière plus échelonnée que les autres, de sorte qu'il se passe moins de choses Cela réduit donc en quelque sorte la quantité d'animation. Cela commence donc avec un peu moins d'animation, moins de vitesse au milieu, il y a plus d'animation, plus de choses se passent. Les choses évoluent de plus en plus vite. Et puis à la fin, il y a moins d'animation et les choses ralentissent. Voici donc ce que j'ai jusqu'à présent. Pour animer ce logo, je vais redimensionner chaque lettre Mais pour le moment, chacun des points d'ancrage se trouve dans des positions différentes et je veux que toutes les lettres soient redimensionnées à partir du centre. Donc, ce que je vais faire, c'est aller là où je veux qu' ils commencent à être redimensionnés, et passons simplement au L. Si vous passez sous le contenu puis sous le L, il y a un autre ensemble de propriétés de transformation, uniquement pour cette forme. Ces propriétés de transformation concernent l'ensemble de la couche Vous pouvez donc avoir plusieurs formes dans cette couche de formes. Mais dans ces propriétés de transformation, si je l'ouvre, il y a un autre point d'ancrage Pour le moment, c'est juste ici. En général, ces points d'ancrage se trouvent déjà au centre, mais comme il s'agissait à l'origine d'une couche de texte, le point d'ancrage se trouve ici. Donc, ce que je dois faire, c'est déplacer ce point d'ancrage vers le centre. Je vais donc utiliser l' outil Pan Behind , car malheureusement, cet outil ne fonctionne pas pour ce type de point d'ancrage, et le claquement ne fonctionne pas non plus Je vais donc le déplacer prudemment vers le centre. Et faisons-le simplement pour toutes les couches. Il s'agit maintenant d'animer la mise à l'échelle des lettres. Je veux juste trouver cette propriété d'échelle qui se trouve sous le contenu, puis le nom de la lettre , puis la transformation et la lettre. Et je vais animer cette propriété d'échelle. Je vais donc régler une image-clé à 3 secondes pour que l' échelle soit de 100 Passons ensuite à 310 et réglons ce paramètre à 110, puis passons à 4 secondes et mettons ce paramètre à zéro. Donc, en animant l'échelle en augmentant légèrement avant qu'elle ne diminue et ne disparaisse complètement, j'ajoute un principe d' animation appelé anticipation Ajoutons de la facilité à ces images-clés , puis passons à l'éditeur de graphes et rendons cela un peu plus intéressant Copions et collons maintenant cette animation d'échelle sur toutes les autres propriétés d'échelle. Je vais donc rechercher une échelle pour afficher rapidement ces propriétés , puis m'assurer de la coller sous transform, puis sous le nom de la lettre Maintenant, ils vont tous évoluer, mais je voudrais aussi échelonner les images clés de l'échelle Retrouvons donc cette propriété d' échelle. Commençons par le L en premier , puis redimensionnons ceux-ci quelques images plus tard. Voici donc ce que j'ai. Découpons également les extrémités des couches de manière à ce qu'elles ressortent et que vous ne voyiez pas ces petites couches minuscules. Donc je vais juste te taper pour faire apparaître toutes les images-clés. Et coupons la couche lorsque la taille de la lettre est à peu près la suivante. Maintenant que cette animation est terminée, la dernière chose à faire est de l' intégrer dans une autre composition pour ajouter ces accents Je vais aller dans le panneau de projet, prendre cette composition sur laquelle je travaille et la faire glisser sur le nouveau bouton de composition pour créer une nouvelle composition contenant cette composition Créons une forme pour l'arrière-plan Je vais donc simplement double-cliquer sur l'outil Rectangle et le déplacer vers le bas. Ensuite, je vais dupliquer cette animation du logo en appuyant sur la commande D. Ensuite, sur la copie inférieure de cette composition, je vais ajouter des effets Je vais accéder aux effets et aux préréglages et rechercher l'effet de remplissage Faites-le glisser, puis recherchez également l'effet d'écho. Ensuite, j'ajouterai cet effet d' écho à la composition. L'effet d'écho crée des copies supplémentaires pour créer une trace ou une tache. Augmentons le nombre de copies. Vous pouvez voir l'effet d' écho, mais je n'aime pas l'apparence des espaces entre les lettres. Je veux que ce soit une tache solide. Je vais donc régler le temps d'écho à quelque chose de vraiment bas. Et puis changeons également la couleur de remplissage. Même si je change la couleur de remplissage pour prendre ce verdâtre sarcelle, l'écho est toujours affiché en blanc Je dois donc régler l'opérateur d' écho au maximum Je ne veux pas que la copie supérieure du logo soit noire Je vais donc copier cet effet de remplissage et le coller sur la partie supérieure du logo, puis changer cette couleur en blanc Si je le remets maintenant, vous pouvez voir que la tache sur la partie verte apparaît en fait avant la tache sur le blanc, ce qui n'a pas l'air tout à fait Je veux que ce soit l' inverse. Donc, si je passe à la deuxième composition, pour le moment, le temps d'écho est réglé sur un nombre positif, ce qui signifie qu'il fait écho avant ce qu'il Je dois donc définir ce paramètre sur un nombre négatif, donc je vais simplement ajouter un signe négatif devant celui-ci. Et maintenant, cette tache verte va se trouver après la tache blanche. Dupliquons la deuxième composition pour créer un autre ensemble d'accents. Dans cette troisième version inférieure de la composition, je vais supprimer l'effet d'écho, puis je vais changer la couleur de remplissage pour qu'elle soit de la même couleur que celle de l'arrière-plan Et puis compensons cela de quelques images. Vous ne pourrez pas le voir car il est de la même couleur que l'arrière-plan. Mais ce que je vais faire, c'est ajouter un trait à cela. ce faire, je vais cliquer avec le bouton droit de la souris, accéder à Styles de couche, puis tracer. Ouvrez le trait et définissez-le sur la couleur verte Et faisons-le de l'intérieur. De cette façon, il ne ressortira pas derrière la lettre. Et voici l'animation finale. Une dernière petite chose. Si quelqu'un porte une attention particulière aux détails, dans ce didacticiel, je déplace le point d'ancrage chaque lettre au centre de la lettre, de sorte que lorsqu'elle s'anime, elle s' anime vers le centre de la Mais dans l'animation originale de mon logo, je l'ai fait légèrement différemment, sorte que les lettres se dirigent davantage vers le centre de la composition. Donc, si vous voulez procéder de cette façon, il vous suffit d' entrer dans chaque lettre individuelle et de déplacer ce point d'ancrage vers le centre de la composition plutôt que vers le centre de la lettre