Guide du débutant pour créer des animations d'interface utilisateur.

1. Intro: Bonjour à tous et bienvenue dans notre cours Lottiefiles Avant de commencer le cours, je voudrais d'abord me présenter. Je suis Bolt Bite et je crée LottieAnimations depuis environ J'ai créé plus de 100 animations, comme vous pouvez le voir ici sur mon profil. Et je suis l'un des meilleurs créateurs de la plateforme Ratifies. Et je suis aussi le gagnant officiel du tournoi Lottiefiles Mon animation a été téléchargée plus de 20 000 fois dans le monde entier. Dans ce cours, je vais vous apprendre à créer votre propre première animation Lottie et à vous y lancer 2. Cours 01 : qu'est-ce que les lottiefiles ? Quelles sont ses utilisations ?: Bienvenue chez Cover First Class. D'accord, dans ce cours, nous allons abord voir ce que sont réellement des animations de loterie et pourquoi nous donnons-nous la peine de les apprendre Nous voici donc sur lottiefiles.com. Et comme nous pouvons le voir dans la première chose que nous voyons sur la page, ce sont des animations légères, légères et évolutives pour vos chiens et vos terrains, des sites Web et des applications mobiles, ou des applications et des publicités, des réseaux sociaux et tout le reste. partie la plus importante est donc le site Web et les applications mobiles. OK, alors laisse-moi te dire comment et pourquoi. Tout d'abord, voyons combien de grandes entreprises utilisent les animations Lottie Comme vous pouvez le voir ici. Que fait réellement Lottie ? Jetons donc un coup d'œil ici. Ici, il est indiqué que c'est la nouvelle norme de l'industrie. Voyons voir. Comme vous pouvez le voir, il existe une animation au format GIF, qui fait 598 Ko de kilo-octets Et il y a une animation Lottie yes, qui fait 66 Ko de kilo-octets, et il y a Donc, en gros, à 9  % de petite taille dans le fichier. Supposons donc que nous devions créer un AP contenant dix animations. Alors pourquoi essaierions-nous de créer des animations de loterie ? La raison en est que, disons simplement que lorsque l'animation est de 600 ko, c'est comme ça, et que nous la multiplions par dix, elle devient 6 000 Ko, ce qui se divise en 1024, parce que c'est ce qui équivaut à un Mo. Ça devient 5,8 et b, c'est vrai. Ce sont donc des fichiers vraiment énormes qui seront ajoutés aux applications mobiles. Et les développeurs ne veulent pas que cela se produise. Les créateurs ne veulent pas que cela se produise, que la taille des fichiers des applications soit simplement plus grande à cause des animations. Ce n'est pas vraiment une bonne approche. Et il y a plusieurs raisons à cela. Pas seulement la taille du fichier, abordons-y également. Disons simplement qu'au lieu de cela, il y a eu 66 animations contre la gale, mais il y en avait dix Ce ne sera donc que 660 ko, soit moins d'un Mo. Il existe donc des applications comme Duolingo et il y a également une mention spéciale de Duolingo Parce que Duolingo utilise beaucoup d'animations de loterie. S'ils étaient censés utiliser des animations GIF ou GIF, la taille de l'application serait double ou triple. Il est très important que nous gardions cela à l'esprit également. Donc, et l' utilisation des animations de loterie présente de multiples avantages Tout, bien qu'il y ait aussi des avantages. Et nous y reviendrons également très bientôt. OK, alors lançons notre Adobe Illustrator très rapidement. Et laissez-moi simplement vous montrer ce que j'entends exactement par avantages ? Comme vous pouvez le voir ici, il propose des animations légères et évolutives pour vos applications et sites Web. Qu'est-ce que cela signifie par éclairage évolutif avec animations ? OK, donc une animation évolutive signifie en gros que cela signifie que je vous montre très rapidement. D'accord ? Comme vous pouvez le voir ici, il existe deux types d'images, comme vous le savez peut-être. L'une d'elles est l'image matricielle. Alors, en gros, qu' est-ce qu'une image matricielle ? Entrez-y très rapidement en accédant simplement au dossier trop téléchargé et nous ouvrirons cette collection. Il existe un fichier JPEG. Faites-le glisser dans notre logiciel. OK, alors voici notre dossier et partons, d'accord. Ainsi, lorsque nous essayons de zoomer sur le fichier, comme vous pouvez le voir, il devient vraiment pixelisé et flou Donc, en gros, JPEG et PNG, tous ces formats sont des formats basés sur des images matricielles Mais il existe un autre format connu sous le nom de format vectoriel, dans lequel nous zoomons sur le fichier. Le fichier n'est pas flou. Maintenant vous allez, vous pourriez vous demander pourquoi cela se produit ? En fait, cela s' explique par le fait que le format vectoriel fonctionne sur la base d'une ligne de trajectoire comprise entre 0,8, entre le point a et le point B. Alors que les pixels ne sont pas débiteurs du mien. Format vectoriel, les pixels ont déterminé les images matricielles qui sont généralement capturées par les caméras OK, alors s'il te plaît, garde ça à l'esprit. Alors, oui. Donc, fondamentalement, il y a des avantages. Il peut arriver que vous créiez des animations pour des applications mobiles, qui s'afficheront peut-être sur ces écrans, sur de grands écrans ou peut-être sur des tablettes mobiles. Donc, en gros, vous n'aurez pas à penser à donner une taille de fichier différente aux clients. Vous n'aurez qu'à leur donner une taille unique et ils pourront facilement l'agrandir comme ça. C'est comme si j' agrandissais celui-ci. Comme vous pouvez le constater, cela ne va pas dans le bon sens. Mais s'il s'agissait d'une animation GIF, elle sera floue et se transformera en pixels et en une animation vraiment confuse Comme vous pouvez le voir ici, cette animation devient floue, non ? Ce n'est donc pas un moyen vraiment efficace. Et ce qui est surprenant, c'est que la taille la plus grande correspond au format GIF, qui devrait être plus petit, non ? Mais il n'en est pas ainsi. Pourquoi cela se produit-il ? En fait, la raison en est que l'animation de Lottie est essentiellement conforme au fichier Il s'agit essentiellement d'un fichier JavaScript JSON. Il convertit donc essentiellement l'animation en codage. Et c'est ainsi que fonctionnent les animations de la loterie. Donc, fondamentalement, le format vectoriel est déplacé par le biais du codage. Et dans le prochain cours, nous apprendrons que les fichiers de loterie peuvent être intégrés et comment nous pouvons les utiliser 3. Cours 02 : l'utilité des Lottiefiles Outils de création de Lottie: D'accord, nous sommes de retour et passons simplement à l'onglet d'intégration. Et cliquons simplement sur Explorer toutes les intégrations et plug-ins votre flux de travail de motion design OK, désolé, simplifiez votre flux de travail de motion design. Faisons donc défiler la page vers le bas et voyons ce que la Lottie a à offrir Lottie Integrations et Begginer's for sont OK, alors jetons un coup d'œil. D'accord, comme vous pouvez le voir, il existe de nombreux outils utilisés pour créer des animations de loterie. le cadre de ce cours, nous utiliserons Adobe After Effects pour créer des animations de loterie Maintenant, vous pouvez me demander pourquoi n'utilisons-nous aucun autre logiciel ? Et les raisons sont vraiment très claires et je vais vous dire quelles sont ces raisons maintenant, ouvrons chaque outil dans un onglet différent. Et comparons-les très rapidement. Bien, quittons Adobe After Effects pour le moment. Et c'est pour tous les pseudos, les puissantes animations de loterie de Figma, nous pensons que les animations de l'interface utilisateur Devrions-nous les créer là où vous les concevez et non dans nous pensons que les animations de l'interface utilisateur Devrions-nous les créer là où vous les concevez et non Tout d'abord, je ne suis pas du tout d'accord avec cette opinion car les designs qui suivent ont un objectif différent et les logiciels d'animation ont un objectif différent. Les logiciels de conception ne peuvent pas effectuer les deux tâches de manière très intuitive. Et je ne le recommande pas parce que les normes de l'industrie ne fonctionnent pas comme ça. Les grandes entreprises ne fonctionnent pas ainsi. Et les professionnels ne travaillent pas comme ça. Étant donné que les animateurs experts utiliseront des outils d'animation spécialisés pour créer de très bonnes animations, ils n'utiliseront pas les outils de conception Gardez donc à l'esprit que j'essaie de ne pas utiliser les plugins Figma pour créer des animations de loterie Ce n'est tout simplement pas utile. Et vous pouvez également utiliser Figma maintenant pour créer des animations de loterie Mais je ne le recommande pas vraiment non plus car il n'y a pas beaucoup de liberté créative lorsqu'il s'agit d'alléger les images-clés Parce que Figma ne propose pas de graphique I'm Speed Graph ou de graphiques de valeurs, mais fournit essentiellement une ligne de courbe de base Donc, en gros, c'est ce que vous pouvez contrôler. Vous ne disposez pas d'une liberté créative sur chaque image-clé et vous ne pouvez pas créer de mouvements complexes avec celle-ci Alors, s'il vous plaît, gardez cela à l'esprit. Laissons ça hors de la vente aux enchères. Puissant logiciel d'animation 2D pour Mac et Windows. Maintenant, il est dit : commencez, c'est gratuit. Passons maintenant à la tarification. Nombre de dollars par section par mois. Facturez chaque année. Les prix ne comprennent pas les taxes applicables et les taxes applicables et peuvent être téléchargés gratuitement et gratuitement pour toujours, aucun guide de crédit n'est requis. Alors oui, il suffit de voir l'apprentissage. OK, oublions ça, tout comme il s'agit de la conception des fonctionnalités, éclairage en temps réel que nous pouvons visualiser. Le truc de Bertrand, c'est que tu vas rester concentré sur ta créativité. Gestion facile des versions, d'accord, c'est bien. Programme créatif. Cela n'apporte aucune valeur ajoutée, je crois. flux de travail de bout en bout permet de passer facilement de l'illustration à l'animation. Et nous allons tirer le meilleur parti des fonctionnalités natives pour créer . Nous contrôlons les tuyaux en caoutchouc, les partages, les palettes de couleurs, la magie, le vieillissement, l'animation du texte, la duplication, la saisie de données. L'expert de Lottie a fait ses preuves. Nous allons donc payer pour les suites de Dynamics, Quad Tree OK, donc voilà, il y a de très bonnes fonctionnalités. Nous pouvons ajouter des commandes de montage et nous pouvons également utiliser des tuyaux en caoutchouc. Mais l'utilisation du logiciel présente un inconvénient. Il y aura des moments où vous devrez fournir des fichiers source aux clients. Et comme nous le savons tous, Cavalry n'est actuellement pas le logiciel le plus connu pas le logiciel le plus connu pour créer des animations d' interface utilisateur Mais Adobe After Effects propose une très bonne franchise qui permet de créer plusieurs choses. Également. Une autre chose à garder à l'esprit est que, s'il vous plaît, gardez à l'esprit que parfois les clients vous demanderont que parfois les clients vous demanderont de leur donner le fichier source du projet. Et quand vous lui dites que vous avez créé en cavalerie, se peut qu'ils ne puissent pas très bien l'éditer Et ils seront basés sur le moment où ils devront acheter un abonnement supplémentaire. Parce qu'Adobe a été acheté par des milliers ou des millions de personnes dans le monde entier. Cela ne dérangera donc pas le client de les modifier. Ou peut-être veulent-ils demander à leurs amis de le modifier ou peut-être engager quelqu'un d'autre. Et il est fort probable que d'autres créateurs ont également plus de chances d'avoir un abonnement Adobe After Effects plutôt qu'un abonnement à Cavalry Voici donc les raisons pour lesquelles, s'il vous plaît, essayez de garder à l'esprit que nous offrirons des services aux clients. Alors, s'il vous plaît, gardez cela à l'esprit. Et aussi une énorme raison. Une autre raison est que vous pouvez également effectuer plusieurs types d'autres tâches dans After Effects. Vous allez créer des vidéos explicatives. Vous pouvez effectuer plusieurs types de travaux. Mais dans la cavalerie, on ne peut pas faire ces choses. D'accord ? Cela limitera donc votre créativité de cette façon. Bon, passons donc à la préférence ou au motion design à portée de main. Comme vous pouvez le constater, il ne vous fournit pas non plus de graphique de valeurs. En gros, vous devrez sélectionner chaque image-clé individuelle, puis animer, c'est facile Donc, en gros, vous pouvez simplement sélectionner deux images-clés , puis les atténuer. Vous devrez les travailler séparément, ou vous pouvez simplement utiliser les deux options à partir d' ici, comme vous pouvez le voir, pour créer l'animation. Mais je ne pense pas que cela soit vraiment utile car vous allez utiliser plusieurs propriétés et les répliquer Ce n'est pas aussi rapide que nous pouvons le faire en comparaison avec Adobe After Effects After Effects propose plusieurs plug-ins , mais ces outils ne les proposent pas également. Jetons également un coup d'œil aux prix. Il y a une facture de 12 dollars de sperme par mois et par an, pour seulement 56. Dfp est une exportation. Et vous pourrez également exporter Lottie gratuitement. Et l'animation peut durer jusqu'à trente secondes. Trente secondes, c'est vraiment une super chronologie. Et vous pouvez vraiment essayer d'utiliser cet outil. Mais encore une fois, le problème du fichier source sera également présent. Si le client vous le demande, vous ne serez peut-être pas en mesure de lui donner une réponse heureuse. Alors, s'il vous plaît, gardez cela à l'esprit. Tu peux continuer et t'en servir. Mais comme vous pouvez le constater, il suffit de jeter un coup d'œil à la plateforme d'apprentissage. Comme vous pouvez le constater, il n'y a pas beaucoup de sources disponibles. Vous pouvez également consulter des milliers de didacticiels sur YouTube pour After Effects. Il y aura donc plus d'outils, plus accessibles et plus faciles à utiliser. À mon avis, je recommande vivement d' utiliser After Effects à coup sûr. En raison de ses énormes avantages. Vous Effects Animation Pour les concepteurs et selon le glucuronide, d'accord, donc celui-ci s'appelle flow, mais il a de gros problèmes Le principal problème est de perfectionner le motion design, créer des animations complexes et des éléments interactifs à l'aide de couches et éléments interactifs à l'aide de couches propriétés, et non d'images-clés Donc, en gros, nous n' ajouterons pas d'images-clés. Nous allons utiliser le codage. Mais c'est le travail d'un développeur, pas celui d'un animateur, non ? Alors oublions tout de suite cela. Et cet outil s'appelle Black Sinemet. Hum, je ne pense pas vraiment qu' il va offrir ce que nous recherchons car la limite est uniquement de donner des animations. Et ce n'est vraiment pas la bonne façon de choisir un soft simplement parce que nous ne pouvons que créer, créer des animations à partir de celui-ci ou des loteries à partir Alors oui, je ne le pense pas car il y aura des moments où les clients vous demanderont de créer des animations vraiment complexes. Il peut arriver que le client vous demande d'effectuer des tâches différentes et que vous aurez peut-être plus de mal à travailler dans ce bureau qu'avec Adobe After Effects. Et l'apprentissage d'Adobe After Effects est très utile pour vous ou pour d'autres compétences. Comme vous le serez, vous serez en mesure de réaliser plusieurs types de projets si vous avez appris Adobe After Effects. Donc oui, il s'agit essentiellement d'un bonus rapport aux animations Lottie dans After Effects Donc, oui, je le recommande sans hésiter, je vais certainement recommander After Effects. Allons-y et jetons un coup d'œil à Animator by Cu. Comme vous pouvez le constater, comment intégrer le motion design flux de travail de votre équipe ? Comme vous pouvez le voir ici, vous devez essentiellement ajouter des commandes vraies ou fausses. Je veux dire, ce n'est pas vraiment difficile, mais c'est quand même un peu délicat à utiliser si vous êtes un motion designer parce que vous n'êtes pas un codeur, non Donc, oui, je ne recommande pas vraiment celui-ci non plus. Il y en a une dans Inkscape et elle pose un très gros problème car maintenant, comme vous pouvez le voir ici, y a-t-il un didacticiel vidéo sur la façon d'utiliser cette extension qui existe déjà ? Dorian n'a aucune valeur Il n'y a donc pas fondamentalement une énorme communauté qui vous apprendra comment faire avancer les choses. OK, donc la prochaine, c'est la nervosité. Jitter propose essentiellement de nombreux modèles que vous pouvez utiliser pour créer des animations Mais lorsque le client vient vous voir et vous demande créer des animations personnalisées pour lui, vous risquez d'avoir des problèmes. Je pense donc que vous devriez être capable de sortir des sentiers battus et de créer vous-même quelque chose d' incroyable. Donc, oui, je ne le recommande pas non plus. C'est allez-y et vérifiez la forme en T. Et maintenant, la clé est vraiment inutile car en cas d'achat sur le Mac App Store, le plus gros problème concerne uniquement le Mac App Store. Un autre numéro n'est disponible que dans certains pays. Il est donc possible que votre client se dans l'un de ces pays où cela n'est pas autorisé. Donc pas bon du tout. OK, alors laissons ça hors de question. Et Adobe Animate n'est principalement utilisé que pour l'animation image par image. C'est ce que nous voulons faire dans le cadre de ce cours. Peut-être que c'est un sujet à aborder un autre jour ou peut-être que vous créez quelque chose de similaire à Animate, vous essayez de créer des animations vraiment complexes que vous ne pouvez pas utiliser dans Adobe After Effects Ce n'est qu'alors que vous en aurez besoin pour fonctionner. D'accord ? Alors, gardez également à l'esprit qu'il existe de nombreuses intégrations, mais que seule lottiefiles a créé une page dédiée à Il doit donc y avoir une raison à cela, non ? Comme vous pouvez le constater, créez une animation époustouflante avec le plug-in lottiefiles pour Adobe After Effects Ils ont également créé un plugin dédié pour After Effects. Donc, en gros, ils préfèrent également leurs utilisateurs utilisent After Effects pour créer des animations. En gros, vous pouvez tester vos animations dans After Effects sans même les télécharger , ce qui est vraiment bien Il y a donc des raisons de le faire dans After Effects, d'accord ? Donc, en gros, il vous suffit maintenant de télécharger un fichier de plugin et vous pouvez ensuite l' installer très rapidement. J'ai déjà installé ce plugin, donc je ne vais pas simplement le réinstaller. Je vous recontacterai donc dans le prochain cours, au cours duquel nous aborderons les fonctionnalités prises en charge et apprendrons comment démarrer 4. Cours 03 : site Web pour les conceptions Organiser des œuvres d'art.: OK, nous sommes de retour. Et comme vous pouvez le voir, un site Web est ouvert sur mon écran. Et cela s'appelle des illustrations gratuites XYZ. Et voici un autre site que je recommande vivement. C'est gratuit sur take.com. J'aimerais que vous vous inscriviez sur le site Web. Je vous recommande d' acheter l'abonnement et si vous ne pouvez pas vous le permettre, vous pouvez toujours cliquer sur le filtre gratuit. Et le troisième site Web est vector for free.com. Vous pouvez utiliser ces trois sites Web si vous ne pouvez pas créer vos propres designs. Parce que l'évaluation de vos propres designs vraiment bons nécessite de nombreuses années d'expérience et il vous faudra du temps pour apprendre à les dessiner Alors, s'il vous plaît, gardez cela à l'esprit. Tout d'abord. Et concevoir des logos, des icônes ou des illustrations est un autre art en soi, qui demande des heures d' efforts et des années de travail. Nous allons donc télécharger nos fichiers de conception , puis nous les animerons Ainsi, lorsque vous téléchargez un fichier, gardez à l'esprit que vous ne pouvez utiliser que trois formats. L'un d'eux est AI, le second est EPS et le troisième est SVG Veuillez ne pas utiliser d'autres formats car ils peuvent contenir des éléments d'image matricielle, comme nous en avons discuté précédemment. Gardez donc à l'esprit que nous n'utiliserons que EPS, de l'IA ou du SHA-512 Essayez maintenant de télécharger Figma ou GIF ou ces fichiers car ils ne peuvent pas vraiment fonctionner correctement avec lottieanimations Et l'objectif d'agrandir les animations est ruiné parce que les peg GIF DJ ne peuvent pas être redimensionnés ruiné parce que les peg GIF DJ . Et il existe des moyens de les importer dans nos animations de loterie. Mais alors la taille des fichiers augmentera tellement et il ne sera plus utile de créer des animations Lottie Donc, s'il vous plaît, évitez cela. D'accord ? Alors oui, il suffit de regarder autour de vous et voir dans quoi nous pouvons l'orienter de telle sorte que nous devrions le faire en milieu d'année. Comme s'il y avait plusieurs résultats, comme nous pouvons le voir ici. Choisissons donc quelque chose à partir d'ici. OK, donc j'ai vraiment aimé celui-ci. Ce sont des icônes vraiment plates et j'aimerais télécharger celle-ci. Téléchargez-le gratuitement. Ouvrez le fichier. Le fichier contiendra trois formats. Il y a très probablement du jetpack, c' est-à-dire de l'EPS, et il y a de l'IA Nous avons donc ouvert le fichier AI. Nous allons sélectionner celui-ci et nous allons maintenant copier et en ouvrir un autre, maladroit Sa taille est de 500 500 pixels. OK, donc oui, nous zoomons un peu et nous allons tout dissocier N'oubliez pas que nous devons organiser les illustrations dans Illustrator avant d' animer quoi que ce soit. Compte tenu de la base. Maintenant, séparons les couches en arrière-plan pour former un médaillon gauchiste distinct en appuyant sur la touche Ctrl pour que médaillon gauchiste distinct en appuyant sur la touche Ctrl le terme soit complet Vous pouvez également le séparer. Si tu veux séparer ça. Si tu veux, fais-le séparément. Et maintenant, après cette méthode, cliquez sur Faire une sélection. La couche est sélectionnée ici Je déverrouille maintenant le cercle violet Il vous suffit donc de choisir cette couche et de sélectionner ces trois gammes de hamburgers. Ensuite, nous passerons à cette option Release to Layers sequence. Ce qu'il fait, c'est essentiellement créer chaque élément dans une couche distincte. Donc, fondamentalement, chaque élément se trouve dans une couche distincte. Maintenant, nous allons simplement le sortir de la couche parent. Tout va donc de soi. OK, nous avons supprimé cette couche vide. En gros. Nous avons maintenant notre pouce dans différentes couches et nous pouvons maintenant l'animer. N'oubliez pas non plus que nous ne pouvons pas utiliser d'œuvres d'art vraiment complexes. Nous ne pouvons utiliser que des couleurs de remplissage et des formes simples. Vous ne pouvez pas utiliser d'effets vraiment complexes tels que 3D ou tout autre dégradé de liberté. Parce que nous allons essentiellement convertir ces couches en formes dans Adobe After Effects. Cependant, vous y arriverez en une minute. Mais pourtant, c'est ainsi que vous devez organiser vos œuvres d'art. Nous sommes maintenant prêts à l'animer. OK, donc nous le saurons, sauvegardez notre fichier. Et il doit être au format AAAI. Gardez cela à l'esprit, s'il vous plaît. Essayez de ne pas utiliser sag car SVG ne peut pas être importé sous forme de composition Sauvegardons-le en le nommant bouton et en l'enregistrant. OK, le fichier a donc été enregistré. Nous allons maintenant passer à After Effects et démarrer l'animation 5. Cours 04 : fonctionnalités prises en charge. Création d'animations.: OK, nous sommes de retour. Nous allons maintenant animer notre design. Alors allons-y. Mais avant de commencer toute animation, j'ai installé le plug-in lottiefiles et je me suis également connecté à Vous pouvez le faire simplement en cliquant ici. Il y aura un bouton de connexion et il vous suffira ensuite connecter au navigateur. Donc, avant de commencer une réunion, en concerne la conception, qui concerne la conception, il y a certaines choses à garder à l'esprit avant de le faire, et je vais simplement vous les expliquer maintenant. Tout d'abord, comme je vous l'ai dit ces animations sont essentiellement des loteries, les animations sont essentiellement des « oui » et des animations Donc, en gros, ce sont des fichiers de codage, d'accord ? Il y a donc des restrictions et il y a des choses que nous ne pouvons pas faire. Et quelles sont ces choses ? Eh bien, il existe des fonctionnalités vraiment incroyables d' Adobe After Effects que nous ne pouvons pas du tout utiliser. Et vous me demandez peut-être quelles sont ces fonctionnalités ? Eh bien, ces fonctionnalités sont moindres c'est créer une maquette et associer des hommes Il s'agit de créer un rectangle. Ou peut-être, OK, donc ce que nous ne pouvons pas utiliser c'est simplement entrer en vigueur et moins. Laissez-moi vous montrer que nous ne pouvons absolument rien perdre de ces effets. Tout d'abord, gardez à l'esprit que nous ne pouvons utiliser aucun de ces effets. Cela peut vous décevoir, mais il existe certaines restrictions car le JavaScript ne sait pas qu' After Effects contient des effets Parce que ces effets ne figurent pas dans le code, il s'agit essentiellement d'une création d'Adobe After Effects. Il ne s'agit pas d'un journal universel du langage JavaScript. D'accord ? Donc, en gros, lorsque l' animation est jouée, comme ici sur ce site Web, elle ne le sait pas. Le JavaScript ne sait pas qu'il a été créé dans After Effects ou ailleurs. Ça s'en fout. Dans chaque langue, nous devons suivre certaines règles . Les règles sont que nous ne pouvons pas utiliser un Effects d'Adobe After Effects. Voyons donc quelles fonctionnalités nous pouvons choisir et quelles fonctionnalités nous pouvons utiliser. Et gardez également à l'esprit que si vous comptez vraiment travailler en tant que professionnel, essayez de ne pas utiliser certaines fonctionnalités qui ne comportent qu'une seule croix et cinq coches. Veuillez n'utiliser que les entités qui ne comportent que des marques vertes sur tout le graphique. Pourquoi est-ce que je dis ça maintenant ? Parce qu'il m'est arrivé, et j'en ai été témoin moi-même, voir nombreuses animations sur la plateforme lottieanimations, qui s'affichent incroyablement bien sur PC ou sur le Web lorsque je les regardais sur mon ordinateur ou mon ordinateur portable Mais lorsque je me connecte à mon application mobile et que j'essaie de prévisualiser ces animations, ne fonctionne tout simplement pas parce que les gens utilisent parfois des alpha mats que nous ne pouvons pas utiliser et certains types de fonctionnalités supplémentaires, comme chemins décalés ou d'autres éléments qui fonctionnent sous Windows mais ne fonctionnent pas sur iOS ou Android. Essayez donc de ne pas le faire car, lorsque vous créez des animations pour des personnes ou pour vos clients, l'utilisateur peut utiliser n'importe quel type d'appareil. Vous devez donc d'abord garder cela à l'esprit. Tu es en train de résoudre leurs problèmes. Vous ne voulez pas qu'ils pensent que la façon dont cette aide a créé cette animation fonctionne quelque part, mais pas ailleurs. Et les développeurs penseront également que vous n'êtes pas professionnel parce que vous ne savez pas comment faire le travail sans erreur. Alors, s'il vous plaît, gardez cela à l'esprit. Utilisez uniquement les fonctionnalités réservées à la location. Il existe maintenant des exceptions, mais s'il vous plaît, s'il vous plaît, 99 % du temps, utilisez uniquement autoriser les enseignants sur tous les types de systèmes. OK. Alors Shape Layers ? Oui Il suffit de jeter un coup d'œil. Toutes les formes sont autorisées. Enfin, faites des rectangles inclinés. Polyester, le polyester n' est pas autorisé. Donc, nous pouvons regrouper les formes de notre dette, donc c'est bien. Nous ne pouvons pas utiliser individuellement les chemins de réglage évités par les répéteurs. En fait, je ne sais pas. Je n'ai pas vraiment eu de problème à utiliser Trim Paths lorsque je les utilise simultanément. Essayez donc d'éviter de les utiliser individuellement. Maintenant, je ne sais pas vraiment comment cela affectera, car j'ai essayé d'utiliser nombreuses pièces de dix cents sur mes animations, mais elles fonctionnent toujours parfaitement et je les ai également testées sous Windows Alors vérifions que maintenant ça échoue. Nous pouvons animer le visage en opacité des couleurs, en règle de remplissage, en dégradé radial ou en dégradé linéaire Ils sont donc tous parfaits. Mais nous ne pouvons pas utiliser de gradient de liberté car l'oxygène n'est pas disponible dans Adobe After Effects. N'oubliez donc pas que vous ne pouvez pas utiliser dégradés Freedom dans Adobe Illustrator OK, alors passons aux traits. Nous pouvons utiliser tout ce qui se trouve sur un trait ou une articulation multiple, ainsi que des jointures en ligne et des majuscules de ligne avec opacité, des dégradés et Transformez. L'orientation automatique n'est pas autorisée et vous ne pouvez pas vraiment fausser l'animation Donc, fondamentalement, le biais n'est pas non plus un outil vraiment utile. Nous ne le faisons même pas vraiment. Évitons donc cela et nous n' orienterons pas automatiquement le fichier ou nos couches. Nous allons animer la position séparément. X et Y sont également autorisés. L'échelle, la rotation, l'opacité du point d'ancrage, la parentalité, parentalité sont vraiment très utiles pour animer des choses Et c'est vraiment utile lorsque vous créez des animations de personnages. Cela sera donc très utile dans les prochains cours. Ensuite, il y a des interpolations de ce que signifie « intro » En fait, l'interpolation signifie qu'il existe plusieurs types d'images-clés dans Maintenant, quelles sont ces images-clés au fur et à mesure que vous faites l'expérience de ces images-clés Ce sont donc essentiellement images-clés linéaires que nous voyons actuellement Lorsque nous appuyons sur F9, elles deviennent des images-clés de Bézier. Et lorsque nous appuyons sur la touche Ctrl, ou que celles-ci deviennent des images-clés d'attente Et lorsque nous appuyons uniquement sur la touche Ctrl enfoncée, elles deviennent des images-clés à vélocité continue Donc, fondamentalement, tous les types d'images-clés sont autorisés dans les animations de loterie C'est la raison pour laquelle j' adore After Effects et je veux l'utiliser car nous pouvons désormais vraiment l' ajuster comme bon nous semble. Et il n'y aura aucun problème avec les animations de loterie. Et nous pouvons également modifier le graphique. Nous pouvons également modifier la valeur dans le graphique des valeurs. Il s'agit évidemment d'une position, nous devrons donc séparer les dimensions ici avant de l'animer D'accord ? Donc oui, nous pouvons certainement le faire en tant que, donc. Ce sont les quantités que nous offre After Effects. Encore une fois, allez-y et vérifiez les masques. Les masques sont autorisés, mais uniquement pour les fonctionnalités. Soustrayez, ajoutez l' opacité du masque et la trajectoire du masque. Alors qu'est-ce que cela signifie ? Quand créons-nous une forme ? Comme vous le savez, nous pouvons créer un masque à partir d' ici, mais en utilisant cet outil. Donc, en gros, nous pouvons animer ce masque comme ça. Nous pouvons animer celui-ci pour créer essentiellement une animation de style alpha mat Au lieu d'utiliser Alpha Matte, essayez d'utiliser des masques. vous plaît, n'essayez pas d' utiliser des tapis alpha car ils créent des problèmes vraiment compliqués. Nous pouvons donc animer la capacité du masque et utiliser l' option d'ajout et de soustraction sur Suivant À partir de là, nous allons utiliser le reste uniquement pour additionner et soustraire. Alors, s'il vous plaît, gardez cela à l'esprit. Allons-y et vérifions le mélange. Comme vous pouvez le constater, nous ne pouvons utiliser aucune de ces publicités car elles comportent des croix ou des points d'interrogation. Laissons donc Luma Matte hors de l'option et Luma Inverted Matte également hors option sur l' alphabet et le mat inversé alpha sont disponibles, mais uniquement Les utilisateurs auront donc des problèmes lorsque vous les utiliserez. Vous, lorsque les utilisateurs prévisualiseront vos animations sur Windows ou sur tout autre canevas Web Encore une fois, allons-y et vérifions le Much, mais c'est autorisé partout sur Windows, mais pas sur iOS. Alors n'utilisons pas ces effets de couche. Donc, en gros, les effets couche ne sont disponibles que pour les animations Web, mais pas sur Windows, iOS et Android. Nous ne les utilisons donc pas non plus, car vous pourriez créer des animations pour des applications mobiles à l'avenir. Et ce n'est pas une bonne habitude d'utiliser les effets de couche. Et après cela, il y a TXT pour le texte. Je ne voudrais vous donner qu'un seul conseil : veuillez convertir votre texte en couches de formes. C'est ça Essayez de ne rien faire d'autre avec votre texte cela créerait ou causerait des problèmes. Créez donc votre texte, finalisez-le et convertissez-le finalement en bonheur Bliss fonctionne partout. Je les ai également vus fonctionner sur iOS et Windows. Peut-être que s'ils sont convertis en les branchant, ils poseront problème, mais si vous les convertissez manuellement, ils ne poseront aucun problème En dehors de cela, il existe d'autres fonctionnalités qui sont des expressions. Les expressions ne sont pas autorisées. Ellipse, l'astuce pré-comp vous apportera de très gros avantages Puis combiner une scène compliquée. C'est donc vraiment une bonne nouvelle. J'essaie d'étirer ce n' est vraiment pas nécessaire parce que vous devriez créer l'animation comme elle doit être créée, pas simplement la créer en 1 s puis la rayer longuement, mettre en place dans l'option. Le remappage horaire n'est pas non plus autorisé. Échappons donc à leurs deux repères. Je n'ai jamais utilisé aucun d'entre eux, mais il y aura peut-être un diamant. Je vais les utiliser. Alors oui , d'accord, maintenant, une chose à garder à l'esprit, qui est vraiment importante, c'est que chaque forme doit être une forme vectorielle. Comme nous l'avons déjà vu, ces animations sont vectorielles évolutives. Donc, pour créer une animation Lottie sans faux, il est très important que, quelles que soient les couches que vous allez utiliser, elles soient ornées d'une étoile comme celle-ci. En gros, cette étoile signifie que la couche est un vecteur complet, d'accord ? Il s'agit donc essentiellement d'une couche de forme. Veuillez donc garder à l'esprit que cette étoile est disponible, sinon votre animation aura des problèmes. Maintenant, avant de commencer l'animation, j'ai remarqué un léger problème dans le fichier. Le fichier était essentiellement un dégradé linéaire. Ensuite, nous convertissons un dégradé en couches de formes dans After Effects. Ils ne fonctionnent pas vraiment bien. Ils deviennent gris et cela ne change pas de couleur. Donc, en gros, nous n' aurons qu' à utiliser des couleurs plates pour le moment. Dans ce cours, nous n'utiliserons que des couleurs plates. Il existe également des moyens d'utiliser le dégradé, mais cela nécessite des plugins complexes et c'est vraiment complexe à expliquer. Et ce sera trop pour ce cours pour débutants, mais nous en parlerons certainement dans les prochains cours avancés. Je vais donc juste changer la couleur en gras. C'est ça Nous allons maintenant simplement importer ce bouton dans Adobe After Effects. Ainsi, lorsque vous importez la pièce, gardez à l'esprit que nous utiliserons la composition, non le temps de métrage, mais que nous utiliserons l'option de décomposition Et nous allons choisir la taille de la couche et frapper. OK, et maintenant nous allons créer une nouvelle colonne. Nous allons le nommer. Animation. Bouton. Appuyez sur Entrée, et il ne fait que 500 à 500 pixels. Tout comme notre ADN. Nous allons maintenant accéder à notre composition de conception et copier toutes les couches en appuyant sur Ctrl C, et nous allons les coller ici, contrôle V, où vous fermez la composition de conception Nous allons maintenant sélectionner toutes ces couches et, comme nous le savons, il doit y avoir une étoile ici. Passons donc en revue cette grille d'options et passons à Créer des formes à partir d'une couche vectorielle. D'accord ? Donc, rien qu'avec cette clique, nous avons converti plusieurs couches en couches vectorielles. Nous allons donc supprimer les couches d' Illustrator. Et maintenant, avant d'animer quelque chose, il suffit de renommer Celui du bas est un cercle. Celui du milieu, c'est le poignet, je l'appellerai. Et la partie supérieure est BOM. D'accord ? Il y a donc n'importe qui qui fait des cercles et nos mains séparément. Notre animation aura l'air plus naturelle et plus intéressante. Nous allons zoomer un peu et je vais juste passer à la sixième image-clé. Je vais créer une autre image-clé et je vais passer au numéro dix, et je vais créer à nouveau une image-clé. Maintenant, il sera capable de trouver une position et notre étoile ne devrait pas partir de zéro. D'accord ? Donc, au milieu, il devrait y avoir une position de dépassement. Et je vais simplement sélectionner ces trois éléments et je vais les simplifier très rapidement et leur apparence. C'est assez bien. Maintenant, j'ai tous les risques médicaux et je veux les contrôler comme s'il s' agissait d'une seule couche. Mais je ne suis pas capable de le faire pour le moment. Alors, comment allons-nous nous y prendre ? Si nous voulons le faire, je crée simplement un objet nul. Ce qui est très simple dans After Effects si vous avez déjà utilisé non. Je vais renommer celui-ci et l'appeler main CTRL C. Ctrl signifie essentiellement contrôle . Et lorsque nous truquons des personnages, en gros, c'est l'universel Je suis un code utilisé pour les manettes. Et je vais associer ces deux couches à cette manette que j'ai créée au poignet. OK, maintenant c'est breveté. Il ne vous reste plus qu'à animer cette manette. J'admets sa rotation et son échelle. Ouvrons donc ces deux propriétés et je vais créer et définir vos images-clés J'ai créé ma première image-clé qui me permettra également de créer le dépassement de positions intermédiaires J'ajouterai peut-être plus de rotation d'ici dix. Et la position de départ pourrait être prise par le haut. Je pense que Will entrera dans le cercle en percutant Resserrer la valeur à -45 degrés. Ce chiffre sera réduit à zéro. Cela va pousser jusqu'à 110 % de l'échelle, et je vais les utiliser tous Voici à quoi ça ressemble. Parfait. Maintenant, je ne veux pas que tous les éléments apparaissent en même temps. Je voudrais donc peut-être ajouter un peu de suivi. Et je voudrais ajouter un peu d'écart entre les différences. OK. Avant de le faire, je voudrais d'abord vous dire que chaque fois que vous créez des animations pour votre portfolio, gardez à l'esprit que vous créez ces animations dans des boucles parfaites, comme celle-ci que j'ai créée. Et sur mon profil, il y a peut-être une ou deux animations qui ne sont pas en boucle parfaite. Mais j'en ai créé 100 pour des animations au total, qui ne sont pas Profile. Et des centaines le sont. Je suis absolument sûr que des centaines d' entre elles sont des boucles absolument parfaites. Ainsi, lorsque vous créez vos animations pour votre portfolio, gardez à l'esprit qu'il est préférable de créer des boucles parfaites, car les utilisateurs pourront les utiliser plus facilement que. Alors, créons simplement nos images-clés. Nous allons boucler notre boucle ici car il ne devrait pas y intervalle une fois l' animation terminée. Et maintenant, ça ne devrait pas revenir en arrière. OK, alors peut-être que nous irons encore plus loin pour que l'intervalle complet soit de 1 s et que l'animation se termine à 2 s de fin. Nous allons donc procéder avec quatre images-clés, 1234. Nous allons copier ces images-clés une par une copier-coller Control C et Control V. Et je vais continuer Puis des films Q d'ici. Et je vais également les coller un par un. D'accord ? À présent, notre animation est parfaitement créative. Maintenant, ajoutons-en quelques uns. OK, donc comme vous pouvez le voir, ajouter un peu d'espace, ça donne vraiment beaucoup d'effet. Cela rend donc les choses plus alignées et plus claires. Et le traçage fonctionne vraiment bien. Cet élément vient après l'autre. Donc ça a vraiment du sens. OK, il semble qu'il y ait du désordre. Lorsque le cercle apparaît à l'écran et que le bouton J'aime apparaît, le résultat est parfait Mais alors, quand est-ce que le cercle s'arrête ? Le terme général a l'air bizarre. Je pense qu'il vaudrait mieux que la langue passe en premier. Je viens donc de le ramener à référence et ils sont dans le même état. Je ramène donc simplement ces deux images-clés, voire deux images-clés Il faudra donc leur donner les États-Unis de chaque côté. Maintenant, vous n'avez plus qu'une boucle. D'accord ? Alors maintenant, vous pouvez voir que ça a l'air bien mieux, non ? OK, alors maintenons notre en-tête à 1 s et 23 images-clés et sur N. Et maintenant c' est une boucle parfaite de 2 s. Comme vous pouvez le constater, notre animation semble parfaite. Il est maintenant temps d'exporter notre animation au format Lottie. Avant de faire cela, nous allons simplement actualiser ce bouton pour observer les fonctionnalités du observer les fonctionnalités du plugin lottiefiles Et cela se ressent dans toutes nos chroniques. Je ne suis toujours pas sûr que decomp, qui est ouvert ici, affichera toutes les colonnes disponibles dans un projet Alors, s'il vous plaît, gardez cela à l'esprit. Maintenant, notre composition de boutons d'animation est celle qui contient plus d'animation Alors allons-y et cliquez sur le bouton Paramètres. La première option concerne les métadonnées Lottie. On s'en fout d'ici. Laissons donc simplement qu'il existe une option d'expression. Comme vous le savez, nous ne pouvons pas utiliser d'expressions, mais il existe une option qui nous permet d'utiliser des expressions puis de les convertir en images-clés Mais elle va augmenter aux yeux de Lottiefile. Ce que nous ne voulons pas faire. Après cela, il y a des actifs. En utilisant l'option assets, nous pouvons inclure des images dans une animation Lottie, mais nous ne voulons pas l'utiliser car les images matricielles ne sont pas vraiment une bonne chose pour Il y a quelques exceptions, mais seulement le moment venu, nous ne l'utiliserons que le moment venu. Ce ne sera donc pas le cas dans 99 % des cas. Laissons donc cela et sélectionnons d'exporter les couches cachées. Il n'y a pas de couches cachées. Les couches savent qu'il n'y a pas d'expressions sélectives et pointent vers des compositions externes Non, elles ne sont pas si anciennes et appuient sur Enregistrer Nous allons maintenant continuer et cliquer sur la flèche. Et comme vous pouvez le constater, notre animation est parfaite. Et il y a un bouton de téléchargement, d'accord, dessous, nous pouvons économiser sur l'espace de travail Animation. Vous devez créer un espace de travail, puis appuyer Télécharger et l'animation sera téléchargée dessus. OK, notre animation est maintenant téléchargée. Mais quand on y jette un coup d'œil, comme vous pouvez le voir, la suranimation ne fait que 5,8 ko. Et la taille foncée de 1,8 Kb de Lottie est vraiment incroyable. D'accord ? Nous pouvons donc télécharger une animation en cliquant sur ce bouton au format JSON. Et nous pouvons l'envoyer au client en le téléchargeant ici. Peut-être s'il s'agissait d'un projet client. Après la panne de celui-ci, il existe une fonctionnalité de support Jaeger, comme nous pouvons le voir, aucun problème n'a été trouvé il existe une fonctionnalité de support Jaeger, comme nous pouvons le voir, aucun problème n'a C'est vraiment une bonne nouvelle car nous n'avons utilisé que les vainqueurs autorisés par les animations Lottiefiles C'est pourquoi il n' y a aucun problème. OK, nous étions habitués aux fonctionnalités. Comme vous pouvez le voir ici, il vous montrera tout. Mais nous n'avons utilisé que les fonctionnalités qui sont très bruyantes. Donc c'est vraiment génial. C'est la raison pour laquelle je vous ai dit de n'utiliser que les fonctionnalités autorisées par lottiefiles Et ci-dessous se trouve un graphique aléatoire, que je n'ai jamais utilisé. Et je ne sais pas ce que cela signifie réellement, car ce n'est peut-être pas plutôt le travail d'un développeur. Et en dessous, il y a la couleur de fond que nous pouvons changer, mais absolument pas, nous ne changerons pas car notre animation doit être composée chambres transparentes afin que les gens puissent les utiliser où bon leur semble sans modifier l'arrière-plan Et le transfert Begginer's leur permettra de l'utiliser très facilement sur les sites Web et les applications mobiles Donc, en gros, même lorsque vous avez peur, les animations doivent être des arrière-plans transparents. Allons-y simplement sur notre site Web, nos animations publiques. Et ça va aller dans un autre cours. Il suffit de rafraîchir notre page. Et comme vous pouvez le voir, l'animation est ici. D'accord, voici donc quelques fonctionnalités que nous pouvons utiliser. Nous pouvons vraiment recolorer, ou nous pouvons également créer des couleurs de chambre à coucher. Nous pouvons les activer en tant que hotlinks. Donc, en gros, comme vous l'avez dit, il s' agissait d'une animation exclusive que vous avez créée uniquement pour votre ami. Tu vas vouloir le montrer au monde entier. Il vous suffit de l'activer au fur et à mesure que vous êtes propre. Et puis vous copierez le lien d'ici et qui apparaîtra. De cette façon. Vous pouvez également l'utiliser à partir d'ici et copier ce code. Et vous pouvez simplement envoyer ce code à votre ami développeur. Et ils pourront facilement l' ajouter à leur effet. Donc si nous le faisons, tu ne veux pas le faire. Vous souhaitez peut-être le mettre en ligne au public. Vous pouvez le faire en appuyant le bouton de partage et en venant publier dans la communauté. Et vous pouvez cliquer sur Publier. Et à partir de là, vous pouvez ajouter un titre, peut-être comme le bouton J'aime. Vous pouvez ensuite télécharger votre fichier After first, ce dont vous n'avez pas besoin. Ensuite, il y a les tags. Tu auras peut-être de la chance. Peut-être comme une matraque, peut-être une animation, peut-être une boucle Cela augmentera donc les chances que vos animations de loterie soient téléchargées Vous pouvez donc en ajouter autant que vous le souhaitez, peut-être le plug-in Lottie pour Adobe After Effects spatialement dans lequel nous baliserons les outils que nous avons utilisés Nous utiliserons Adobe After Effects parce que nous l'avons également utilisé. Vous pouvez également utiliser Illustrator. S'il existe Illustrator, ces options n'existent plus maintenant. Alors dormons là-bas. Nous allons taper ici une description de notre animation, qui est l'animation d'un bouton J'aime. Et nous respecterons les directives confirmées et nous serons en mesure de publier, d'avoir de l'animation. Et c'est ainsi que vous pouvez créer vos propres animations de loterie. Et je vous souhaite bonne chance pour créer votre première animation Lottie publier, la partager avec vous, commencer à attirer l' attention et créer un très bon portfolio. N'hésitez pas à me taguer lorsque vous créez vos premières animations, Gagne sur les réseaux sociaux et mon profil sera Bolt Bite J'ai donc hâte de critiquer l'œuvre. Et s'il vous plaît, ne vous découragez pas en pensant que mon travail est vraiment incroyable Gardez à l'esprit qu'il s'agit d'animations de collection et que leur réalisation a demandé beaucoup plus de temps et d'efforts. Ces animations nécessitent de quatre à cinq heures d'utilisation d'After Effects. Il y a plusieurs couches Ce n'était donc pas un cours approprié pour enseigner autant de travail, mais je vais certainement proposer cours plus avancé dans lequel j' enseignerai ce genre de choses. Et tu n'as pas à t'inquiéter à ce sujet. Ils seront disponibles très prochainement. Et vous pouvez peut-être vous entraîner en attendant avec des icônes de plus en plus simples, comme je l'ai fait. Les gens adorent donc aussi vraiment ces animations. Et ceux-ci ont également été téléchargés depuis tellement de temps. Il y a 15 likes sur mon animation et c'est le cas Elles ont toutes été téléchargées plus de 100 fois ou plus de 50 fois. Ayez un peu de foi et commencez à animer des choses. Et je te verrai très bientôt. 6. Message final: Bonjour à tous, merci beaucoup d'avoir regardé mon tout premier cours. Je m'excuse pour mon anglais car je ne suis pas un locuteur natif. Et n'hésitez pas à nous faire part de vos commentaires sur le cours. Et mon objectif est d'atteindre dix étudiants uniquement avec ce cours. Et chaque fois que cela sera réalisé, je commencerai à travailler sur la deuxième courbe et elle sera publiée très peu de temps après Assurez-vous de me suivre sur réseaux sociaux pour obtenir des conseils et astuces importants. Et j'ai hâte de vous voir faire des animations. Et s'il te plaît, prends soin de toi. Et Bolt Bite sera bientôt de retour.