Améliorer une animation de texte avec les principes d'animation - Conseils et astuces en motion design

1. Introduction: Le but de cet épisode est de parler principes de l'animation et de la façon dont ils peuvent s'appliquer aux animations de texte dans les animations graphiques. Les 12 principes ont été inventés pour la première fois par Disney dans les années 1930, mais vous n'avez pas besoin de créer des dessins animés à gros budget ou des animations image par image les intégrer à votre travail Ensemble, nous créerons une animation textuelle tout en découvrant les principes. J'ai hâte de voir tes animations. 2. Pour commencer et projet de cours: Pour commencer ce cours, vous aurez besoin d'Adobe After Effects pour suivre le cours. Votre projet de classe consiste à appliquer les principes de l'animation à votre propre animation de texte ou à toute animation de votre choix. Vous pouvez télécharger une version complète de ce fichier de projet sur la page du projet et des ressources et n'hésitez pas à publier vos projets dans la galerie de projets. 3. La diapositive principale en animation: Pour ce cours, j'adopte une approche un peu plus détendue. Nous allons ouvrir la page Wikipédia consacrée aux 12 principes d'animation, et nous les passerons en revue un par un, et nous verrons comment nous pouvons les intégrer dans notre animation de texte. Nous allons commencer ce cours en créant une simple diapositive dans une animation de texte. Les paramètres de composition n'ont pas vraiment d'importance pour ce projet. Je vais chercher mon outil de saisie et taper du texte. Je vais taper une animation. La police que vous utilisez n'a pas vraiment d'importance non plus, mais je vais utiliser Montserrat Black Je vais centrer le texte au milieu de la composition. Cela nous amène à notre premier principe d'animation, dépôt par pose par opposition à l'action directe Il s'agit de deux approches différentes du processus de dessin. Les scènes d'action de Straight Ahead sont animées image par image du début à la fin. Alors que le dépôt de pose implique de commencer par dessiner des images-clés, puis de remplir les intervalles ultérieurement L'action directe crée une illusion de mouvement plus fluide et dynamique et permet de produire des séquences d'action réalistes. autre côté, il est difficile de maintenir les proportions et de créer poses exactes et convaincantes en cours de route. pose fonctionne mieux pour les scènes dramatiques et émotionnelles où la composition et la relation l'environnement revêtent une plus grande importance. Une combinaison des deux techniques est souvent utilisée. En animation par ordinateur, ce que nous faisons, animation par ordinateur élimine les problèmes de proportions liés au dessin direct, mais la pose pour poser est toujours utilisée pour animation par ordinateur en raison des avantages qu'elle apporte en termes de composition. L'utilisation d'ordinateurs facilite cette méthode et permet remplir automatiquement les séquences manquantes entre les poses. Il est toujours important de superviser le processus et d'appliquer les autres principes. Il n'est pas nécessaire de faire quoi que ce soit pour appliquer ce principe d'animation, car dans les animations graphiques, la plupart du temps, nous faisons une pose par une automatiquement. Maintenant que nous savons quel type d'animation nous créons, nous allons créer cette simple animation de diapositives dans un texte. Je vais afficher la position en appuyant sur P. Je vais simplement appuyer sur le chronomètre pour placer une image-clé et la faire glisser sur la Peu importe où pour le moment. Je vais maintenant modifier la valeur Y. Je vais peut-être ajouter 300 à la valeur Y. Nous y voilà. Et cela crée automatiquement une autre image-clé pour nous. Voyons maintenant combien de temps nous voulons que cette animation dure. Peut-être que nous allons le faire pendant 1 seconde. Je vais donc faire glisser cette image-clé sur 30 images sur la chronologie. Et voilà, notre simple animation de diapositives. Nous pouvons maintenant commencer à améliorer cette animation en utilisant nos principes d'animation. 4. Ralentir et ralentir: Ralentir et ralentir ou, en d'autres termes, faciliter l'entrée et la sortie. Le mouvement d'objets dans le monde réel, tels que le corps humain, les animaux, les véhicules, etc., a besoin de temps pour s'accélérer et ralentir. C'est pourquoi un plus grand nombre d'images sont dessinées au début et à la fin d'une action, ce qui crée un effet de ralentissement afin d'obtenir un mouvement plus réaliste. Le concept met l'accent sur les poses extrêmes de l' objet. Inversement, moins d'images sont dessinées au milieu de l'animation afin de mettre en valeur une action plus rapide Ce principe s'applique aux personnages se déplacent entre deux poses extrêmes, comme s'asseoir ou se lever, mais aussi aux objets inanimés en mouvement comme une balle rebondissante Donc, comme je l'ai mentionné, le ralentissement et le ralentissement peuvent également être appelés facilité d'entrée et de sortie. Pour faciliter et atténuer nos mouvements dans After Effects, il suffit de sélectionner nos images-clés appuyer sur la touche F 9 pour faciliter Voilà, nous l'avons. Notre premier principe d'animation est déjà appliqué. Si vous êtes un utilisateur intermédiaire d'After Effects, vous savez déjà qu'une entrée et une sortie simplifiées créent une animation plus fluide entre nos images-clés Bien entendu, nous pouvons accéder à notre éditeur de graphes et modifier notre animation à notre guise. Mais pour le moment, je vais le laisser tel quel, et nous l'améliorerons plus tard en utilisant nos autres principes d' animation. 5. Anticipation (et dépassement) ): Le prochain principe d'animation que nous allons appliquer à notre animation est l'anticipation. L'anticipation est utilisée pour préparer le public une action et pour rendre l' action plus réaliste. Un danseur qui saute du sol doit d'abord plier les genoux. Un golfeur qui fait un swing doit d'abord faire reculer le club. La technique peut également être utilisée pour des actions moins physiques, comme lorsqu'un personnage regarde hors écran pour anticiper arrivée de quelqu'un ou pour concentrer son attention sur un objet qu'un personnage s' apprête à ramasser. Pour anticiper notre propre animation, avant que celle-ci ne commence à s'animer vers le haut, nous pouvons avancer de quelques images et la réduire. Passons donc à quatre images sur la chronologie Nous copierons et collerons notre première image-clé et nous ferons glisser la position Y, peut-être en l'arrondissant à 930. Allons-y. Avant que notre animation ne monte, elle diminuera légèrement, et c'est peut-être ce que nous anticipons. Ce que nous pouvons également faire, c'est ajouter un peu de dépassement. Et dépasser n'est qu'un autre mot pour désigner l'anticipation, mais c'est dépasser le dernier lieu de repos Nous pouvons copier notre dernière image-clé, coller dans l'image 26, et nous changerons la position Y vers le haut Je vais faire le mien 525. Alors, on y va. Maintenant, au lieu de simplement passer d'une image-clé à l'autre, notre animation d'une image-clé à l'autre, descend légèrement, descend légèrement, comme nous l'avions prévu, puis elle dépasse légèrement avant d'atteindre le lieu de repos final Je vais me rendre dans l'éditeur de graphiques et jeter un œil au graphique de vitesse. Ça a l'air un peu bizarre. Une solution simple à ce problème consiste à désactiver nos images-clés en les sélectionnant, en appuyant sur la touche Ctrl et en cliquant sur nos images-clés, puis nous les simplifierons facilement en appuyant sur F neuf, en retournant dans l' Et je vais commencer à assouplir nos images-clés. Je vais commencer par les faire glisser au milieu, puis je vais passer aux deux dernières images-clés Je vais également les faire glisser vers le milieu. Et pour l' animation principale au milieu, je vais faire glisser cette poignée vers la gauche. Allons-y. Prévisualisons et voyons à quoi cela ressemble. Je pense que ça a l'air plutôt bien. Alors, on y va. Nous avons créé une certaine anticipation et un certain dépassement de soi. Je vais également déplacer légèrement nos images-clés sur la chronologie afin que l' animation ne démarre pas tout de suite. Peut-être que nous pouvons le déplacer à cinq images sur la chronologie. 6. La compression et l'étirement: Juste un petit résumé de ce que nous avons jusqu'à présent. Nous avons déterminé que le type d' animation est de pose à pose. Nous avons ajouté une certaine facilité d'entrée et de sortie, et nous avons également ajouté un peu d'anticipation et de dépassement Allons maintenant encore plus loin dans notre animation avec notre prochain principe, le squash et l'étirement. Le but du squash et étirement est de donner une impression de poids et de flexibilité aux objets dessinés ou animés par ordinateur. Il peut être appliqué à des objets simples comme une balle rebondissante ou à des constructions plus complexes comme les muscles du visage humain À l'extrême, une silhouette étirée ou écrasée de manière exagérée peut avoir un effet comique Dans une animation réaliste, toutefois, l'aspect le plus important de ce principe est que le volume de l'objet ne change pas lorsqu'il est écrasé ou étiré Si la longueur de la balle est étirée verticalement, sa largeur en trois dimensions, ainsi que sa profondeur, doivent se contracter en conséquence horizontalement Dans notre propre animation, étant donné que nous ne faisons qu'une simple animation de texte, je ne pense pas que nous devions trop nous soucier de l'animation réaliste. Cependant, si nous animions quelque chose comme une balle qui rebondit, nous devrions compenser un étirement vertical par un par Appliquez un peu de squash et d'étirement à notre animation de texte, nous ajouterons une simple animation à échelle. Je pense qu'au fur et à mesure que notre texte s'anime vers le haut, nous l'étirons légèrement, puis lorsque le texte arrivera à sa place, nous l'écraserons un peu, puis quelques images plus tard, nous le ferons revenir à son échelle normale Pour commencer, affichez les propriétés de position et d' échelle en appuyant sur P, en maintenant la touche Shift enfoncée, puis en appuyant sur S. Nous passerons à l' image-clé puis en appuyant sur S. Nous passerons à l' de deuxième position et nous appuierons sur le chronomètre pour placer une Passons maintenant à l'image-clé de troisième position. Nous allons dissocier l'échelle afin pouvoir simplement modifier la propriété Y. Nous allons changer notre échelle Y à un 15 %. Nous allons maintenant passer à l'image-clé de dernière position. Et ce que nous voulons faire, c'est appuyer sur le bouton de l'image-clé parce que nous voulons que ces deux images-clés restent les mêmes Nous ne voulons aucune animation entre eux. Nous allons maintenant passer, disons, peut-être cinq images de la chronologie à l'image 40, et c'est ici que nous allons faire du squash. Nous allons changer notre échelle Y à 85 %, puis quelques images plus tard, à l'image 43, nous allons revenir à notre échelle normale, modifier notre propriété d'échelle de 100. Maintenant, voyons un aperçu de ce à quoi cela ressemble. C'est très subtil, mais je pense que cela ajoute beaucoup à l'animation. Toutes ces petites choses subtiles peuvent améliorer considérablement l' apparence de vos animations. Et je pense que nous pouvons l'assouplir et en tenir à la facilité de base pour le moment. 7. Suivi et chevauchement: suivi et le chevauchement des actions sont un titre général désignant deux techniques étroitement liées qui aident à rendre le mouvement de manière plus réaliste et à donner l'impression que le personnage suit les lois de la physique, y compris le principe de l'inertie suivi signifie que les parties du corps mal liées Le suivi signifie que les parties du corps mal liées doivent continuer à bouger une fois que le personnage s'est arrêté, et que les parties doivent continuer à bouger au-delà du point où le personnage s'est arrêté pour être ensuite ramenées en arrière Vers le centre de gravité ou présentant différents degrés d'amortissement de l'osculation action qui se chevauche est la tendance des parties du corps à se déplacer à des vitesses différentes Par exemple, un bras bougera à rythme différent de celui de la tête et ainsi de suite. Une troisième technique connexe est le glisser-déplacer, où un personnage commence à se déplacer et certaines parties de celui-ci mettent quelques images à rattraper leur retard. Ces parties peuvent être des objets inanimés tels que des vêtements ou l'antenne d'une voiture ou des parties du corps, telles que les bras et le corps humain Le torse est le noyau central avec les bras, les jambes, tête et les cheveux qui suivent normalement les mouvements du torse Les parties du corps contenant du tissu musculaire, comme les gros estomacs ou les seins ou la peau lâche un chien, sont plus susceptibles de bouger de manière autonome que les parties du corps plus osseuses. Encore une fois, l'utilisation exagérée de cette technique peut produire un effet comique. animation plus réaliste doit chronométrer les actions avec précision pour produire un résultat convaincant. Le maintien mobile s'anime entre deux positions très similaires Même les personnages qui restent immobiles ou bougent à peine peuvent faire preuve d' un certain type de mouvement, par exemple en respirant ou en changeant légèrement de position. Cela évite que le dessin ne devienne une implémentation de ce principe dans notre propre animation, nous pourrions faire animer toutes les lettres de notre mot à un moment différent Dans cette leçon, je vais donc vous montrer deux méthodes distinctes pour compenser nos lettres La première méthode est beaucoup plus conviviale pour les débutants, mais elle est peut-être plus facile, elle est beaucoup moins indulgente lorsque nous modifierons nos animations plus La deuxième méthode reliera toutes nos couches à une seule couche à l' aide d'une expression. Ainsi, lorsque nous modifierons l' animation sur une couche, toutes les couches suivront. Vous verrez ce que je veux dire lorsque nous allons implémenter cela. Je vous recommande donc de suivre cette leçon jusqu'au bout, puis vous pourrez décider de la méthode que vous souhaitez utiliser. Nous commençons par un clic droit sur notre texte. Accédez à Créer des formes à partir de texte. Ce que nous allons devoir faire, c'est dupliquer cette couche pour chaque lettre. Je vais dupliquer ma couche sept fois , baisser le contenu, et nous allons supprimer toutes les lettres présentes, à l' exception du A, puis nous renommerons cette couche A, et nous allons le faire pour chaque Je pourrais avancer rapidement, mais en gros, nous parcourons chaque couche, nous supprimons toutes les lettres sauf celle que nous voulons, puis nous renommons la couche Et je me rends compte maintenant que je dois en créer une autre parce que j'ai oublié une lettre. OK, maintenant que nous avons terminé, nous allons décaler nos couches. Nous pouvons sélectionner toutes nos couches, diriger vers une image de la chronologie, maintenir la touche Alt et le crochet enfoncés pour couper nos couches sur la chronologie. Ensuite, je vais faire glisser mes couches sur la chronologie de manière à ce qu'elles ne fassent qu'une seule image. Je peux cliquer avec le bouton droit sur les couches. Accédez à Keyframe Assistant, couches de séquences. Nous allons simplement cliquer sur OK. Et cela décalera toutes nos couches d' une image sur la chronologie. présent, nous devons à nouveau faire glisser nos couches pour qu'elles s' étendent sur la chronologie. Et nous devrons faire de même au début de la chronologie. Et en gros, cela ne fait que décaler nos images-clés sur la chronologie C'est juste une façon beaucoup plus rapide de le faire. Vous voyez, lorsque nous affichons nos images-clés avec la touche U, elles sont toutes décalées d'une image C'est donc la première méthode pour décaler nos couches. Je vais maintenant vous montrer une autre méthode utilisant une expression. Pour commencer, nous allons cliquer avec le bouton droit de la souris pour créer des formes à partir de texte. Ensuite, nous dupliquerons cette couche suffisamment de fois pour chaque lettre, manière très similaire à notre première méthode. Nous allons simplement les parcourir toutes, supprimer toutes les lettres que nous ne voulons pas et renommer notre couche, comme dans notre première méthode OK. Maintenant que nous en avons fini avec cela, c'est là que les choses changent un peu. Nous allons afficher les images-clés de toutes nos lettres, l' exception de la première lettre A, et nous allons supprimer toute l'animation car nous allons remplacer par une expression N'oubliez pas que pour supprimer une animation, vous pouvez simplement appuyer sur le chronomètre Maintenant, nous pouvons afficher ces images clés pour notre couche A. Maintenant, avec la position de notre N, nous allons appuyer sur Alt et appuyer sur le chronomètre Et dans ce champ, nous allons écrire notre première expression. Je vais d'abord écrire une variable. P est égal, et je vais utiliser le fouet pour saisir la position Terminez par un point-virgule. Passez à la ligne suivante et je vais écrire mon expression. Valeur du point P à la fois. N'oubliez pas que cela distingue les majuscules et minuscules, alors écrivez-le exactement comme indiqué. Et ici, je vais écrire le temps -0,10 0,1 de seconde car les expressions sont toujours exprimées en Et comme vous pouvez le constater lorsque nous parcourons la chronologie, notre N s'anime exactement un point de seconde plus tard que notre A, qui est exactement ce que nous voulons Nous allons maintenant faire la même chose pour l'échelle. Je vais commencer par une variable. S est égal, utilisez le fouet pour saisir la balance. Terminez par un point-virgule. Passez à la ligne suivante. Tapez la valeur en points de la variable à la fois. T -0,1 seconde. Nous y voilà. Maintenant, il copie également l' animation à grande échelle. Et nous allons le faire pour chaque lettre. La seule chose que nous allons changer dans l'expression pour le reste de nos lettres, c'est le timing. Mais oui, toutes les modifications que vous apportez à la couche A seront répercutées sur les autres lettres car, encore une fois, nous utilisons une expression qui copie toute l'animation. Je vais donc copier cette expression pour le poste. Passez à la lettre suivante, appuyez sur Alt pour ajouter une expression, puis collez-la simplement dans ce champ, et nous allons la remplacer par 0,2. Cela reporte l'animation de position, encore 0,1 de seconde plus tard. Nous ferons de même pour la balance. Et tu l'as deviné. Nous faisons la même chose pour chaque lettre. Je vais donc probablement passer rapidement à autre chose. Mais n'oubliez pas que pour chaque lettre, nous allons changer le nombre à 0,3 0,4, etc. Nous y voilà. Prévisualisons notre animation. 8. Animation secondaire: Maintenant que nous avons ajouté un peu de suivi et superposition en décalant nos lettres, nous pouvons passer au principe d'animation suivant, action secondaire L'ajout d'actions secondaires à l'action principale donne plus de vie à une scène et peut aider à soutenir l'action principale. Une personne qui marche peut simultanément balancer ses bras ou les garder dans ses poches, parler ou siffler ou exprimer ses émotions par le biais de ses expressions faciales L'important à propos des actions secondaires est qu'elles mettent l'accent sur l'action principale au lieu de détourner l' attention de celle-ci. ce dernier cas, il vaut mieux laisser de côté ces actions. Par exemple, lors d'un mouvement dramatique, les expressions faciales passent souvent inaperçues Dans ces cas, mieux vaut les inclure au début et à la fin du mouvement plutôt que pendant le mouvement. Salut, professeur du futur ici. Vous vous souvenez quand j'ai dit plus tôt dans ce cours que la police que vous utilisiez n'avait pas d' importance ? Eh bien, j'ai menti. Dans cette leçon, nous allons animer les points sur nos yeux Si votre police ne comporte pas de points sur les yeux, vous ne pourrez pas terminer cette leçon. Mais ne t'inquiète pas. Ce n'est pas essentiel pour le projet de classe. Vous pouvez passer à la seconde partie de cette leçon où nous ajouterons une animation d'opacité, ou mieux encore, vous pouvez réfléchir différentes manières d'ajouter mouvement secondaire à votre propre Je pense qu'une façon d' ajouter un mouvement secondaire est d' animer les points sur nos yeux Je vais commencer en sélectionnant toutes mes couches, cliquant avec le bouton droit de la souris pour précomposer Et nous nommerons ce nouveau texte d'animation de composition. Nous allons maintenant accéder au menu de notre projet, sélectionner notre composition de texte d'animation. Nous allons le dupliquer en appuyant sur Ctrl D. Cela crée une nouvelle composition, et nous allons renommer celle-ci en points car nous allons en avoir un avec notre texte d'animation dedans, et l'autre composition contiendra nos points Nous allons passer à la composition de notre texte d'animation. Nous allons baisser notre I, et nous allons supprimer le I supérieur ici pour supprimer notre point Nous allons maintenant faire la même chose pour la seconde fois : je fais basculer le calque vers le bas, abaisse le contenu, abaisse ce I, supprime le Nous avons maintenant une composition contenant uniquement notre texte d'animation, sans les points. Maintenant, nous allons devoir entrer dans composition de nos points et faire le contraire. Supprime tout ce qui se trouve ici sauf les points. Sauf une chose à noter c'est que nous allons devoir conserver cette couche A supérieure, car c'est la couche sur laquelle se trouve notre animation. Parce que n'oubliez pas que tout est lié par une expression. On peut désactiver la visibilité dessus. Je vais continuer à supprimer toutes les lettres, à baisser le contenu du I, et sur celui-ci, nous allons supprimer le second e. Faites de même pour l'autre couche oculaire Supprimez le second. Nous avons donc maintenant une composition avec juste nos points dedans. Et n'oubliez pas que si nous conservons cette couche A, c'est parce que c' la couche contenant toutes nos animations. Nous allons maintenant revenir à notre composition principale. Nous allons maintenant inscrire notre composition en points dans notre panneau de projet. Nous pouvons donc maintenant commencer à animer notre animation par points. Je pense que ce que nous allons faire, c'est animer les points dans la composition principale Nous devons donc dupliquer notre couche de points et dessiner des masques pour séparer les deux points. Je vais prendre la couche de points, dupliquer avec Control D. Sur la première couche de points, je vais utiliser l'outil rectangle et dessiner un masque sur la première moitié de l'écran. Ce sera pour notre premier point. Au fait, assurez-vous que le masque est configuré pour être ajouté. Je vais renommer le point 1 de cette couche. Pour le deuxième point, nous allons faire la même chose mais dessiner le masque l'autre côté de l'écran. Ce sera notre point deux. Je vais renommer la couche. Nous allons donc commencer par animer le point 1. Je pense que pour le point 1, nous pourrions faire sauter le point vers le haut pendant que le I s'anime Et puis, au fur et à mesure que la lettre atterrit, point le rattrape presque comme un petit effet de rebond Donc, aux alentours de l'image 20, nous allons afficher la position avec P, appuyer sur le chronomètre pour placer une image-clé Je pense peut-être passer à l'image 32. Et c'est là que nous allons faire glisser notre position Y vers le haut. Je vais soustraire 200 de la position Y. Ensuite, nous passerons plus loin dans la chronologie. Essayons peut-être le frame 44. Nous allons copier cette première image-clé et la coller. Sélectionnez nos images-clés, appuyez sur F neuf pour ajouter quelques E faciles. Prévisualisons à quoi cela ressemble. Je me dis dès le départ que ça a l'air plutôt bien. Nous pourrions nous diriger vers l'éditeur de graphes. Je suis sur le graphique de vitesse, et je vais faire glisser ces poignées, l'une vers la gauche, l'autre vers la droite. R Je pense que ça a l'air plutôt bien. Plutôt bon pour un premier essai. Nous pouvons maintenant passer au point deux. Le point deux, je pense que nous pouvons peut-être faire apparaître depuis le haut de l'écran. Il va donc falloir trouver un point dans la chronologie. Je pense que c'est dans le cadre 54 que nous voulons que le point soit dans sa position normale. Nous allons donc afficher la position et appuyer sur le chronomètre. Nous devons maintenant revenir sur la chronologie jusqu'au point où nous voulons que notre point commence à apparaître. Et je vais simplement faire glisser la position Y jusqu'à ce que notre point soit hors de l'écran. Je vais juste l' arrondir à moins 100. Je vais également réduire la chronologie afin que nous ne voyions pas ce point avant ce moment-là. Le crochet Alt est la clé pour y parvenir. C'est un bon raccourci à connaître. Nous allons sélectionner ces images-clés, appuyer sur F neuf pour effacer Es. Et pour celui-ci, nous voulons un mouvement rapide et agréable car il aura l'air plus naturel comme si la balle tombait du ciel. Nous allons nous diriger vers le graphique de vitesse, et nous allons faire glisser ces deux poignées vers la droite. Voilà, ça a l'air beaucoup plus naturel. Allons-y. Nous avons nos animations par points. Et maintenant, en tant que deuxième mouvement, pourquoi ne pas en profiter pour illustrer l' opacité des lettres qui s'y animent Nous allons passer à la composition de notre texte d'animation. Faites ressortir les cadres E de la couche A en appuyant sur. Appuyez sur Shift et maintenez la touche T pour augmenter l'opacité. Je vais réduire l'opacité à 0 % et appuyer sur le chronomètre Maintenant, nous devons décider, à quel moment voulons-nous que l'opacité passe à 100 Je pense que le cadre 25 pourrait être bon. Nous allons donc ramener cette opacité à 100. Sélectionnez les images-clés et F neuf pour EZ Es. Je pense que c'est peut-être une bonne chose. En parcourant la chronologie, je peux constater que nous pouvons encore voir un peu notre anticipation, et c'est ce que nous voulons Donc, pour le reste des couches, puisque j'ai fait mon décalage en utilisant l'expression, je vais faire de même pour l' opacité de toutes les autres lettres G pour taper mon expression. Je vais taper O égal à O, utiliser le fouet pour saisir l'opacité de la couche A. Sautez une ligne, puis je saisirai mon expression ou valeur de point par point, entre parenthèses -0,1 Maintenant, le N a copié les propriétés d' opacité, mais juste 0,1 seconde plus tard Et cela devrait être facile. Nous allons simplement copier cette expression, coller sur l'opacité pour le reste des couches Et, bien sûr, nous changeons le numéro sur chaque couche. Celui-ci le remplacera par deux et ainsi de suite pour le reste des lettres. Et je vais passer rapidement en revue les autres. Et n'oubliez pas que si vous avez effectué votre compensation en utilisant l'autre méthode, vous devrez copier-coller la propriété d'opacité sur toutes les lettres Prévisualisons maintenant l'ensemble l'animation et voyons à quoi elle ressemble. Je pense que ça a l'air plutôt bien. Je vais copier les images-clés d' opacité, nous allons passer à notre composition en points Et je veux juste m' assurer que je colle l'animation sur les mêmes images. Nous allons donc passer au cadre cinq, coller. Et bien sûr, nous devons faire de même pour notre opacité sur les deux couches I. Je vais juste revenir à composition du texte d'animation, copier l'expression de cette couche, coller sur l'opacité ici Faites la même chose pour la seconde, copiez cette expression, passez à la composition des points, collez-la sur la seconde Maintenant, ces points ont la même animation que leur équivalent dans les compositions de texte d'animation. Passons maintenant à la composition principale et prévisualisons notre animation. Pour moi, ça a l'air plutôt bien. Bien sûr, vous pouvez animer le vôtre vous le souhaitez, mais je pense que je vais garder le mien de cette façon 9. Exagération: Maintenant que nous avons ajouté un mouvement secondaire à notre animation, passons à notre prochain principe d'animation, exagération. L'exagération est en effet particulièrement utile pour l'animation, car les mouvements animés qui visent à imiter parfaitement la réalité peuvent paraître statiques et ternes Le niveau d' exagération varie selon que l' on recherche le réalisme ou un style particulier, comme une caricature ou le style d'un artiste en particulier La définition classique de l'exagération , utilisée par Disney, était de rester fidèle à la réalité, présentant simplement comme une forme plus sauvage et plus extrême D'autres formes d' exagération peuvent impliquer des modifications surnaturelles ou surréalistes des caractéristiques physiques d' un personnage ou d'éléments du scénario lui-même Il est important de faire preuve d'une certaine retenue lorsque l'on exagère. Si une scène contient plusieurs éléments, il faut trouver un équilibre entre la façon dont ces éléments sont exagérés les uns par rapport aux autres afin d'éviter confusion ou d' impressionner En ce qui concerne notre propre animation, nous avons déjà intégré une certaine exagération en animant notre premier point Cette animation en elle-même est déjà exagérée. Je pense que nous pourrions aller un peu plus loin en exagérant notre animation à l'échelle Je vais donc passer à notre composition d'animation de texte. Et sur notre image-clé à la deuxième échelle, je vais peut-être l'augmenter à un 30 % Nous devrons également changer notre troisième image-clé à 30 %, car n'oubliez pas que ces deux images-clés sont identiques Ensuite, au fur et à mesure que notre texte tombe sur le sol, nous ajouterons un peu plus de courge, peut-être réduirons notre courge à 70 %. Prévisualisons ceci. Et n'oubliez pas que si vous avez fait votre offset à l' aide des expressions, c'est extrêmement facile pour vous, car toutes les animations que nous modifierons sur cette couche devraient suivre les autres lettres. Si vous l'avez fait dans l'autre sens, le plus simple, vous devrez copier et coller l'animation à l'échelle de notre couche A sur toutes les autres lettres. Gardez donc cela à l'esprit lorsque vous créez vos propres animations. Je vais également accéder à ma couche de points et modifier l'échelle des points. Passez à l'animation à la deuxième échelle. Image-clé de la deuxième échelle, mettez-la à 130. Passez à la troisième image-clé, changez-la également en 130 Ensuite, nous allons passer à notre image-clé de squash, changer à 70 %. Et nous y voilà. Revenons maintenant à notre composition principale. Prévisualisez à quoi cela ressemble. Nous y voilà. Nous avons ajouté un peu d' exagération à notre animation à échelle, et n'oubliez pas que notre première animation par points est également une animation exagérée. 10. Le rythme: Le timing fait référence au nombre de dessins ou d'images pour une action donnée, ce qui se traduit par la rapidité de l'action sur film. Sur le plan purement physique, un timing correct donne l' impression que les objets obéissent aux lois de la physique. Par exemple, le poids d'un objet détermine la façon dont il réagit à une impulsion telle qu'une poussée. Un objet léger réagira plus rapidement qu'un objet lourd. Le timing est essentiel pour établir l'humeur, l' émotion et la réaction d' un personnage. Il peut également s'agir d'un appareil permettant de communiquer certains aspects de la personne d'un personnage. C'est donc à cette partie du processus d'animation que nous réfléchissons à la question de savoir le timing de nos animations est logique par rapport à ce que nous animons ? Si nous animions quelque chose de complexe, comme l'animation d'un personnage, ce processus serait beaucoup plus long et complexe Mais pour quelque chose comme une animation de texte, comme dans notre cas, c'est que nous pouvons parcourir notre chronologie, peut-être espacer un peu nos images-clés, décaler nos couches ou nous diriger vers l'éditeur de graphes Modifiez l'allégement de notre animation. Ce sont toutes des choses que nous pouvons prendre en compte lorsque nous ajustons notre calendrier. Pour mon animation, je trouve que le timing est plutôt bon. La seule chose que je veux ajuster maintenant est peut-être ajuster l'assouplissement de l'échelle dans l'éditeur de graphiques. Je vais donc aller de l'avant, le faire et je vais avancer rapidement jusqu'au bout. Allons-y. Je n'ai quelques modifications mineures à l'éditeur de graphes et animation à l'échelle, juste pour qu'elle corresponde mieux à notre animation de position Si vous avez effectué votre compensation en utilisant la méthode des expressions, toute cette animation devrait être répercutée sur les autres lettres Sinon, vous devrez copier les images-clés de l'échelle et les coller sur vos autres lettres Et bien sûr, tout dépend de vous. Vous pouvez modifier vos animations comme bon vous semble. 11. Mise en scène: Ce principe s' apparente à la mise en scène, comme on l'appelle au théâtre et au cinéma. Son but est d'attirer l'attention du public et de préciser ce qui est le plus important dans la scène. Johnson et Thomas l'ont défini comme la présentation d' une idée afin qu' il soit complètement et sans équivoque clair si cette idée est une action, une personnalité, une expression ou une humeur Cela peut être fait de différentes manières, telles que le placement d' un personnage dans le cadre, l' utilisation de la lumière et de l'ombre, ou l'angle et la position de la caméra. L'essence de ce principe est de se concentrer sur ce qui est pertinent et d'éviter les détails inutiles. Puisque la seule chose dans notre scène est notre animation de texte, ce principe d'animation ne s'applique pas vraiment à nous, mais pourquoi ne pas en profiter pour styliser un peu notre animation La première chose que je vais faire est de faire glisser cette palette de couleurs que j'ai créée sur le site Web de Coolers Je vais le réduire et le placer dans le coin de mon écran. Je vais créer un nouvel arrière-plan en superposant un nouveau solide. Je l'appellerai BG pour le contexte. Utilisez le sélecteur de couleurs et choisissez l'une de mes couleurs. Faites glisser ce nouveau calque vers le bas de la pile de calques. Je vais maintenant ajouter un effet de remplissage à mon animation de texte. Encore une fois, je vais prendre le sélecteur de couleur et peut-être choisir cette couleur bleu foncé Copiez le remplissage, ajoutez-le à mes deux couches de points en le collant sur mes couches de points Le bleu et l'orange sont des couleurs contrastées, ce qui signifie, en d'autres termes, que cette animation textuelle se démarquera de l'arrière-plan. Au fait, j'ai un cours entier consacré au choix des couleurs au cas où cela vous intéresserait. Pourquoi ne pas apporter une touche finale à la vignette ? vignettes sont idéales pour attirer l'attention du spectateur sur le centre de l'écran Je vais créer une nouvelle couche de forme à l'aide de l'outil rectangle. Je vais le renommer vignette avec la vignette sélectionnée. Je vais passer à mon outil Ellipse. Je vais m'assurer que l'outil de création de masque est sélectionné. Nous pouvons maintenant double-cliquer sur l'outil Ellipse pour créer un masque sur notre couche de vignette Nous devrons changer de mode pour soustraire. Soulevez la plume avec la touche F, et nous pouvons la faire glisser vers le haut jusqu'à obtenir une jolie vignette Pour que la vignette prenne une teinte plus foncée par rapport à la couleur d'arrière-plan, nous pouvons changer le mode de la couche à superposer Nous y voilà. La vignette semble un peu trop saturée à mon goût. Donc, la première chose que je vais faire est de soulever à nouveau la plume. Relevez un peu plus la plume. Et une autre chose que je pourrais faire est d'augmenter l'opacité avec la touche T, la modifier à 50 % Voilà, je trouve que ça a l'air génial. 12. La trajectoire arquée: La plupart des actions naturelles ont tendance à suivre une trajectoire arquée et l'animation doit respecter ce principe en suivant des arcs implicites pour Cette technique peut être appliquée à un membre en mouvement en faisant pivoter une articulation ou à un objet lancé en se déplaçant le long d'une trajectoire parabolique L'exception est le mouvement mécanique, qui se déplace généralement en ligne droite. À mesure que la vitesse ou l'élan d'un objet augmente, arcs ont tendance à s'aplatir dans le mouvement vers l'avant et à s' élargir dans les virages baseball, une balle rapide aurait tendance à se déplacer en ligne droite par rapport aux autres terrains, tandis qu' un patineur artistique se déplaçant à vitesse ne serait pas en mesure de tourner aussi brusquement qu' un patineur plus lent et devrait parcourir plus de terrain pour Un objet en mouvement qui sort de son arc naturel sans raison apparente apparaîtra erratique plutôt que fluide Par exemple, lorsqu'il anime un pointeur, l'animateur doit s'assurer que tous les dessins situés entre les deux poses extrêmes suivent un arc logique du bout du doigt d'un extrême à Les animateurs traditionnels ont tendance à dessiner légèrement l'arc sur le papier pour pouvoir s'y référer et l'effacer ultérieurement Donc, en termes simples, il semble beaucoup plus naturel d' animer quelque chose en arc ou en ovale plutôt qu'en ligne droite Maintenant, cela peut être vrai pour n'importe quel type d'animation, mais particulièrement pour l'animation de personnages. Voici un exemple de vélo de marche que j'ai fabriqué il y a quelque temps, et j'ai évoqué la trajectoire du mouvement. Et comme vous pouvez le constater, lorsque le pied quitte le sol, plutôt que de s'animer en ligne droite ou en triangle, je le fais plutôt prendre une forme ovale, et c' est essentiellement ce que dit le principe de l'arc Il semble bien plus naturel d'animer quelque chose en arc que de l' animer Alors, comment pouvons-nous implémenter cela dans notre propre animation de texte ? Eh bien, pour cette animation de texte de base, nous ne pouvons pas faire grand-chose, sauf une chose que je pense que nous pouvons faire est peut-être d'animer notre deuxième animation de points pour apparaisse hors écran depuis le côté, elle apparaisse hors écran depuis le côté, un peu comme si une balle rebondissait Je vais donc indiquer la position de mon point deux, et nous allons devoir modifier cette animation pour qu'elle s' anime depuis le côté Nous garderons notre deuxième image-clé inchangée. Nous allons passer à notre première image-clé, et je vais déplacer la position qu'elle s'anime depuis la droite de l'écran Maintenant qu'il s'anime depuis le côté de l'écran, va falloir le peaufiner pour qu'il prenne une forme plus ovale Tout d'abord, je vais désactiver les images-clés pour le moment, juste pour faciliter les choses Vous pouvez désactiver les images-clés en les sélectionnant, en appuyant sur Ctrl et en cliquant sur les Je pense donc qu'à mi-chemin ou peut-être un peu plus de la moitié, nous devrons ajouter une autre image-clé. Nous allons augmenter légèrement notre position Y. Nous devons maintenant lisser la courbe de la trajectoire du mouvement abord, je vais passer à notre première image-clé, et je vais déplacer la position Y un peu plus bas, peut-être l'arrondir à moins 60 Je vais zoomer un peu sur le deuxième point de notre trajectoire de mouvement, et je vais me procurer l'outil Pen. Plus précisément, je vais me procurer l'outil de modification du vortex, et je vais cliquer sur ce point central, pour lisser un peu Et nous y voilà. Nous y arrivons. Cela semble un peu plus naturel maintenant. Maintenant, sur cette image-clé du milieu, je vais cliquer avec le bouton droit de la souris et parcourir le temps Si vous ne savez pas ce que cela signifie, cela signifie que lorsque nous simplifierons nos images-clés dans l'éditeur de graphiques, je les sélectionnerai, j'appuierai sur F neuf Notre image-clé Rove Across time est plus qu'une partie de la trajectoire du mouvement, et nous n'avons pas vraiment à nous soucier de l'assouplir Nous n'avons qu'à atténuer notre première et notre dernière image-clé. La deuxième image-clé agit donc plutôt comme une trajectoire de mouvement Je vais faire glisser la première poignée vers la droite. Voilà, je pense que ça a l'air bien. Je vais juste modifier un peu plus la trajectoire du mouvement pour qu'elle ressemble davantage à une courbe, car nous voulons qu'elle donne davantage impression qu'elle rebondit hors de l'écran Je vais donc passer à ma première image-clé, et je vais faire glisser davantage la position Y vers le bas Et je vais faire glisser les poignées de l'image-clé du milieu pour lui donner une forme plus ovale Nous allons déplacer notre première image-clé un peu plus bas. Alors je vais reprendre ce pseudo. Et maintenant, nous avons quelque chose qui ressemble beaucoup plus à un arc. G pour faire glisser l'autre poignée. Nous y voilà. Je trouve que ça a l'air plutôt bien. Oui, je pense que ça a l'air bien. 13. Les autres principes d'animation: Les deux derniers principes d'animation s'appliquent spécifiquement à l'illustration et à l'animation des personnages, mais nous les examinerons tout de même rapidement. Le principe du dessin solide consiste à prendre en compte les formes dans un espace tridimensionnel ou à leur donner du volume et du poids. L'animateur doit être un artiste qualifié et doit comprendre les bases de l'anatomie des formes tridimensionnelles, du poids, de l'équilibre, de la lumière et des ombres, etc. Pour l'animateur classique, cela se ferait par le biais de la formation classique, y compris des cours d'art approfondis et de dessin vivant Johnson et Thomas ont notamment mis en garde contre la création de jumeaux, des personnages dont les côtés gauche et droit se reflétaient et semblaient Dans le domaine de l'animation par ordinateur, les animateurs informatiques d' aujourd'hui dessinent moins en raison des facilités que leur offrent les ordinateurs , mais leur travail bénéficie grandement d'une compréhension de base principes de l'animation et leurs ajouts aux bases de l'animation par ordinateur Ce principe souligne l'importance d'une bonne illustration dans l'animation. Et même si cela ne sera pas toujours pertinent pour nous, les motion designers, nous serons parfois les illustrateurs de nos propres animations graphiques Il est donc toujours important d' avoir une compréhension de base de ce principe et de la manière dont nous pouvons mettre en œuvre dans nos propres créations. L'attrait d'un personnage de dessin animé correspond à ce que nous appellerions le charisme d'un acteur. Un personnage séduisant n' est pas forcément sympathique. Les méchants ou les monstres peuvent également être attrayants. L'important est que le spectateur ait le sentiment que le personnage est réel et intéressant. Il existe plusieurs astuces pour qu' un personnage se connecte mieux avec le public. Pour les personnages sympathiques, un visage symétrique ou particulièrement semblable à celui d'un bébé a tendance à être attrayant visage compliqué ou difficile à lire manquera d'attrait ou captivant dans la composition de la pose ou dans la conception du personnage Ce principe serait donc bien plus pertinent si nous faisions de l'animation de personnages. Le but de ce principe est de rendre votre personnage aussi sympathique que possible pour le public. Mais puisque nous réalisons une animation de texte, nous n'allons pas trop approfondir ce principe. 14. Peaufiner nos animations (L'étape finale): C'est donc la partie du processus où je vais passer en revue mon animation et l'affiner. La première chose qui ne me plaît pas vraiment c'est l'animation à l'échelle. Je pense que je pourrais ajouter plus de suivi Je vais donc passer à mon texte d'animation, et je vais modifier l'animation à l'échelle en ajoutant plus de suivi à la fin de l'animation à l' échelle Je vais commencer par faire glisser ma dernière image-clé sur quelques images de la chronologie Je vais changer le pourcentage de 100 à peut-être 115. Je vais passer sur trois cadres de la chronologie. Modifiez le pourcentage à 95. Je vais peut-être faire glisser cette image-clé sur une autre image. Je vais maintenant passer en revue trois autres cadres, et c'est ici que nous pouvons ramener notre pourcentage à 100. Mais nous avons un peu plus d' animation de suivi à notre échelle. Je pense que ça a l'air bien mieux. Je pourrais même augmenter l'échelle de certaines de nos images-clés Je vais passer à cette image-clé, la modifier 130-145. Nous devrons modifier cette image-clé car nous voulons qu'elles soient identiques Je vais donc le changer en 145. Passez à cette image-clé, modifiez-la peut-être à 60 %, dirigez-vous vers cette image-clé Au lieu de 115, nous passerons peut-être à 120. L'avant-dernière image-clé le fera passer à 90 %. Et voyons un aperçu de ce à quoi cela ressemble. Oui, j'aime beaucoup plus ça. Je pense également que l' animation est un peu lente lorsqu'elle est redimensionnée vers le haut. Je vais donc trouver un point sur la chronologie, peut-être par ici, sélectionner toutes ces images-clés et les faire glisser dessus. C'est le cadre 26 de la chronologie. C'est un aperçu. Je pense que ça a l'air bien. Et, bien sûr, nous ne pouvons pas oublier que nous devons modifier notre éditeur de graphes. N'oubliez pas que j'utilise le graphique de vitesse. Assurez-vous que nous avons pris la bonne poignée. Éloignez simplement cette poignée. Nous avons trouvé la bonne poignée, faites-la glisser légèrement. Faites glisser celui-ci un peu dessus. Il suffit de lisser les courbes. Nous allons faire la même chose pour les deux dernières images-clés. Et bien entendu, vous pouvez utiliser le graphique des valeurs si vous le souhaitez, si vous le connaissez bien . Voici à quoi ressemblerait le graphique des valeurs si vous choisissiez d'utiliser le graphique des valeurs. Et n'oubliez pas, encore une fois, que vous pouvez les modifier. Vous pouvez modifier votre animation comme vous le souhaitez. N'oubliez pas que le mien n' est qu'un exemple. Nous allons devoir copier les images-clés de l'échelle, et nous allons devoir les placer dans notre couche de points Je vais juste supprimer l'animation en appuyant sur le chronomètre, puis en appuyant sur le chronomètre , puis en collant les images-clés N'oubliez pas que nous le faisons sur la couche A, car c'est ce à quoi font référence nos couches de points Nos points ont maintenant la même animation. Revenons à notre composition principale et prévisualisons l'animation maintenant J' en ai également profité pour rééditer l'animation du point deux, que j'ai rapidement transmise, mais je vais vous donner un aperçu de ce que j'ai changé J'ai simplement changé le chemin en modifiant les coordonnées de la position. Ici, je vais vous montrer les nouvelles coordonnées. Je ralentis également l'animation en faisant glisser les images-clés de la chronologie Voici une petite astuce que vous pouvez utiliser. Vous pouvez sélectionner des images-clés, maintenir la touche Alt enfoncée et, comme vous pouvez le voir, les images clés sont déplacées proportionnellement, en conservant la en conservant J'ai fait glisser la première image clé vers l'image 17, et j'ai gardé la dernière image-clé au même endroit L'animation se terminera donc toujours sur la même image-clé que précédemment 15. Outro: Félicitations pour avoir terminé ce cours sur les principes de l'animation. N'hésitez pas à publier vos projets dans la galerie de projets. J'ai hâte de voir les animations que vous avez créées.