de Lottiefiles.

1. Intro: Bonjour et bienvenue au cours. Dans ce cours, vous allez apprendre de nombreuses nouvelles techniques, et il est fortement recommandé regarder les cours précédents avant de continuer car nous aborderons de nombreuses nouvelles techniques avancées qui feront de vous les meilleurs créateurs de Lottie OK ? Et comme vous le savez, je suis Bolt Bite, et j'ai été certifié créateur de LatifleTournament par le tournoi LatifilsOfficial Discord, et Et j'ai plusieurs badges qui m'ont été décernés par LottieFiles elle-même et je vais crée des animations Lottie depuis cinq ans, et je vais partager dans le cadre de ces cours le moment où il y a eu un problème dans un fichier, ce qui ne s'est pas produit dans 100 projets, mais cela s'est produit une qui ne s'est pas produit dans 100 projets, mais cela s'est produit . Je crée des animations Lottie depuis cinq ans, et je vais partager dans le cadre de ces cours le moment où il y a eu un problème dans un fichier, ce qui ne s'est pas produit dans 100 projets, mais cela s'est produit une fois. Ce cours contient donc des tonnes de nouvelles techniques, façon dont j'ai créé plusieurs animations de personnages complexes pour plusieurs projets. Nous allons apprendre comment et qu'est-ce qu'un écran de démarrage animé et comment en créer un pour plusieurs applications mobiles ? Et nous allons également examiner certains des projets très complexes que j'ai créés pour les clients afin que vous soyez prêt à aller de l'avant et à devenir le meilleur créateur individuel d' ILTiflePlatform Alors allons-y et allons-y. 2. 01.What is Splash Screen?: Dans ce cours, nous allons apprendre ce qu'est un écran de démarrage. Alors allons-y et découvrons ce qu' est l'écran de démarrage. Alors, qu'est-ce que Splash Screen Android ? Je viens d'ajouter Android car je voulais vous montrer certaines choses. Tout d'abord, allons-y et cliquons sur le premier lien officiel pour les développeurs Android par Android Development. Vous verrez donc ici qu' il y a quelques notes. Je ne vais pas entrer dans les détails techniques car le cours sera alors trop long. Donc, en gros, vous pouvez lire toutes les données ici, et je vais essentiellement partager mon expérience, car au moment de cet enregistrement, j'ai créé plus de 100 écrans de démarrage animés pour les applications mobiles, exactement 137. Alors allons-y et voyons ce qu'est un écran de démarrage. Vous verrez qu'il y a une légère animation ici. Maintenant, c'est un écran de démarrage. Quelque chose qui apparaît lorsque vous ouvrez une application sur un téléphone, qu'il s' agisse d'IOS ou d'Android, puis il y a une brève animation, qui est essentiellement une sorte d'animation de logo, et vous pouvez utiliser la même animation comme animation logo. Valvo en parlera maintenant en détail, et vous pouvez créer ces animations avec le logo ou le logo de typographie du client qu'il vous fournit et vous pouvez fournir très bons services dans cette catégorie, car il y a beaucoup de potentiel ici, et tout le monde essaie maintenant de créer, vous savez, applications Motion First, et il est devenu très courant que les gens les utilisent. Apprenons donc simplement que ce qui est nécessaire pour créer Lottie animait un écran de démarrage Donc, tout d'abord, l'animation doit durer 2,5 secondes, ou elle peut aller jusqu'à 3 secondes. Maintenant, ce sont les nœuds, en fait, et il est fortement recommandé que l'animation dure environ 2,5 secondes. Mais il est arrivé que le développeur m'ait demandé une animation de plus de 5 secondes. Il y a donc également quelques exceptions. Cela n'est peut-être pas écrit ici, mais le développeur peut également le faire. Donc, si un client vous le demande, vous pouvez également créer des animations plus longues, car intégration de l'animation dans l' application est un casse-tête pour le développeur Votre travail consiste à créer quelque chose qui fonctionne réellement. C'est ça. Nous avons abordé de nombreuses techniques dans les cours précédents, et vous savez tout maintenant, et ce cours est l'un des meilleurs pour les créateurs. C'est pourquoi nous n' entrerons pas dans les détails quant aux fonctionnalités charge, et non parce que celles-ci sont déjà expliquées dans les cours précédents. Alors, allons-y, voyons et laissez-moi vous montrer comment j'ai créé un écran de démarrage animé. Donc, tout d'abord, je peux juste avoir un aperçu de certains de mes travaux. Voici donc une animation que j'ai créée pour notre client. Il ne s'agit que d'un cas d'étude. Il est fortement recommandé de suivre également ces processus lorsque vous travaillez sur un projet client. Et vous pouvez voir que l' animation est ici. Maintenant, c'est ce que j'ai créé pour l'animation finale de l'écran de démarrage animé. Voici un autre projet où j'ai créé cet écran de démarrage animé. Nous avons abordé l'animation des icônes en détail dans les cours précédents, nous n'allons donc pas entrer dans les détails car c'est un sujet très simple. Et puis il y a les maquettes d'animations, évidemment, juste pour montrer aux nouveaux clients quoi ressemblerait leur animation le plus probable. OK. Et puis il y a aussi cette partie de l'État où j'ai créé l'animation embarquée. Nous avons également abordé l'animation des personnages dans la classe intermédiaire, vous pouvez donc y jeter un œil et oui, en gros, c'est tout. Il y a l'écran Displash animé. Et vous pouvez voir que j'ai créé deux variantes, l'une pour leur site Web et l'autre pour leur application mobile. Cela peut donc également se produire, selon votre cas. Vous devez créer deux mots et parfois. Voyons donc comment je crée ces animations. Je vais juste aller de l'avant et ouvrir mon dossier. OK, nous avons donc ouvert le dossier. Maintenant, laissez-moi vous montrer quelque chose de vraiment important ici, à savoir que, dans la plupart des cas, vous allez créer l'animation dans un canevas carré. Ce n'est pas le cas dans ce dossier, mais laissez-moi vous montrer un autre fichier pour vous donner un autre exemple. Maintenant, c'est une très belle étude de cas. Passons donc d'abord en revue celui-ci. OK, donc c'est notre animation carrée, d'accord ? Et en gros, ce qui va réellement se passer c' est qu'il est très important de garder à l'esprit que le client peut également utiliser cette animation comme animation de logo. Vous pouvez donc simplement leur fournir un format MP 4 à partir de ces fichiers et vous pouvez les cartographier plus de créer un écran de démarrage et une animation de logo, et vous pouvez modifier l' animation si nécessaire Et c'est en gros ça. Par exemple, vous pouvez créer un logo. Par exemple, si le logo était, par exemple, cette boîte, vous pouvez créer l'écran de démarrage animé à partir de celle-ci et vous pouvez faire l' animation du logo de ce logo, à droite, de ce logo de typographie Passons donc en revue et nous pourrons voir comment et quel est le processus de réflexion que je suit lors de la création de ces animations. Maintenant, il s'agit uniquement de cours et de cours d'animation d'interface utilisateur, nous n'allons donc pas entrer dans les détails des principes de l'animation. Si vous voulez vraiment que je le fasse ou que je crée une classe séparée à ce sujet, faites-le moi savoir. Mais il s'agit d'une discussion séparée. Ou séparez-les. Voici donc cette boîte et c'est une couche SVG Et puis après cela, à ce stade, la couche se brise essentiellement. Donc, cette couche se réduit juste à ce stade, non ? Ensuite, nous avons ces quatre pièces éparpillées. Maintenant, ce ne sont que des masques ajoutés en quatre parties. , l'opacité s' estompe, n' Comme vous pouvez le constater, l'opacité s' estompe, n'est-ce pas ? Et puis, en gros, il y a aussi le cadre clé de position. part cela, pour donner plus d' impact à l'animation, j'ai ajouté quelques pièces de formes rectangulaires ou triangulaires qui donnent l' impression de confettis Et à part cela, il y a juste cette animation de démarrage, qui ne consiste qu'en des lignes animées avec une trajectoire de découpage Des trucs assez simples, rien de trop compliqué. Maintenant, nous nous concentrons sur le personnage ou sorry, l'écriture, sur l'animation, sur ce que nous avons ici. Jetons un coup d' œil à cela également maintenant. Nous avons donc cette animation d' effet d'écriture ici. Et vous verrez qu'il y a des arcs en cours, des animations d' arcs, qui ne sont que le mouvement secondaire, qui est ajouté plus tard en fait. Donc, tout d'abord, vous devez simplement créer l'effet d'animation d'écriture. Et puis après cela, il vous suffit de dessiner quelques éléments de base, allez-y. Vous n'êtes pas obligé de concevoir ces éléments dans Illustrator. Vous pouvez simplement choisir votre stylo, dessiner un tracé simple, puis ajouter des tracés de découpe par-dessus. Et c'est à peu près tout. Ensuite, vous pouvez également ajouter des chemins de découpe par-dessus ceux-ci. Et si vous remarquez que cet effet d'écriture verte se produit également derrière notre animation. Alors c'est quoi ça ? Tout d'abord, permettez-moi de verrouiller ces couches afin que nous puissions nous concentrer sur ce point. Nous avons donc notre couche ici, et voici notre animation en violet, comme vous pouvez le voir. Donc, en gros, ce que j'ai fait, c'est d' abord créer l'animation complète , puis en créer une copie dupliquée, d'accord ? Et le duplicata est en fait ce que vous verrez ici. Que l'intégralité de la copie est en fait en dessous avec une touche verte, en fait. Permettez-moi de cliquer sur une autre couche pour que je puisse vous la montrer. Laisse-moi juste le faire en solo. Tu vois ? Donc, en gros, j'ai créé l'animation complète, d'abord, dupliquée et j'ai simplement ramené l'animation complète. Un seul cadre, c'est tout. Ensuite, je change simplement sa couleur en vert, et maintenant cela donne un effet d'écriture créatif et ajoute beaucoup plus de personnalité grâce à l' animation en couleur verte qui le sous-tend. Et c'est en gros ça. L'animation complète est terminée, et maintenant passons à autre chose, vous verrez que l'animation dure 4 secondes ici et que la composition est carrée. Maintenant, quel est l'avantage de créer l'animation dans un carré ? Tout d'abord, si l'animation est créée dans un carré, ce que vous pouvez faire, c'est que la plupart du temps les développeurs me demandent , les développeurs me demandent s'ils ont besoin d'une danimation dans un carré, et l'animation doit avoir un espace négatif Donc, l'animation devrait être, disons carré de 500 x 500 pixels, il devrait y avoir un carré de pixels, et l'animation devrait être à l'intérieur, sorte qu'il y ait suffisamment d'espace négatif. Et parfois, le client demande qu'il ait besoin de l'option verticale, est le format vertical standard pour les bobines, et il demande une dynamisation de cette pour les bobines, et il demande une dynamisation Donc, ce que vous pouvez faire en gros, c'est le déposer ici. Allons-y et jouons-y. Vous pouvez voir que l'animation s'intègre très bien. Maintenant, si vous devez le réorganiser, ce que vous pouvez faire, c'est le déposer comme ça, n'est-ce pas Vous pouvez donc le réorganiser vraiment très bien. Si vous rencontrez également d'autres problèmes, vous pouvez simplement précompter le tout, ou il est déjà précompté comme ici. Vous pouvez simplement créer une autre composition de taille carrée et vous pouvez simplement la déplacer. Alignez-le comme vous le souhaitez, en fonction de votre taille, et vous pouvez également le réduire et vous pouvez également le réduire, car il s'agit d'un vecteur, cela n'affectera donc aucune différence de qualité. Et s'ils veulent également l'utiliser comme MP pour l'animation, alors ce que vous pouvez faire, c'est simplement dire qu' ils vont également l' ajouter sur YouTube. Vous pouvez simplement créer une version FHD , puis faire glisser le carré ici Alors c'est tout. Vous pouvez simplement le rendre. Vous pouvez également l'étendre. Si tu le souhaites. Vous pouvez activer l'étoile pour que l'animation reste nette. Vous pouvez également fournir le format quatre K, le doubler et vous pouvez également l' envoyer. Maintenant, allons-y et jetons un coup d'œil à un autre écran d'accueil animé, dont j'ai créé un concept très similaire, mais juste pour vous montrer comment vous pouvez ajouter autant de personnalité, car même si vous n'avez pas plusieurs effets, vous pouvez toujours ajouter beaucoup de personnalité votre animation, comme je vous l'ai montré dans le projet précédent et maintenant dans celui-ci un. En gros, il y a cette animation, et vous verrez qu'il y a beaucoup de squash, d'étirement et anticipation à l'égard de notre personnage principal. Il y a également un suivi pour le reste de l'animation, car celle-ci crée tellement d'impact et cela a une incidence sur les autres qui en ressortent. Et puis il y a le squash et l'étirement, qui sont un autre principe d'animation, et puis il y a juste le mouvement secondaire. La motion secondaire est donc ajoutée à la fin, comme vous pouvez le voir ici et comme je vous l'ai montré, qu'il s'agit en fait d'une révision ou version dite essentiellement révisée du concept ou d'ajout de quelques détails supplémentaires. Vous pouvez donc voir qu'ils peuvent également être ajoutés ultérieurement. Il suffit de tracer quelques lignes, et c'est tout. Et cela dépend également du type de sentiment de la marque et du public cible du type de sentiment que vous essayez d' obtenir dans l'animation. Vous devez donc également garder ces choses à l'esprit. OK, donc des trucs assez simples. Il n'y a rien de trop compliqué que je doive expliquer ici. Passons donc au suivant, qui est OK, donc celui-ci est essentiellement le même que l'écran de démarrage animé. Un concept très simple. Vous pouvez voir que nous changeons simplement la couleur de la couche ici, puis il y a juste une animation à l'échelle en cours avec juste un décalage par rapport aux couches. C'est en gros ça. Des trucs très simples. C'est très important pour montrer à KSU que la plupart du temps, le client peut également demander la version sombre et claire de l'application, selon le thème de l'appareil mobile de l'utilisateur, ou peut-être qu'il le peut. Vous pouvez accéder aux paramètres de l'application et également modifier le mode sombre ou clair de l'application C'est donc la version sombre, non ? Et puis nous avons la même animation. Vous pouvez simplement voir que l'animation est la même, nous avons juste des couleurs différentes. Maintenant, il est très important de dupliquer ou de copier-coller le fichier. Une fois ce concept approuvé, l'animation est approuvée, tout, il suffit de dupliquer le fichier puis de changer les couleurs. Maintenant, la raison pour laquelle je recommande de le faire est vraiment un concept de base, car nous avons créé l'animation complète ici. Disons simplement que le client l'a également demandé en quatre K sur deux k en vertical, en format carré également, et aussi en format horizontal, complet également, w. Donc, ce que vous pouvez faire en gros est quelque chose de très simple, c'est-à-dire quatre K sur deux k en vertical, en format carré également , et aussi en format horizontal, complet également, w. Donc, ce que vous pouvez faire en w. Donc, ce que vous gros est quelque chose de très simple, simplement créer l'animation. Et si le client demande des modifications, il vous suffit de les apporter ici. Comme il s'agit d'une précomposition ajoutée à ces coms, ces modifications y seront automatiquement ajoutées Cela vous fera donc gagner beaucoup de temps. Et une fois que tout cela est fait, vous avez créé une version pour plusieurs coms. Si vous dupliquez ce fichier, ces coms auraient déjà été créés dans l' autre version Vous n'aurez donc qu'à réessayer une composition, puis à changer les couleurs, et la version allégée complète sera également prête Ce ne sont donc que quelques conseils qui vous feront gagner beaucoup de temps. Il y a un point essentiel très important à retenir, savoir qu'un client peut également demander format AVD à certains moments, mais cela ne m'est arrivé que deux fois lorsque j'ai créé 100 écrans de démarrage animés Le client fonctionne réellement avec le fichier JSON, mais le développeur n' a demandé cette version que deux fois . Donc, juste au cas où un développeur vous demanderait, ne paniquez pas , cette option et envoyez-lui cette version. OK, des trucs assez simples, rien de trop compliqué. Donc, en gros, c'est ça. Et j'espère que vous apprendrez quelque chose de nouveau dans ce cours. On se voit dans le prochain. 3. 02.Mascot Animations: Et d'accord, dans ce cours, nous allons discuter de la façon de créer des animations de mascottes pour les projets de vos clients Maintenant, si vous savez que Duolingo est un exemple très connu, et si vous êtes un motion designer d'interface utilisateur, vous devez déjà connaître Duolingo Passons donc quelques exemples de la façon dont je les ai créés. OK, alors allons-y et examinons un projet que j' ai réalisé pour Maro parents, qui est une application IOS, et qui est en ligne en ce moment Laissez-moi donc d'abord vous montrer les animations, puis nous examinerons l'étude de cas. Il s'agit donc de plusieurs expressions du même caractère. Maintenant, c'était vraiment difficile car le personnage n'a pas de bouche, n'a pas de nez, n'a pas de sourcils, donc il y a beaucoup de minimalisme dans le personnage C'est donc essentiellement pour les enfants ayant des problèmes de santé mentale. Il s'agit donc de plusieurs poses de l'animation. OK. OK, alors entrons dans le fichier et jetons un œil à l'animation. Alors allons-y et ouvrons notre premier. Je vais simplement réduire celui-ci pour que nous puissions nous concentrer sur notre animation. OK. Voyons donc comment ils sont créés. Ce ne sont donc que des couches de forme. La conception des personnages a été réalisée dans Illustrator, et vous pouvez le constater, cela dépend uniquement de vos compétences tant qu'animateur, car rien en tant qu'animateur, car rien de trop compliqué et vous devez travailler avec ce qui vous est donné pour travailler Et c'est en gros ça. Il n'y a pas trop de détails ni trop de travail dans l'animation. Ce ne sont que de simples couches qui sont simplement animées, et c'est tout. OK ? Et permettez-moi de verrouiller l'arrière-plan. Et vous verrez que l'élève est là. Laisse-moi juste ralentir. OK. Et vous pouvez voir qu' il y a juste cette pupille, qui est essentiellement parentée à l'œil droit, qui s'anime en fait Ensuite, nous avons ce très simple clignotement des yeux, qui a été fait sur les pupilles OK. Animation très simple réalisée ici. Nous avons déjà parlé des clignements des yeux dans les cours précédents, vous pouvez donc y jeter un œil si vous êtes confronté à des Passons à autre chose, cela devient un peu flou. Les yeux bougent, seules les pupilles sont animées. Et puis il y a celui-ci qui n'est pas ciblé. Et l'équipe de conception n' avait pas encore décidé si elle ajoutait le corps entier ou si elle le recadrait jusqu'à la tête, c'est pourquoi il n'y a pas beaucoup d'animation sur les jambes ou sur les mains. Et comme les enfants étaient également confrontés à des problèmes de santé mentale et qu'ils étaient assez jeunes, nous ne voulions tout simplement pas que cela crée trop de distractions. Avec ces animations. C'est juste pour leur montrer ce qu'ils ressentent aujourd'hui. Bien, jetons un coup d'œil à l'animation des sauts. Alors allons-y un peu plus en profondeur. Alors c'est notre corps, d'accord ? Et c'est en train de s'animer. C'est assez simple. OK. Il existe donc une mise à l'échelle des transformations, n'est-ce pas ? Maintenant, si j'ai animé cette transformation dans un groupe, c'est parce que d'autres couches sont en fait apparentées à celle-ci C'est pourquoi si j'anime une échelle, tout le reste sera également animé Mais je ne veux pas que d'autres échelles s'animent. Je voulais juste montrer que c'est le corps qui bouge, pas tout ce qu'il faut pour s'écraser et s'étirer. Donc des trucs assez simples. OK. Et puis il y a une flexion sur les jambes. Maintenant, voyons comment cela est créé . OK, donc à ce stade, vous verrez que la jambe est simplement pliée sur une couche séparée. OK ? Donc, cette couche est là. Et puis, une fois l'incision terminée, nous avons une autre couche de jambes à tailler, partant du même cadre clé, mais parce qu'il a fallu la parentrer, parce que si je l'élève ici même, le corps ne peut pas se déplacer vers le bas parce que tout est au centre de gravité, et c'est pourquoi nous devons garder cela à OK ? C'est donc notre contrôle ici. Vous pouvez voir que nous pouvons déplacer toute l'animation avec cela, je pense. Oui, tout peut aussi être déplacé. Ainsi, toute l' animation du personnage ne s'interrompt pas. Donc des choses assez simples, rien de trop compliqué ici, et puis il y a juste une rotation des bras. Comme les bras étaient déjà légèrement incurvés, nous n'avions pas besoin d'ajouter beaucoup de mouvement Comme je l'ai dit, nous ne voulions pas trop distraire les enfants. Donc, une animation assez simple, rien de trop compliqué ici non plus. Et après, il y a celle avec la bière. La bière est donc essentiellement composée de quelques couches opaques. Avec différentes opacités, et c'est tout. Le designer a fait un très bon travail, et vous pouvez voir que cela m' a vraiment facilité la tâche car si le design est vraiment génial, vous pouvez créer de très belles animations à partir de celui-ci. Mais si le design n'est pas vraiment génial, vous ne pouvez pas vraiment faire quelque chose de grand à partir d'un mauvais design. devez donc également vous concentrer sur le design et manière dont vous pouvez tirer le meilleur parti de ce design. Voilà, la majeure partie, je pense, et allons-y et jetons un coup d' œil à d'autres animations. Donc celui-ci est dégoûté. Je ne voulais pas changer la glace en fonction des traits, car je voulais qu'elle reste la même J'ai donc ajouté des couches supplémentaires sur les côtés, qui ne sont en fait que des spirales animées Des trucs assez simples. Rien de trop compliqué, non ? Maintenant, j'ai l'impression que l'enfant est, vous savez, dégoûté ou qu'il pense à vomir C'est pourquoi il se couvre la bouche. Donc, en gros, parce que maintenant vous pourriez dire qu'il n' y a pas de couche buccale, mais vous pouvez remarquer que ce genre de détails s'explique très bien, n'est-ce pas ? C'est donc essentiellement de l'homo logic et il ne se passe rien d'autre ici, des choses assez simples. Et pour ce qui est de la peur, ce que j'ai ici, ce sont essentiellement des gouttes précompilées puis obligatoires . C'est ça. Et puis nous avons , par exemple, si vous devez créer des choses comme celles-ci, façon dont vous pouvez les animer est vraiment très simple Permettez-moi de vous en parler également. Disons simplement que ce sont les jambes, appuyons sur vous et vous verrez qu'elles tremblent beaucoup, n'est-ce pas ? Voici donc le bras , puis vous pouvez voir qu'il y a des gels par seconde et qu'il y a des choses comme ça qui se passent. OK. Maintenant, comment cela est créé, allons-y et vérifions le chemin du gel. Donc, en gros, j'ai simplement reconverti ces images-clés en images clés, puis j'ai simplement créé l'animation à partir de cela Rien de trop compliqué ici non plus. Ce que vous pouvez également faire, c'est qu' au lieu d'ajouter des gels, vous pouvez simplement créer une ligne, une ligne simple comme celle-ci. OK ? Ensuite, vous pouvez également créer des déformations sur la jambe Maintenant, c'est vraiment un très vieux projet, en fait. C'est pourquoi je ne savais peut-être pas que je pouvais le faire à ce moment-là. Alors peut-être que j'ai juste trouvé une solution que je pouvais à ce moment-là. Et ce que vous pouvez faire en gros, c'est aller de l'avant et animer un peu les choses pour que vous puissiez comprendre Je vais passer aux images clés et je vais simplement les animer un peu ici Il devrait y avoir en fait plus de points de cheminement, mais c'est juste pour illustrer l'objectif et vous faire comprendre ce que nous essayons réellement de réaliser. Donc, sur quatre images, nous allons simplement le faire comme ça. Des trucs assez simples. Rien de trop compliqué. Ensuite, vous pouvez accéder à l'image à six touches , puis simplement copier et coller la première image clé. C'est donc devenu une boucle comme celle-ci. Maintenant, évidemment, vous comprenez mon point de vue. Je ne pense donc pas avoir vraiment besoin de recréer toute l'animation pour vous expliquer cela Donc, en gros, il suffit de le copier et de le coller, et cela peut créer le sentiment de peur que j'ai ressenti ici. Donc des trucs assez simples. Rien de trop compliqué. Maintenant, il y en a un autre qui contient également de nombreux exemples différents d'émotions. Ou disons simplement que ce sont des émotions simples mais représentées par différents personnages, des poses. Voici donc l'animation. Jetons un coup d'œil à cela d'abord. Maintenant, le client ne m'a fourni que le design du personnage. Donc, en gros, il y a cette couche corporelle qui s'anime. Ensuite, nous avons les bras qui s'animent, qui sont transmis au corps du menteur Vous pouvez constater que les images clés sont décalées d'une image clé car il s'agit d'une règle d'animation des personnages connue sous le nom de follow through, selon laquelle une partie du corps se déplace après une autre OK ? Et c'est en gros ça. Et la partie la plus éloignée du corps est le s, et c'est pourquoi ils sont en fait animés ou, vous savez, ajoutés comme ça. OK, donc des trucs assez simples. Rien de trop compliqué ici. Vous pouvez maintenant ajuster un peu plus cette animation. Par exemple, si je voulais exagérer davantage le mouvement de l'oreille, je peux également faire glisser cette image clé vers l'avant et constater la différence ici Mais c'était trop, et une image clé fait la différence. Vous pouvez donc le tester dans vos animations et vous verrez la différence et l' impact de votre animation. OK. À part cela, les fusées n'ont pas été fournies par le client. J'ai donc créé moi-même ces animations de fusées. Animation lopable assez simple. Maintenant, la façon dont ils sont créés est également assez simple. ne s' agit donc que d' animations brutales de différentes lignes de trait C'est assez simple. Maintenant, l' accent est mis sur la fusée. La fusée est essentiellement une couche de forme. Donc, deux parties se trouvent en fait à l'intérieur d'une fusée. OK ? Les deux formes se trouvent donc dans un calque, ce qui me permet de les animer plus facilement. Et puis il y a tellement de stimulants qui en découlent au démarrage. D'accord et n'oubliez pas que nous sommes dans un monde fictif, donc tout n'a pas besoin d'être super réaliste car ce personnage n'existe pas également dans la réalité. Vous devez donc garder ces choses à l'esprit et prêt à essayer des idées farfelues. Et après cela, il y a juste cette petite ligne derrière, d' accord, qui est en train de se découper, en fait, de s'animer Ensuite, il y a aussi ces arcs de mouvement , qui ne sont qu'une ligne, ce qui crée simplement l' effet que le mouvement était trop rapide et qu'il y a une sorte de flamme derrière lui, qui disparaît lorsqu' il est animé. Et puis après cela, il n'y a plus qu' un simple squash qui se produit sur la balance, comme vous pouvez le voir. Nous partons d'abord du zéro, du zéro, puis nous passons au 58 et 108 parce que c'est beaucoup écrasé Cela s'étire donc beaucoup, puis nous l'écrasons comme s'il consommait de l'énergie Le même principe s'applique à tous les trois. Maintenant, j'ai créé l'animation des confettis dans un fichier séparé, qui se trouve ici Maintenant, la raison pour laquelle je l'ai fait était très simple. Je peux créer plusieurs variantes ici. Comme vous pouvez le voir, celui-ci est vert. Vous verrez qu'il existe une version 2 de confettis. Vous verrez qu'il existe une version 3 de confettis. Vous verrez qu'il y en a un qui a une couleur grise et violette, et il y en a aussi un qui a du jaune et du violet. Je peux donc simplement les glisser-déposer, et chaque animation est parentée à zéro Et aussi la fusée, d'ailleurs. Donc, si je le déplace, la fusée peut également bouger. C'est peut-être une erreur de ma part, alors je m'en excuse. Mais toute l'animation était en fait animée ou parentée correctement. Il aurait donc également dû être parentalisé. Donc je devrais juste m'occuper de ça, d'accord. Et ce sera en gros tout, puis je pourrai simplement tout déplacer et ensuite tout fonctionnera. Oui, vous pouvez voir que celui-ci est correctement parenté. Donc, si je déplace celui-ci, vous pouvez voir que je peux créer plusieurs variantes de l'animation, adaptées aux besoins de mon personnage, car le personnage n'est pas au même endroit dans chaque animation. Il se peut donc que je doive ajuster l'animation. Alors pourquoi créer l' animation encore et encore ? Dans celui-ci, j'ai dû ajouter la couleur d'accent, qui est le jaune ici. Et comme le jaune était au centre et que le personnage était, vous savez, dans une position différente, j'ai simplement déplacé les étincelles à différents endroits Et c'est en gros ça. La même chose a également été faite dans plusieurs autres poses. Même animation de confettis, mais avec des animations de personnages différentes, donnant le même impact, et vous pouvez voir que c'est vraiment très beau Les animations sont vraiment bouclables et les exigences étaient que l'animation dure deux à trois secondes, donc en fonction de ce qui me semblait le mieux, j'ai créé la boucle sur cette base OK, des trucs assez simples. Très belle animation. Et ce projet a été réalisé par des donateurs, en fait. Il existe donc une société appelée Givers et ces animations de personnages ont été créées pour eux. Allons-y et jetons un coup d'œil rapide au reste de l'animation. se passe donc des choses assez simples parce que le personnage se sent joyeux Animation donc très simple. Ensuite, nous avons l'animation des personnages. Maintenant, celle-ci est vraiment importante pour vous présenter quelque chose de vraiment très simple, c' est-à-dire que vous verrez qu'il existe plusieurs variantes de cette animation. Il y a ces trois secondes. Il y a aussi cette animation de six secondes. Vous remarquerez que le design du personnage change également de couleur. Maintenant, pourquoi j'ai ajouté cette aiguille subtile ? Parce que cela ajoute tant d' histoire et de sens. Givers consiste essentiellement à donner ou à aider les gens dans les moments difficiles ou à prendre soin des personnes âgées Donc, en gros, notre personnage représente le gris, et un gris signifie essentiellement qu'il n'y a pas de vie et qu' il n' y a pas de bonheur Et une fois que le personnage étreint l'autre personnage, vous pouvez voir qu'il ressent de la chaleur Oh, en fait, tout à coup, ces choses communiquent consciemment beaucoup plus de détails et beaucoup plus de sens à l'animation. Maintenant, cela n'a pas été demandé par les clients. Vous devez créer tous ces détails supplémentaires pour donner plus de sens et de profondeur à vos animations. OK, passons à la suivante. Maintenant, celle-ci est vraiment simple. Ce sera essentiellement assis sur le CTA, ce que l' on appelle l'animation d'action, d' accord. C'est tellement simple. Ils n'ont pas besoin des paillettes ou des confettis sur celui-ci Après cela, nous avons le gars qui crie ou dit, Whoa ho ho. Tu sais ? Donc, en gros, faire une sorte de fête. Ou peut-être qu'ils peuvent simplement l' ajouter lorsqu'ils font une vente, ils peuvent également l'utiliser dans leur marketing GML lorsque le personnage crie, Whoa ho ho, et ils peuvent mettre un autocollant plus grand, 40 % de réduction, et ça va vraiment être très beau OK. Et ensuite, passons à autre chose. D'accord, celui-ci est vraiment simple. C'est aussi une sorte d' animation CTA appelée à l'action. Donc, en gros, un signe de la main sur le pied de page peut-être ou sur l'écran de bienvenue Donc des trucs assez simples. Ce type d' animations de personnages peut être ajouté dans les animations d'intégration et vous vous connectez également à votre application Donc des trucs vraiment sympas. Et maintenant, nous avons le dernier, qui consiste essentiellement à répandre l' amour ou à répandre le bonheur. Oui, d'accord, il y a aussi une animation assez simple ici. Il y a un peu d'animation sur la couche buccale. Maintenant, j'ai essentiellement regroupé et fusionné toutes ces couches parce qu'il était plus logique simplement les animer ensemble au lieu de simplement, vous savez, le tout pourrait éclater Les dents peuvent se déplacer dans une autre direction ou le désalignement peut se produire fréquemment. Je les fusionne donc, et en gros, cela fait un peu sourire avec l'échelle et la position. Des trucs assez simples. Les bras sont animés par rapport au corps comme dans toutes les animations précédentes. Donc des trucs assez simples. Rien de trop compliqué ici non plus. J'espère que ce projet vous apprendra quelque chose. Voilà pour ce cours. Je te verrai dans le prochain. 4. 03. Résoudre les problèmes cachés: Dans cette classe, nous allons découvrir comment utiliser AIUXPlugin au lieu d'utiliser la surcharge Maintenant, nous l'avons un peu abordé dans notre classe précédente dans la classe intermédiaire, afin que vous puissiez apprendre à l'installer en suivant cela. Ensuite, ce que vous pouvez faire, c'est aller de l'avant et discuter de tous les détails. Maintenant, permettez-moi d'aller de l'avant et de vous montrer une chose importante. Si nous surchargeons Battle X, cherchons simplement cela, et vous remarquerez qu' il existe cet outil, dont nous avons déjà parlé. Maintenant, Overload a publié la version 2.2, en fait. Donc, Overload Two Point Oh est sorti, mais il coûte 75$ Et si vous devez effectuer une mise à jour, et si vous souhaitez mettre à jour votre plugin, vous devez payer des frais supplémentaires. Maintenant, il existe une meilleure alternative, qui est AEUX, et elle est totalement gratuite Maintenant, il y a eu beaucoup de problèmes dans Overload 1.2, il y a aussi quelques problèmes dans l'utilisation d' AEUX et passons-en en revue également Désormais, la surcharge a sa place. Il propose également de nombreuses nouvelles solutions, et il peut faire beaucoup de choses. Il peut également transférer votre travail depuis Photoshop, mais ce n'est pas notre objectif principal dans la création d'animations d'interface utilisateur. C'est quelqu'un qui crée des choses comme ça peut-être avec des textures et des choses comme ça. OK, alors allons-y et regardons AEUX. Nous en avons déjà parlé, mais allons-y et voyons que AEUX est sur Github Vous pouvez simplement le télécharger d' ici et lire comment l'installer, trucs assez simples, rien de trop compliqué. Et ce que vous pouvez faire en gros, c'est allons-y, Figma, et laissez-moi vous montrer comment vous pouvez l'utiliser Donc, en gros, comment fonctionne la surcharge. Désolé, mon BD, le fonctionnement réel de l'AEUX est en gros très simple Allons-y et créons quelques couches différentes. Et permettez-moi copier une sorte d'image. Maintenant, c'est une image. Donc, copions-le, faisons-le également ici. OK. Maintenant, il est très important que le travail que vous essayez de transférer soit dans un cadre. Vous devez cliquer avec le bouton droit de la souris, accéder à vos plugins, passer au développement et accéder à AIUX Une fois qu'il est ouvert, vous pouvez essentiellement continuer et appuyer sur Envoyer la sélection à AE, puis il vous demandera un dossier. Allons-y et créons un dossier, qui sera notre test AEUX Sélectionnons-le. OK, vous pouvez voir que l'image a également été ajoutée ici, et vous pouvez voir que les formes sont également ajoutées. Maintenant, cela fonctionne également très bien avec les dégradés. Vous pouvez ajouter des dégradés, les transférer également. Cela fonctionne vraiment très bien. Mais il y a une chose très importante que vous devez garder à l'esprit lorsque vous travaillez sur des projets clients, c'est que vous devez accéder à l'extension, appuyer sur le bouton AUX. Il y a beaucoup de paramètres ici que vous devez aborder. Vous pouvez sélectionner l'option permettant de créer automatiquement une nouvelle comparaison. Vous pouvez également ajouter un chemin sécurisé à l'image. Je n'ai sélectionné aucun dossier, il m'en demande donc un nouveau à chaque fois. Vous pouvez également choisir la fréquence d'images de la nouvelle composition, qui peut également être de 60, qui peut également être de 24 La durée de la composition doit être d'environ 60 secondes. Maintenant, pourquoi ? Parce que parfois, je regrette que la taille de ma composition ait été plus courte parce que le client m'a demandé de ralentir l'animation Et si le client a tellement de couches ou d'animations complexes en cours, ou si son personnage ou son œuvre d' art comporte autant d'images, ou si l'animation est réellement créée à l' aide de la mise en page automatique, alors il y a Chaque image ajoutée ici se traduit en fait par une composition néo. Dans After Effects. Laisse-moi juste essayer de le retester . Peut-être que ça marchera. Oui, tu peux le voir. Ce cadre est effectivement ajouté. Maintenant, que se passe-t-il réellement si l'animation commence à partir d'ici ? Mais le client a demandé que l'animation dure désormais 10 secondes, mais la taille de votre composition était de 5 secondes. Ce que vous pouvez faire, c'est simplement appuyer sur Ctrl K, puis simplement modifier la durée. Des trucs assez simples, rien de trop compliqué, non ? Mais mais, mais, mais. L'important, c'est que si vous avez plusieurs images à l'intérieur de cet ordinateur central, ce qui se passe réellement, c'est à l'intérieur de ce cadre, il y en aura un autre Donc, en gros, une autre pré-composition. Vous devez l'ouvrir , puis vous devez simplement faire glisser la couche vers l'extérieur. Ensuite, vous devez l'ouvrir, puis vous devez également faire la même chose et l'allonger. Alors pourquoi faire tous ces efforts pour en rester à 60. est aussi simple que cela, cela n' augmente pas la taille du fichier de toute façon Donc, il n'y a aucun mal à le faire. Les paramètres de forme de détection doivent être vérifiés. Maintenant, il est question de groupes pré-comp. Maintenant, c'est tout à fait votre choix, mais je ne le recommande pas. Et il y a d'autres choses que vous pouvez également pré-composer des groupes, mais je ne les recommande pas Ensuite, vous avez une précomposition. Dans ce cas, par exemple, vous pouvez la sélectionner et appuyer sur une Et c'est vraiment utile. Parfois, vous ne voulez vraiment pas le faire car il y aura plus de 100 couches. Vous serez donc très perplexe quant à savoir ce que je dois animer et quelle est quelle couche Vous devez donc garder ces choses à l'esprit. Il y a également d'autres points à garder à l'esprit, lorsque vous transférez une œuvre d'art complexe, des couches de guidage étranges sont parfois transférez une œuvre d'art complexe, ajoutées ici également, et il y a un vrai projet que je souhaite vous présenter. Mais malheureusement, je n'ai pas le fichier Figma pour ce projet Et ce que vous pouvez faire en gros, c'est qu'une fois que cela se produit, vous pouvez simplement activer et désactiver la visibilité des couches de Google, les sélectionner, puis les supprimer également. aussi simple que cela, et l' onglet système n'est pratiquement rien, alors laissez-le. Des choses assez simples, et maintenant nous sommes passées par là. Maintenant, quels sont les avantages de l'utilisation d'AEUX ? Comme je l'ai dit, c'est totalement gratuit. Je veux dire, c'est un énorme avantage. Le seul problème est le problème de pré-composition que je viens de vous mentionner. Écrivez celui-ci, et vous pourrez le résoudre en prolongeant simplement la durée de la composition À part cela, il n'y a pas vraiment beaucoup de problèmes. Parfois, une fois sur 100, il y a un problème très, très étrange, et nous allons également nous en occuper. Mais commençons par examiner nos études de cas sur la façon dont j'ai créé différents types d'animations à l'aide de ce plugin. Voici comment l'AEUX envoie réellement les données dans votre dossier Il s'agit d'un projet client et le fichier comportait tellement de dégradés que vous pouvez voir les différentes couches ici Ce n'est pas vraiment compliqué car tout d'abord, ces données sont déjà ajoutées à votre fichier, vous n'avez donc pas vraiment à vous inquiéter s'il se passe beaucoup de choses étranges ici. Ignorez simplement ce genre de choses. De plus, vous devez garder à l'esprit que si une couche est retournée ici, par exemple , l'AEUX continuera à la copier-coller ici C'est pourquoi il existe plusieurs instances de la même couche. Et vous remarquerez que certaines couches ont des noms vraiment propres. Maintenant, c'est en fait exporté manuellement par moi. Pourquoi ? Je vais vous expliquer cela dans une minute. Allons-y, ouvrons le fichier et laissez-moi vous montrer un projet beaucoup plus complexe, et laissez-moi vous expliquer comment vous allez dans ce cas optimiser le fichier. Tout d'abord, vous savez que nous ne pouvons pas utiliser les dégradés de liberté et que vous ne pouvez pas non plus ajouter plusieurs couches de style qui sont réellement disponibles dans Figma En fait, cela ne se traduit pas vraiment bien dans After Effects. Et s'ils se traduisent également, vous ne pouvez techniquement pas exporter pour toutes les plateformes. Toutes les fonctionnalités ne sont pas prises en charge. Comme vous le savez, dropshat n'est pas pris en charge sur IUS, alors gardez ces points à l'esprit, Et vous devez tricher autour de ces choses comme indiqué dans les cours précédents Donc, en gros, ce qui s'est réellement passé dans ce contexte est une histoire distincte, et j'en parlerai dans un instant. Regardons simplement nos capsules. Vous pouvez voir que la capsule est en fait juste ce rien qui s'anime ici J'ai juste décidé de tout animer ici en ajoutant simplement tout à un parent null, puis c'est l'animation Oui, vous pouvez le voir, des choses assez simples, et ces points ne font que suivre un chemin. Maintenant, comment créer cela est vraiment simple. Ce que vous devez faire, c'est simplement créer une image clé sur ce chemin. Copiez-le, lisez l'image clé. Accédez à votre couche de formes. Créons-en un nouveau très rapidement. Laissez-moi faire en sorte que le remplissage soit rouge. Laisse-moi laisser tomber ça. OK. Et laissez-moi passer au poste. Frappe. Maintenant, la première image-clé doit être sélectionnée et appuyer sur Control V. OK. Et si cela ne copie pas, en fait, cela devrait être le cas, mais permettez-moi examiner en détail comment le faire. OK, donc une fois que vous l' avez copié, vous n'avez qu'à le coller ici, et vous verrez que le chemin a été ajouté et que les images-clés sont également ajoutées ici Et vous remarquerez qu' il suit un chemin. Maintenant, vous pouvez certainement aussi aller dans l'autre sens. Alors allons-y, appuyons sur Halte et faisons-le. Ensuite, vous devez vous occuper de ces images-clés du milieu et les convertir en interpolation d' images K rendre linéaires et les déplacer dans le temps, les bloquer dans le temps bloquer dans le C'est ça. Faites la même chose avec celui-ci. Donc, ou vous pouvez simplement appuyer sur Rove à travers le temps pour arrêter. Je vais faire en sorte que ce soit linéaire. OK. Et puis j' ai peut-être gâché quelque chose. Oui, je pense que j'ai gâché quelque chose. Permettez-moi simplement de vérifier ce que j'ai réellement fait de mal. Une fois que vous avez copié et collé l'image-clé, vous devrez peut-être l'ajuster OK. Et après cela, ce que vous pouvez faire, il y a deux choses que vous pouvez faire. Tout d'abord, ce que vous pouvez faire, c' est simplement tracer votre chemin et le suivre comme ceci. OK ? Ensuite, vous pouvez mettre votre forme comme ceci, en utilisant le plug in. est aussi simple que ça. Et après cela, il vous suffit de le glisser-déposer où vous le souhaitez. C'est aussi simple que cela, rien de trop compliqué. OK. Et si vous avez des courbes dans le tracé, il vous suffit de les modifier, puis vous pouvez simplement créer l'animation suivante. C'est aussi simple que ça. De la même manière que j'ai fait les animations linéaires. Et puis il y a juste cette animation de capsule en cours. Vous remarquerez maintenant que l'animation part de la génétique. Et ça s'arrête sur la génétique. Maintenant, la façon dont je l'ai créé est vraiment très simple. Je viens de dupliquer le tout, vous savez, vous verrez que certaines choses apparaissent plus d'une fois sur la chronologie Par exemple, la montre une fois ici, la montre est de nouveau là. OK, de la même manière, j'ai juste créé un espacement suffisant et créé un parchemin, qui se trouve au-dessus d'ici, et je peux le faire glisser pour vous montrer également que tout est pareil, il suffit de le créer deux fois au-dessus Maintenant, comme il s'agit de précookies cela n'ajoute pas de données supplémentaires, et ce type de décision optimise réellement vos fichiers C'est simple, mais il faut le faire avec soin. Maintenant, l'arrière-plan présentait quelques problèmes et le transfert n'était pas correct J'ai donc dû y aller dans le fichier, tout désactiver, ne conserver qu'une seule couche. Par exemple, cette couche est uniquement refusée, désactive tout le reste, ou vous pouvez simplement sélectionner cette couche et appuyer sur Exporter. Et si vous souhaitez uniquement transférer cette couche, il vous suffit de la sélectionner, puis de cliquer sur Exporter. C'est ça. Ensuite, vous pouvez continuer et ce que vous pouvez faire c'est très important juste avant de démarrer l'animation, vous cliquez dessus, vous exportez une image clé, nommez comme référence, puis vous la mettiez dans votre composition également au verso Et puis en plus de cela, vous pouvez remarquer si quelque chose est mal aligné ou quelque chose comme ça Parfois, il y a un problème dont nous allons discuter. Comme nous avons abordé cette question, nous aborderons également cette autre erreur détaillée, qui se produit dans certains projets. Mais avant cela, allons-y et jetons un coup d' œil aux deux autres animations que j'ai créées pour ce projet. En fait, il y en a trois, je crois. Encore une fois, il y a plusieurs images. Mêmes cartes, mêmes images, trucs simples. Encore une fois, l'effet bouclable, les doublures sont créées, tout se trouve à l'intérieur de ceux qui se déplacent dans la direction opposée Des trucs simples, rien de trop compliqué. OK. Et oui, en gros, c'est ça. Et vous pouvez supprimer ces couches supplémentaires en cas de besoin, mais si elles sont désactivées, elles ne sont pas réellement exportées. C'est donc gagnant-gagnant de toute façon. Et vous pouvez voir que c'est la composition finale où tout est rendu OK. Et vous verrez que c'est notre cadre, encore une fois, le même problème avec les dégradés ou quelque chose comme ça que j'étais confronté J'ai donc fait la même chose. De plus, une autre chose très importante est que j'utilise également la même taille de masque afin que tout soit réduit que j'utilise également la même taille de masque afin que tout soit réduit . OK. Et comme les exigences étaient les suivantes, le client avait besoin de l'animation pour ajouter ces espaces négatifs. C'est pourquoi j'ai ajouté ceci. Sinon, je pourrais aussi le déposer. Des trucs assez simples, les mêmes cartes , juste de l'animation. Passons simplement au format de la carte pour que vous puissiez le voir également Donc, trois cartes, d'accord. Et puis j'ai simplement dupliqué ces cartes avec le même espacement Allons-y et vous pouvez voir maintenant où commence réellement cette carte. OK. Des choses assez simples, il suffit de dupliquer les couches pour optimiser la taille des fichiers. C'est ça. Maintenant, allons-y et jetons un coup d'œil à notre troisième dossier. Maintenant, il ne reste plus qu'à ouvrir. OK, donc celui-ci a eu quelques problèmes, et nous allons y revenir également. Vous remarquerez qu'il s'agit d'un trait que j'ai en fait dû créer ici. Maintenant, parce que parfois les dégradés sont vraiment perturbés. Par exemple, si vous ajoutez un dégradé plus simple, j'ai également remarqué, ce qui est vraiment étrange, que lorsque je reçois ce type de fichiers d'un client, ce qu'alors que je suis confronté à ce genre de problèmes. Il y a un autre projet dont nous parlerons très prochainement dans cette classe, le CryptApject. Maintenant, cela vient d'un designer connu sous le nom de Gacofz. Nous avons collaboré à certains projets. C'est un designer vraiment incroyable. Est-ce que de très bons encadreurs fonctionnent et fait également un très bon travail de conception Vous pouvez donc également consulter leur travail. Et une fois qu'il a conçu la plupart des choses, je n'ai pas vraiment vu beaucoup de problèmes autres que ceux auxquels nous avons été confrontés dans le ces projets dont nous allons discuter. dehors de cela, lorsque je travaille sur les projets des clients, j'ai remarqué qu'il y avait plusieurs problèmes de dégradé que les dégradés étaient parfaits ici Mais lorsque je les transfère dans AE, je constate des problèmes très, très étranges. Vous verrez qu'il n' y a aucun problème ici, n'est-ce pas ? Le dégradé est vraiment parfait ici. Mais parfois, je dois simplement recréer la couche. Je ne sais pas pourquoi cela se produit. n'y a pas d'explication de ce type à ce sujet parce que c'est juste une sorte d'outil qui n'a pas beaucoup de support. Il s'agit donc simplement d'un outil avec lequel vous devez simplement travailler. Mais c'est une alternative gratuite, et j'ai travaillé sur plus de 100 projets avec cet outil, et il fonctionne vraiment bien. C'est pourquoi, vous savez, faut créer une classe distincte dessus. Donc des trucs assez simples créés ici en utilisant la même technique. Le dégradé est fondamentalement très simple. L'opacité s' estompe dans le coin inférieur. Permettez-moi de vous montrer le dégradé. Et regardons simplement où c'est. Ouais. Vous pouvez voir les points du dégradé. En fait, oui, maintenant tu peux mieux voir. Tu vois ? Dégradé assez simple. Rien de trop chic. Vous devez aussi parfois faire ce travail manuellement. Je sais que cela peut parfois être problématique, mais cela vous aidera également à vous améliorer ou à trouver un meilleur designer, ce qui vous permettra également de vous démarquer de la foule et de devenir le 1 % des meilleurs créateurs. C'est donc essentiellement pour expliquer et vous montrer que la résolution de problèmes est également un aspect important de ces animations. Il n'est tout simplement pas nécessaire d'ajouter des images-clés. Vous devez également garder ces choses à l'esprit, et la façon dont j'ai créé l'animation offset est assez simple. Quelle que soit la manière dont vous créez une simple animation de galets en boucle, il vous suffit de créer trois images-clés Il vous suffit de les copier et de les coller à nouveau, puis de les décaler. Des trucs très simples, rien de trop compliqué ici non plus. Et l'arrière-plan n'est en fait qu'une image. De la même manière, j'ai également eu quelques problèmes avec celui-ci. Il suffit donc d'ajouter une image. Vous pouvez voir que j' ai ajouté un masque parce que les coins devaient être arrondis, mais vous savez que les compositions sont en fait carrées dans tous les logiciels de composition et partout. C'est pourquoi j'ai simplement ajouté un masque rectangulaire pour résoudre ce problème. OK, des trucs assez simples. Parce que lorsque je l'ai transféré depuis Figma, il n'y avait pas de masque, donc j'ai juste dû l'ajouter et le rayon d'angle s'il y en a un ajouté dans Figma, il ne se traduit pas vraiment À After Effects également. Laissez-moi juste essayer de vous le montrer également. Je pense que cela ne fonctionne pas bien. Oh, c'est le cas. Donc, parce que cela a peut-être été ajouté à une image, c'est pourquoi cela n'a pas fonctionné Quoi qu'il en soit, juste pour garder les choses en tête ou pour que les choses soient fastidieuses, c'est juste une technique à avoir dans le sac Alors maintenant, allons-y et abordons un sujet dont nous n'avons discuté jusqu'à présent dans aucun des cours. Permettez-moi donc de vous montrer une animation d'en-tête. Maintenant, qu'est-ce qu' une animation d'en-tête ? Une animation d'en-tête est quelque chose qui s'affiche en haut d'un site Web, d'accord ? Et dans cet exemple, l'animation est assez simple. En gros, une IA qui parle. C'est aussi simple que cela, nous avons créé des animations de chat très détaillées dans la classe intermédiaire et dans la classe avancée. Vous pouvez les consulter. Il se passe donc des choses assez simples. Voyons juste ce qui est différent ici et qui n'a peut-être jamais été discuté auparavant. OK. Et il y a un autre exemple que je vais aborder très prochainement dans ce cours qui va vous montrer comment vous pouvez créer des systèmes réellement actifs qui entrent dans différentes sections d'un site Web. OK, donc oui, vous pouvez voir qu'il y a essentiellement cette demi-carte. Maintenant c'est verrouillé, je crois. Oui, celui-ci semble l'être. Ouais. Celui-ci est une bulle. Donc, en gros, de la même manière que nous avons fait de l'animation auparavant dans le cours précédent, tout est animé à l'intérieur ici. Même chose, mes affaires. Ce ne sont que des images, des trucs simples. Maintenant, vous pouvez voir que ce dont j'ai parlé tout à l'heure, vous pouvez voir qu'il y a des compositions à l'intérieur des coms, n'est-ce pas ? Maintenant, c'est là que vous pouvez avoir des problèmes si vous devez allonger votre animation. Cela va entrer dans chaque composition, augmenter le côté du fichier, puis étirer les couches Nous devrions vraiment éviter ce type de travail supplémentaire. D'accord, c'est donc essentiellement l'animation. Rien de trop compliqué ici non plus. Des trucs assez simples. Et cette icône n'est également qu'une image. OK. Alors, qu'est-ce qu'une animation d' en-tête ? Permettez-moi de vous montrer un projet que j'ai créé. J'espère que leur site web est en ligne, oui. Maintenant, malheureusement, je ne peux pas vraiment localiser les fichiers, peut-être qu'ils ont été supprimés lorsque les données ont été corrompues sur mon autre disque. Mais vous pouvez voir les animations ici. OK ? Il s'agit donc essentiellement d'un design SVG, design SVG complet, puis simplement animé au-dessus d'une image mobile Ensuite, il y a ces messages WhatsApp, assez simples à créer. Et vous pouvez voir à quel point cela ajoute de la valeur, n'est-ce pas ? Et en gros, une animation complète du flux de travail que vous pouvez voir. Nous avons créé une animation très similaire en classe avancée, vous pouvez donc y jeter un œil. Et c'est en gros ça. C'est à cela que ressemblera votre travail . Et les couleurs, les concepts vont vraiment avoir de l'importance. Essayez donc de garder ces points à l'esprit et de veiller une bonne image de marque de la marque avec laquelle vous travaillez. OK. Alors allons-y et laissez-moi vous montrer une autre très bonne étude de supposition. Que j'ai créé. OK, alors allons-y et jetons un coup d'œil à ça. OK, alors allons-y et jetons un coup d'œil à une marque de pub locale pour laquelle j'ai créé des animations. Maintenant, dans ce projet, j'ai fait quelque chose vraiment incroyable et de vraiment intéressant. Permettez-moi de commencer par vous montrer comment le site Web est réellement sorti. OK. Et il s'agit en fait du site Web d'un projet en direct. Donc, en gros, l' entreprise est en ligne. Maintenant c'est vraiment intéressant. Et ce que j'ai fait, c'est pour ce projet que j'ai également créé le logo. J'ai fait le design du logo. J'ai fait tout le design ainsi que l'animation. OK. Il n'y avait donc que deux couleurs, le violet de la marque, puis le vert, que j'ai ajouté en guise de couleur complémentaire. Et vous pouvez voir que l'animation fonctionne très bien. Il s'agit donc essentiellement de ce que l'on appelle animation d' en-tête. Cela explique en gros la majeure partie du produit, non ? Ce que fait l'entreprise va de soi. Ensuite, toutes les conceptions ont été réalisées par moi, puis nous avons ces animations de flux de travail, n'est-ce pas ? Des choses très simples, mais vraiment intéressantes. Et puis nous avons l'icône Google Business, qui est en train de s' améliorer, n'est-ce pas ? Donc, en gros, une fois que vous avez choisi un plan sur la plateforme, vous obtenez que si vous remarquez que vous achetez, vous passez à l'échelle, vous avez tellement d'analyses, vous obtenez que si vous remarquez que vous achetez, vous passez à l'échelle, vous avez tellement d'analyses, de ventes en cours, vous passez de ceci à cela, donc une forte croissance se produit parce qu'il s'agit de narration, n'est-ce pas ? Lorsque vous avez une totale liberté sur le projet, c'est le type d'œuvre que vous devez créer. Et c'est le type de service qui vous permettra de vous démarquer de la foule. Et puis vous pouvez voir cette très belle animation de loupeb. Hein ? Ensuite, nous avons ce pied de page, qui montre essentiellement ce que le Local B va faire Désormais, toutes les animations sont largement compatibles. Vous pouvez voir qu'il ne se passe rien de trop sophistiqué. n'y a pas d'effets spéciaux, mais vous verrez quand même que l'animation est vraiment magnifique. Cela donne tellement de sens et de vie au site Web. Et c'est essentiellement ainsi que vous pouvez faire en sorte que les marques se démarquent de la foule. Vous pouvez créer des œuvres incroyables. Et une fois que vous avez créé quelque chose d'incroyable comme celui-ci, vous pouvez essentiellement créer une belle étude de cas à partir de cela et montrer au monde entier que c'est ce que vous êtes capable de faire. OK ? Donc, en gros, ce sont toutes les animations et nous allons les passer en revue, très rapidement car les designs ont été réalisés par moi, donc il n'y a pas vraiment de problèmes dans ces scénarios. Des trucs vraiment simples. Lorsque le B sélectionne le logo, le chemin a été coupé. C'est une pré-composition. La couche a été réduite car elle est désormais liée au logo lui-même Et le logo est essentiellement précommandé et animé comme ça. Et j'ajoute juste le cadrage de la touche de position sur la précomposition, un truc assez Rien de trop compliqué. OK. C'est vrai. Des trucs assez simples. OK ? Et puis il y a l'autre. Jetons juste un coup d'œil à ça. OK, il s'agit donc de la contribution de conception d'Illustrator. Maintenant, vous remarquerez que les polices sont en fait celles que j'ai utilisées dans mon ordinateur, donc je n'ai tout simplement pas eu à les convertir car les textes ne s'animaient pas non plus Et l'accent était mis uniquement sur les éléments. Le texte n' apparaît donc qu'avec opacité, nous n'avons donc pas à le convertir en joueurs She Ce sera du travail supplémentaire, pas besoin de cela. C'est assez simple, comme une animation ici. Juste un peu d'échelle , très bien. OK. Je vais juste vous montrer les images-clés Animation à grande échelle assez simple. Rien de trop compliqué. Ensuite, nous avons l'animation de la flèche, qui est le chemin des rêves. Nous en avons discuté dans le cours avancé sur la manière d'optimiser les flèches. Et puis nous avons le bot AI. Nous avons le référencement, des trucs assez simples, non ? Mais tellement de sens et qui s'intègre vraiment dans le style de la marque dans son ensemble. Ensuite, nous avons le Google Business Boost. Jetons un coup d'œil à ça. OK, donc celui-ci est un peu long. Il y a donc tout ce voyage en cours. Nous allons donc ici. Nous choisissons ce package. Allons-y simplement. Maintenant, parce que je le veux, je me suis dit qu' un élément est fondamentalement lié à d'autres éléments, c'est pourquoi toute l'œuvre se trouve dans une seule composition. Et je m' amusais à l'animer, donc je n'ai pas vraiment prêté attention à l' ajout de précaméras ici Et le client était également vraiment, vous savez, prêt à me faire confiance. Il n'a pas demandé beaucoup de révisions. C'est pourquoi j'étais sûre qu'il l'adorerait. C'est pourquoi je n'ai tout simplement pas ajouté de précames. Oui, il se passe des choses assez simples ici. Ensuite, en gros, cette ligne arrive, et je pense qu'il sera difficile de la trouver. Oui, je crois. Laisse-moi juste essayer de le trouver. Peut-être celui-ci ? Nan. Oui, celui-ci. OK. La conception de la ligne est donc simple, mais c'est juste que l'autre ligne est fondamentalement séparée. OK ? Donc, il diffuse simplement la fin, puis nous révélons celui-ci et le logo ne fait que le suivre. Maintenant, tous les cadres cadeaux sont ajoutés ici parce que la même couche couvre en fait tout le trajet Je n'ai donc pas eu à précompiler car il s'agit d'une seule couche Si je le précompose, c' est la même histoire. Rien de différent, donc. Ensuite, nous avons ceci : les lignes ont en fait eu un certain effet conique. Non, je ne voulais pas vraiment faire de compromis, et c'est pourquoi je l'ai simplement animé avec un masque. Maintenant, comme vous pouvez le constater, cela demande un peu de travail supplémentaire, mais cela en vaut vraiment la peine car l'effet conique sur la ligne est vraiment beau. C'est pourquoi j'ai dû étendre la couche, car on ne peut pas ajouter d'effet de cône à Lottie Et puis nous avons cette ligne, qui est également une ligne conique. Animé simplement. Ensuite, nous avons des boules de détartrage, des points. C'est ça. Ensuite, les chiffres augmentent très subtilement. nous concentrons donc entièrement sur ce point et nous nous occupons de la rotation des analyses. Des trucs simples. Une animation de mise à l'échelle aléatoire se poursuit ici avec un certain décalage par rapport aux couches. Donc ça a l'air vraiment sympa, non ? Il y a donc un certain décalage qui peut être obtenu grâce cela. C'est assez simple, non ? Alors nous avons cette animation ici, non ? C'est assez simple, redimensionner le décalage ici. Des trucs simples. Maintenant, il est très important de garder à l'esprit que nous avons maintenant deux champs sur la couche. Donc, pour réduire le nombre de couches de votre composition ou les nettoyer un peu, il vous suffit de sélectionner une ou deux couches, faire glisser comme ceci, puis de les fusionner. Cela n'affecte en rien la couche. Et puis c'est aussi simple que ça. Et après cela, nous avons la critique de Google. Jetons juste un coup d'œil à ça. Je pense que c'est l' animation d'en-tête qui a le plus d'impact. Ouais. Alors maintenant, vous allez voir que j'ai d'abord créé l'animation au format Google, à droite, aux couleurs de Google. Mais le client voulait vraiment apporter la touche de marque, n'est-ce pas ? C'est pourquoi j'ai recoloré aussi simplement que ça. Des trucs assez simples. Rien de trop compliqué, non ? Et vous remarquerez que le vert, le jaune, tout ce est essentiellement jaune correspond à Google. Le violet est de la marque. La règle standard est que lorsque vous ajoutez de la couleur, vous devez choisir votre teinte, je crois, et si le nombre est supérieur à 150, vous devez en déduire 150, d'accord ? Et cela va vous donner une couleur très complémentaire. Si le nombre est inférieur à 150, il suffit d'y ajouter 150. Cela vous donnera le rapport qualité-prix parfait. Donc, juste un conseil de design là-bas. Maintenant, cela sera très utile pour créer de très beaux contrastes. Et le client l' a adoré. Alors j'ai dit, pourquoi pas ? Allons-y. Et c'est en gros ça. Et si vous pensez à la façon dont l'animation est créée il suffit de dépasser la couche à une échelle de 120, puis de la réduire à cent Même animation sur chaque couche. Mais ajoutez-le simplement avec, vous savez, un peu de décalage. Vous pouvez voir le décalage ici, non ? Et puis il y a juste ces avis sur Google qui apparaissent, non ? Donc, l'un après l'autre. Donc, en gros, il s'agit simplement d'augmenter les avis de Google, vous savez, ils apparaissent, puis ils entrent dans le vif , vous savez, ils apparaissent, puis ils entrent du sujet et ensuite nous avons la note augmenter Nous ne faisons donc que raconter l'histoire dans son intégralité. Et tous ces éléments sont en fait apparemment vers leurs propres valeurs nulles, puis ce ne sont que des valeurs nulles déplacées via des Krames de position Ce sont donc les points que vous devez garder à l'esprit pour optimiser vos fichiers. Vous pouvez les personnaliser plus tard ou vous pouvez simplement maintenant, quand je vous explique cela, je n'ai pas vraiment de mal à animer ce genre de choses Mais si vous travaillez sur un fichier Figma que je vous ai vraiment montré lors du projet client précédent, il est difficile de les animer et conserver l'arrangement de ces Gardez donc cela à l'esprit. Et si vous avez du mal à savoir quelle couche est le salaire, ne vous inquiétez pas J'y suis également allé et vous apprendrez avec l'expérience. Fais-moi confiance. OK, après ça, nous avons l' animation du logo, d'accord ? Et nous avons l'animation du logo dans plusieurs formats. Nous allons simplement vous montrer l'animation du cadeau car il ne se passe pas grand-chose. Des trucs assez simples. Rien de trop compliqué, juste un peu de squash et d'étirement, un peu d'animation et des dépassements sur les antennes du B. Des trucs assez simples Et la même animation a été, vous savez, proposée en plusieurs tailles, et vous pouvez le constater. Même animation, mais tailles différentes. Je viens de créer cette version carrée , puis de mettre cette précomposition partout. Des trucs simples, vraiment utiles et qui font gagner beaucoup de temps. D'accord, c'est en gros tout pour ce cours. On se voit dans le prochain. 5. 04. Résolution d'erreurs: Bien, dans ce cours, nous allons discuter de la façon de résoudre certaines erreurs auxquelles vous pourriez être confronté et vous n'avez aucune idée façon dont ces problèmes sont créés Allons-y et discutons de notre étude de cas, et examinons certaines des erreurs auxquelles nous avons été confrontés. Vous pouvez voir qu'il y a un certain ratio de texte ici, il y a un certain ratio de texte ici, et il y a aussi des problèmes de texte partout ici. Alors, comment résoudre ce problème. Maintenant, il est vraiment surprenant que lorsque j'ai exporté ces fichiers depuis mon After Effects, il n'y ait eu aucun problème. Ce que je veux dire par là, c'est quand j'ai exporté l'animation, ce que je voyais réellement. L'animation de mon aperçu était complètement parfaite, d'accord ? Il n'y a eu aucun problème. L'animation semblait parfaite. Ici aussi, l'animation semblait parfaite. n'y a eu aucun problème. Je n' ai même pas pu voir un seul problème ici. Et la première fois que cela s'est produit, j'ai eu très peur parce que je n'arrivais pas à comprendre pourquoi cela se produisait. Je ne comprends pas parce que le client se plaignait beaucoup. Voici donc comment vous pouvez réellement le réparer. Donc, en gros, allons-y et importons notre actif pour d'abord comprendre ce qui se passait réellement. Ensuite, nous apprendrons les méthodes pour les résoudre réellement. OK ? Allons-y et ajoutons notre graphique. Fermons simplement ce projet et importons celui-ci. OK, tout est ajouté ici. OK. C'est donc la couche qui causait le problème. OK ? Et allons-y et créons une animation très simple. OK. Animons simplement cette couche uniquement Animation donc assez simple. C'est ça. Essayons simplement d'explorer cela. D'ailleurs, nous avons discuté du fait qu' il y aurait des joueurs de groupe, et vous pouvez également voir ces joueurs de groupe ici. OK ? Allons-y et vous verrez que les joueurs du groupe peuvent également être désactivés ou activés. OK ? Mais ces couches ne contiennent aucune donnée. Il n'y a rien sur eux. Et ce que vous pouvez faire, c'est essentiellement supprimer les joueurs du groupe. Et votre composition deviendra propre. D'accord, nous avons donc également abordé cette fonctionnalité. Maintenant, allons-y et actualisons. Cliquez ici, cliquez sur notre graphique. Et maintenant, il suffit de faire le test. Il suffit de cliquer sur les rendus actuels pour voir l'animation Parfait. Maintenant, je ne peux pas vraiment zoomer ici, mais vous pouvez voir qu'il n'y a aucun problème ici, n'est-ce pas ? Maintenant, c'est là qu'intervient la résolution des problèmes. Vous devez aller sur Google et rechercher Lottie Preview. OK. Il existe LottieFiles Preview. Tu peux l'ouvrir. Il y a LottieFiles de Lottie , puis essayons d'en trouver d' Essayons juste d'en trouver plusieurs, d'accord ? Parce que plus il y en a, mieux c'est. Voyons voir OK, et maintenant je vais aller ici, cliquer sur Mets Jason, le faire glisser ici. Et vous constatez qu' aucun problème ne se produit ici non plus. Maintenant, parce que je répare la couche dans Figma, c'est peut-être exactement pour cela que cela ne se produit pas Non, non, non, non, je pense que c'est ce qui se passe ici. Zoomons. Vous pouvez voir qu'il y a ce problème, mais il n'est pas réellement détecté dans notre animation, ce qui est assez étrange. Maintenant, pour résoudre ce problème, allons-y et voyons également si nous pouvons également le tester sur une autre plate-forme. OK ? Il s'agit donc essentiellement de les brancher ou de les laisser, et il suffit de cliquer sur Plod Animation Faisons-le simplement glisser-déposer. Oups, ça ne marche pas. Allons-y, copions notre chemin, le collons ici, puis appuyons sur le test. Vous pouvez également voir qu'il y a un problème ici. Et ensuite, nous verrons. Maintenant, ne l'utilisons pas, laissez-le. OK ? Vous pouvez donc utiliser ces aperçus de Lottie, différents styles ou sites Web, puis tester votre animation Et il est vivement recommandé, même si vous avez confiance en votre animation, qu' si vous avez confiance en votre animation, elle ne prenne pas plus de 2 minutes, la tester pour de meilleurs clients et de faire un travail extraordinaire, en apportant une valeur ajoutée, d'accord ? Parce que c'est ce qui vous permettra de vous démarquer de la foule. OK, alors maintenant comment y remédier. Il existe en fait deux façons de résoudre ce problème. Maintenant, ces problèmes sont en fait causés par une chose très simple. Il existe une solution qui consiste à cliquer sur la couche, à cliquer avec le droit de la souris et à créer des formes à partir de texte. Maintenant, cela va régler le problème. C'est maintenant la solution numéro un. Disons simplement qu'il y a un paragraphe entier, ce qui va retarder votre système. Vous souhaitez conserver la couche de texte réellement préservée. Ce que vous pouvez faire, c'est double-cliquer ici , puis vous devez simplement sortir la case inférieure comme ceci. OK ? Et vous pouvez aussi le faire tomber un peu comme ça. OK ? Et ensuite, actualisons-nous. Appuyons à nouveau sur notre exportation et revenons sur le test. Remplaçons simplement notre fichier. Appuyons sur Render. Attendons juste une minute et voyons comment cela va se passer. OK, donc le fichier a explosé. Allons-y et testons notre nouveau fichier. Cliquons ici et passons à celui de Lottie Lab. Ouais. Il suffit de glisser-déposer notre fichier. Zoomons et voyons, notre problème est résolu. Il est assez simple de ne rien faire pour compliquer les choses, mais juste un moyen de résoudre un problème très complexe dont vous trouverez peut-être pas la solution sur Internet, et cela n'a été appris que par l'expérience OK. Un autre problème auquel vous pourriez être confronté est que cela se produit généralement lorsque vous travaillez avec des dégradés, non avec des couches solides Ce qui se passe réellement, c'est disons simplement qu'il y a ce dégradé ou disons simplement qu'il y a cette couche de forme, d'accord ? Et nous avons une très belle couleur dans le dégradé. Maintenant, en gros, ce qui se passe réellement, c'est qu'il suffit de le faire glisser dans un cadre. Permettez-moi de le mettre ici. OK. Permettez-moi de l' envoyer à After Effects. Maintenant, ce qui va se passer , c'est que parfois le dégradé est vraiment beau ici. n'y a aucun problème dans votre design et tout semble parfait. OK ? Maintenant, lorsque vous exportez le fichier, lorsque vous le prévisualisez ici, le fichier aura une apparence parfaite n'y a aucun problème, mais lorsque vous le testerez sur le site Web, vous serez confronté à un problème vraiment étrange. Par exemple, ce rectangle rouge va être orange, ou il va être vraiment noir. Et vous n'êtes qu'un casse-tête, vous allez juste revenir ici, vérifier les couleurs et voir si vous avez ajouté un dégradé ici. Mais il n'y a rien. Il n'y a aucun effet, rien. Tout est parfait. Dans ces scénarios , il vous suffit de supprimer la couche, accord ? Supprimez-le simplement. Ne supprimez pas le champ, ajoutez un autre remplissage. Non, ça ne marchera pas. C'est juste une sorte de problème dans le code parce que c' juste un fichier Json à points qui est essentiellement un fichier JavaScript à points, n'est-ce pas ? Et il y a une sorte de code qui se produit réellement Donc, ce que vous devez faire est simplement de créer et de sélectionner votre outil de rectangle. OK. Allez-y et créez la forme. Et puis ce que vous pouvez faire, c'est que si vous avez du mal à le copier d'ici, allez simplement dans votre figma, cliquez dessus Vous pouvez copier la valeur à partir d'ici. Alt, cliquez ici. Voilà la valeur ici. Appuyez sur OK. Corrigons notre dégradé très rapidement comme ça. Ou parfois, il arrive également que le positionnement du dégradé soit également perturbé. Donc, dans ces cas, vous devez utiliser cette méthode au lieu de simplement réorganiser le dégradé , car parfois cela ne fonctionnera pas aussi bien Vous allez également copier cette couleur, cliquez ici. Alors juste la valeur comme celle-ci. Plutôt simple, pas trop compliqué. Et s'il y a des dégradés vraiment très compliqués et que vous ne pouvez pas vraiment recréer le dégradé ou s'il y a plusieurs couleurs ajoutées, ce qui n'est pas fondamentalement possible à ajouter ici, peut-être qu'il y a un flou venant de cette direction, un flou venant de cette direction, Ensuite, il suffit de cliquer sur le calque, de l'exporter au format PNG et d'ajouter ce PNG. D'accord, essayez de communiquer ces informations au client avant de continuer, car vous pouvez simplement lui dire que c'est une erreur de code, pas votre problème, et que vous n'êtes pas un expert, en fait, mais que vous savez comment corriger l'erreur. OK, donc ça explique tout. Et maintenant, en ce qui concerne l'animation Cryptia, il y a quelque chose que je dois vous montrer C'est cette animation d'en-tête. Je pense que cela contient l'animation que je veux vous montrer. Laissez-moi m'assurer que c'est bien celui-ci ? Oui, c'est celui-là. Geko est donc très intelligent ce sujet et dans la façon dont il a réalisé le design, car nous en avons déjà discuté auparavant et je devrai également animer les chiffres. Donc, en gros, il a tout créé en 11, un, deux, deux, trois, trois, trois, trois, quatre, 44. Maintenant, vous pouvez recréer l' animation numérique de deux manières . En gros, vous pouvez simplement les copier toutes les mettre dans un cadre, puis les intégrer dans votre After Effects Il suffit ensuite de les convertir en couches de forme, puis les décaler comme ceci. Une seule solution. Une autre solution est également assez simple, pas vraiment trop compliquée. Alors permettez-moi d'aller de l'avant et de vous le montrer également. Tout d'abord, jetons un coup d'œil à cela, puis je vais vous montrer la solution. Le numéro est là. Après cela, nous avons les 10561, 794, vous pouvez voir que tout se passe ci-dessus pour correspondre aux chiffres nécessaires. C'est assez simple. OK. Rien de trop compliqué. Et il existe un autre moyen un peu plus rapide de le faire , c' est-à-dire de fermer ceci. Et laissez-moi également vous montrer comment créer l' animation Number Climb. OK. Allons-y, cliquez sur la couche de texte à 5 785 OK. Maintenant, ce que nous allons faire, c'est passer dans le panneau « Allons-y » et utiliser notre panneau Effets. OK. Ensuite, nous allons simplement l'agrandir. Allons-y et cherchons le curseur. OK ? Maintenant, je vais ajouter ce curseur ici Maintenant, vous vous demandez peut-être comment allons-nous faire en sorte que cela fonctionne ? C'est assez simple, ne vous inquiétez pas, nous allons l'obtenir. Et ce que je vais faire, c'est essentiellement le relier à mon slider. C'est assez simple. Ensuite, ce que vous devez faire, c'est simplement ajouter un tour de calcul par points. C'est ça. OK. Et s'il y a une erreur, vous pouvez simplement faire une capture d'écran de cette partie car je ne travaille pas avec trop d'expressions, donc je risque de me tromper. Vous pouvez continuer sur le Web et simplement copier-coller ceci et demander simplement de corriger cette expression. OK ? OK, vous devez donc ajouter une valeur de point. Maintenant, il est écrit : « Si pilote contrôle la valeur du point, il suffit de le copier ». Voyons juste si cela fonctionne. Cela fonctionne. Solution assez facile. OK. Faisons-le simplement glisser. Waouh. Cela fonctionne. Cela fonctionne vraiment bien. Maintenant, disons simplement que notre numéro était dont je ne me souviens pas exactement, alors regardons simplement le 5785 OK. Mettons-le à zéro. Cliquez sur l'image clé, appuyez sur U, et considérons simplement que mon animation doit durer 1 seconde, cinq, sept, 85. C'est très simple. OK. C'est assez simple. Appuyons simplement sur notre clavier. Maintenant, il va falloir que je continue. Maintenant, il suffit de cliquer avec le bouton droit de la souris ici pour créer des formes à partir de texte. Allez-y, une image-clé, faites la même chose. Prenez une image-clé à l'avance, faites la même chose et faites-le jusqu'à ce que nous en ayons fini avec toutes les images-clés D'accord, ils sont donc créés. Maintenant, je vais simplement désactiver mon calque comme celui-ci , car vous devez le conserver dans la composition jusqu'à ce que le projet ne soit pas terminé, car le client peut demander que le numéro soit modifié Vous pouvez donc simplement continuer et le faire. Maintenant, je vais juste recadrer les couches. Maintenant, nous allons simplement appuyer sur la touche d' effet en appuyant sur E. Nous devons supprimer ces glissières. OK. Et je pense qu'il existe également un moyen plus rapide de le faire. Alors laisse-moi essayer. Voyons voir si cela fonctionne. Je ne sais pas vraiment comment cela devrait être fait. Alors pardonne-moi. Non, ça marche. Donc oui, cela fonctionne, puis vous pouvez simplement décaler les images clés comme nous travaillions sur notre onglet précédent. Revenons aux valeurs par défaut , puis séquençons simplement les couches comme ceci. OK ? Alors, nous allons juste avoir un aperçu de notre animation. Donc, ça a l'air vraiment sympa. Et maintenant, comme nous n' avons que neuf ou dix couches de couches de forme, cela ne retardera pas. Cela n'augmentera pas la taille du fichier. Cela fonctionne vraiment bien. Je l'ai fait plusieurs fois. C'est donc quelque chose que j'ai dû enseigner également. Et c'est en gros ça. Et à part cela, il y a juste quelques animations simples que je peux également vous montrer. Il ne se passe pas vraiment grand-chose. Quelques masques sont simplement ajoutés à la même image, puis les drapeaux flottent simplement. Des trucs simples. Allons-y et regardons notre section suivante. OK, donc l'animation avec le même numéro. J'ai utilisé la même carte que celle de l'autre animation précédente, son animation, puis je l'ai simplement ajoutée ici. Vous pouvez voir que l'animation est ajoutée ici, et je n'en ai extrait qu' une partie ici. Ensuite, il y a juste cette ligne de trajectoire de rêve, une animation de base pour redimensionner ou ajuster la trajectoire sur les lignes, puis c'est tout. Rien de trop compliqué. C'est assez simple. Ensuite, nous avons cette autre animation. C'est celui-ci. OK, nous allons résoudre le problème ici, pour que vous le sachiez également maintenant. Après cela, nous avons eu ce problème sur la couche de texte. Vous pouvez voir que j' augmente la taille de la boîte parce que c'était un peu comme ça. Je l'ai donc beaucoup augmenté pour résoudre le problème. OK. Des trucs simples, rien de trop compliqué. L'animation est également assez simple. Cela a été fait personnage par personnage car il n'y avait pas trop d'autres éléments. J'ai donc simplement créé le texte Shaplayer, puis tout décalé une image clé à la fois. C'est ça. Des trucs simples. Rien de trop compliqué. Et puis une simple animation à l'échelle sur ce bouton. OK. Ensuite, nous avons cette section six, qui est cette animation de portefeuille. C'est assez simple, juste un coup dessus. Vous pouvez voir que c'est essentiellement masqué, non ? Fondamentalement, le portefeuille avait en fait une seule forme. J'ai donc simplement supprimé la partie supérieure, recréée d'un trait se peut donc que vous deviez parfois faire quelques petites itérations dans le design Lorsque vous exécutez une animation. Ensuite, il n'y a qu' une simple animation, non ? Rien de trop compliqué encore une fois. Ensuite, j'ajoute simplement une animation de rotation et une animation de mise à l'échelle ici. Des trucs assez simples, rien de trop compliqué. Et puis nous avons ce très bel effet avec l'effet H, en gros. Donc, lorsque cela arrive, ce qui se passe réellement c'est que ce cadre s'anime réellement OK, allons-y et jetons un coup d'œil. Vous pouvez voir que l'opacité augmente essentiellement. Rien de trop compliqué ici non plus . Des trucs simples. C'est très facile à faire. Le curseur s'anime tout seul, donc indépendamment des autres éléments, n'est-ce pas ? Des trucs assez simples, et c'est tout. Et si vous êtes curieux de savoir à quoi ressemble le site Web final, laissez-moi vous le montrer également maintenant. Et vous verrez à quel point les loteries sont optimisées en une minute. Tu vois ? Maintenant, je l'ouvre en mode incognor, afin que vous puissiez voir à quelle vitesse tout se charge Les animations fonctionnent très bien, très bien, non ? Des trucs assez simples, vraiment bien faits. Tu vois comme tout ça est beau, non ? Des trucs simples. Et encore une fois, un grand merci à Jakafz pour avoir créé ce projet incroyable Et c'était vraiment une excellente collaboration. Et l'animation en pourcentage sur ces sections réelles se fait également de la même manière. Même chose. Et oui, en gros, c'est ça. Voilà pour ce cours. On se voit dans le prochain. 6. Outro: Félicitations pour avoir terminé ce dernier cours. J'espère que vous avez appris tout ce que j'ai enseigné ici. S'il vous plaît, entraînez-vous et faites-moi savoir si vous avez besoin d'aide. Tu peux toujours me contacter sur Instagram. Vous pouvez également consulter mon LinkedIn questions, si vous avez des confusions, si vous avez besoin d'aide pour le projet, n'hésitez pas à me contacter J'adorerais vous aider. Assurez-vous de soumettre des œuvres. Et taguez-moi aussi lorsque vous créez quelque chose de vraiment sympa. J'adorerais également revoir votre travail. S'il y a quelque chose de nouveau à enseigner à Lottie, j'adorerais créer un autre cours S'il y a quelque chose que j'ai oublié dans les cours, merci de me le faire savoir, et peut-être que j'en créerai un autre. Mais je crois que cela couvre tout, et maintenant vous êtes prêt à devenir le meilleur créateur individuel. Bonne chance à tous et bonne chance. J'espère que j'enseignerai également de nouvelles choses, alors restez à l'affût. Mais Lottie est maintenant complète, et je te souhaite tout le meilleur On se voit dans le prochain. Prends soin de toi. Au revoir.