Graphiques animés pour les concepteurs d'interface utilisateur utilisant Principle pour Mac

1. Bienvenue dans le cours !: Salut et Bettina. Je suis concepteur principal, basé à Vancouver, urgences. Je travaille avec l'expérience utilisateur et la conception d'interface utilisateur pour les applications Web, et je fais aussi des animations graphiques pour les vidéos explicatives. Dans ce cours de culture, je vais vous apprendre à créer des animations pour l'interface utilisateur et le signe et ces cours pour vous. I concepteurs avec peu ou pas de fond en motion graphics. Nous allons commencer par parler des principes de l'animation et les meilleures pratiques pour l'interaction , design et pour le projet de classe sera animer une page de destination en principe pour Mac. Vous aurez besoin d'un Mac pour ce cours, et à la fin de ce cours, vous serez en mesure de créer une page de destination avec des animations, verticale et horizontale. Les effets de défilement surestiment les transitions et les lèvres. Comme ça, vous serez en mesure d'appliquer le signe de mouvement à n'importe quelle interphase sur laquelle vous travaillez pour le Web et mobile. Commençons 2. Objectifs d'apprentissage: Salut et bienvenue à la motion graphics pour vous. Je conçois la classe dans cette vidéo, je vais expliquer les objectifs d'apprentissage. Cette classe est divisée en deux sections. Tout d'abord, nous allons parler de l'avenir de l'animation et de ce qui fait une bonne animation. Ensuite, nous mettrons la fureur en pratique et animerons une page de destination. À la fin de ce cours, vous serez en mesure de comprendre les principes de l'animation et comment vous pouvez les utiliser pour mouvement dans vous que je conçois. Vous apprendrez comment utiliser le principal apt pour créer des effets de défilement verticaux et horizontaux pour prototyper des effets et des interactions, pour travailler avec plusieurs écrans pour créer des transitions et a dû exporter et partager votre prototype. Pour le projet de classe, vous recevrez un modèle d'une page de destination créée avec la fig MMA. Alors commençons. 3. Comprendre l'animation: Ok, maintenant commençons par comprendre. animation dans cette section parlera des principes de l'animation et de la façon dont nous pouvons traduire certains de ces principes en mouvement. Vous je conçois Les 12 principes de l'animation ont été présentés par les animateurs Disney tous les Johnston et Frank Thomas dans leur livre L'évolution de la vie. C' est à peu près la Bible de toute Judy et trois animateurs D là-bas maintenant. Il y a beaucoup de ressources est en ligne sur ce sujet, mais aujourd'hui je vais vous montrer les exemples présentés dans ces sites Les 12 Principes d' Animation qui tumbler dot com. Examinons rapidement, quels sont ces principes ? Numéro un, Squatch et Stretch. Ce principe vise à mettre l'accent sur l'élément du four de vitesse et de poids. Numéro deux Anticipation. C' est pour préparer le public à l'inaction. C' est un mouvement qui commence avant que l'animation principale ne se produise. Numéro trois de mise en scène. Il s'agit d'une présentation d'un objet d'une manière claire. Cela permet au public de se concentrer sur l'objet et d'éviter la destruction. C' est la plus remise dans l'interface utilisateur. Quand vous pensez à l'entrée d'une animation, cela se passe-t-il au milieu de l'écran ? ou s'agit-il d'une étoile avant que l'objet n'apparaisse à l'écran ? De toute façon, il est important de vous assurer que l'utilisateur comprend ce qui se passe. Numéro quatre droit devant et posté l'air de l'deux approches différentes de l'animation tout droit devant. Les scènes sont animées image par image, tandis que les scènes postérieures s'opposent, commencent par les poses clés, puis reviennent à sentir les images entre les deux. Cela sera plus utile lors de l'animation d'illustrations ou d'icônes numéro cinq suivi et chevauchement de l'action. C' est, d'une certaine façon. Le contraire de l'anticipation est l'animation qui se produit après l'action principale. Ce principe vise à suivre la perte de la physique pour rendre les objets plus naturels, comme s'ils avaient un sens du poids ou du volume. Ce principe vise à suivre la perte de la physique pour rendre les objets plus naturels, Numéro six ralentit et ralentit l'assouplissement argumenté, et il est sorti, et vous utiliserez ce principe beaucoup. Dans la conception du mouvement et l'animation numérique. La facilité d'entrée peut être facilement ajustée avec une courbe plus occupée, et nous allons passer en revue et plus détaillés avec commencer à animer avec le principe numéro sept arcs. Ainsi, les mouvements les plus naturels suivent un mouvement de courbe animant sans courbes aura généralement air non naturel et moins fluide de sorte que la peau de l'arc viennent dans pratique, allé animer des rouleaux ou balayé pour simple balayage à travers les voitures Gauche et droite. Numéro huit. Action secondaire. Une action secondaire met généralement l'accent sur l'action principale. Dans le cas de vous, je ceux-ci pourraient être utiles, allé animer des curseurs ou des programmes, des barres ou tout autre composant qui rendra l'interaction principale plus claire. Numéro neuf Timing dans l'animation Ce principe fait référence au nombre d'images ou de dessins entre le début et la fin de l'inaction. Plus de cadres était bas. Les cadres sans fin d'action le feront paraître rapide. Mais en termes d'interphase utilisateur, la vitesse devient plus importante quand on parle de micro et micro animations. Numéro 10 Exagération. Cela améliore l'action mais la rend plus apparente et évite les animations de paraître ternes. Ainsi, par exemple, les choses peuvent être utiles lorsque vous fournissez des commentaires à l'utilisateur dans une fenêtre publique pour assemblé pour et je viens comme une cloche de notification. Numéro 11 dessins idiots en animation. Solar Germans signifie ajouter du volume et du poids aux objets de la scène, donnant à la scène un espace tridimensionnel. Donc, en vous, je peux interpréter cela comme la quantité d'élévation d'un composant et comment montrer clairement la hiérarchie des éléments et l'appel numéro 12, faisant quelque chose d'intéressant et de caractère. Ce sera votre style de mouvement. Ceci, d'une certaine manière, est une combinaison entre les contraintes du mouvement design et la personnalité de la marque avec laquelle vous travaillez. 4. Principes de synthèse d'animation: Maintenant que nous connaissons les principes de l'animation, faisons rapidement un résumé des principes qui peuvent être appliqués à la conception d'interaction afin que squash et l'étirement puissent être appliqués aux cônes et illustrations. La mise en scène peut être appliquée à l'interface assignée pour afficher clairement un objet à l'écran. Suivez à travers. Une action qui se chevauche peut être utilisée lors de l'animation de plusieurs composants, et aussi quatre je viens et des illustrations ralentissant et ralentissant peuvent être très utiles pour lisser vos animations. Et c'est probablement le principe que vous utiliserez Le plus d'arcs est bon pour les icônes et les illustrations et peut-être certains types de dessins d'interaction que vous pouvez animer avec lesquels vous pouvez créer des courbes. Le timing est intéressant, car en général, quand vous le faites, quand vous pensez à l'animation, vous penserez aux images. Cependant, quand il s'agit de mouvement conçu pour l'interface utilisateur, vous allez penser à combien de temps est une animation en millisecondes, et nous parlerons plus en détail dans une vidéo ultérieure et enfin appel. C' est donc votre style et la personnalité sur vos animations. Passons maintenant à la vidéo suivante, où je vais parler des éléments clés et des contraintes spécifiques à vous déplacer. Je conçois 5. L'illusion d'une interface utilisateur: maintenant vous êtes familier avec les 12e principes de l'animation. Parlons des principes de mouvement conçus pour vous. Dans les vidéos suivantes, je vais examiner les éléments clés à garder à l'esprit lors de l'animation d'une interface utilisateur . Parlons des principes de la conception de mouvement pour vous. I Cela diffère des 12 principes de l'animation en ce que ces aviateurs pour l'interactivité et vraiment ils sont les choses les plus importantes à considérer. Tout d'abord, vos animations doivent être efficaces. Ils ne doivent pas sacrifier la performance. Dans un monde où l'attention des gens est de plus en plus courte, vous devez vous assurer que vos animations ne prennent pas beaucoup de temps à charger sur l'écran. Deuxièmement, vos animations doivent être intuitives. Ils doivent avoir l'air naturel. Ils doivent se sentir familiers et attendus et être de retour par les lois de la nature. Tu sais, ils devraient épouser des choses comme l'accélération de wade , le volume, etc. Et enfin, vos animations ne doivent pas être une distraction. Le montant de la motion devrait être suffisant pour être significatif et justifié, et leur seul but est de faire passer l'intention et rien d'autre. Maintenant, c'était bon pour le monde vidéo suivant. Parlez de l'animation du four A durée de la transaction en vous 6. Duration: lors de l'animation pour vous, je parlerai de millisecondes par opposition aux frames. Et d'après ces recherches menées par un groupe normal de Nelson, tout ce qui est inférieur à 100 millisecondes ne sera pas assez visible pour l'utilisateur. Et tout ce qui dépasse 500 millisecondes prendra trop de temps et mon ennui de coût ou destruction. Donc, avec cela à l'esprit, j'aime généralement rester entre 100 et 500 millisecondes, comme ça en mouvement. Ouais, vous pouvez penser à deux types d'animation micro et macro animation, donc tout ce qui se situe entre 100 millisecondes et 300 millisecondes peut être considéré comme une micro-animation . Cela pourrait être des fondus de couleur sur les effets, Accordéons, astuces d' outils etc. et tout ce qui est à partir de 400 millisecondes sera. Considérez une animation macro. Cela peut être un Siris de composants dans une section et l'accouplement total, ou une transition d'une page à une autre page ou tout simplement en général, tout grand mouvement sur l'écran. Voici un exemple de la durée différente qui sera utilisée aujourd'hui. J' ai animé ces carrés pour se déplacer d'un côté à l'autre avec les différents types de durée, et cela devrait vous donner une idée des animations micro et macro comme vous pouvez le voir ici. Passons maintenant aux effets d'assouplissement 7. Donner de l'aisance: l' assouplissement est un autre aspect important de la conception du mouvement. Ceci est le vôtre abaissement et lent ABT, et il change l'animation du four de vitesse au fil du temps. Cela rend un objet plus naturel, car dans le monde physique, objets accélèrent et décélèrent encore plusieurs fois d'assouplissement. Mais pour le bien de cette classe sera en utilisant les trois types d'assouplissement les plus communs ese visant. Il est dehors et il est dedans et dehors. Vous pouvez ajuster les valeurs pour augmenter la quantité folle d'utilisation, en fonction de l'effet que vous recherchez. Mais le principe par défaut utilise le style d'assouplissement par défaut pour IOS. Mais je vous recommande d'essayer différentes valeurs et de voir comment cela affecte le sentiment de votre animation. 8. Fichier de travail: D' accord. Alors maintenant, nous regardons une certaine fureur. Il est temps de commencer l'ennemi. Je sais. Enfin. droite. Donc, pour cette classe ont créé un Sigma de classement, que vous aurez besoin de suivre le long maintenant, Principal est également compatible avec sketch. Donc, si vous êtes plus familier avec elle, n'hésitez pas à utiliser votre propre design et à appliquer simplement ce que nous allons faire en principe. Ok, alors jetons rapidement un coup d'oeil à un fichier de travail, et je veux mentionner quelques choses sont très importantes lors de la conception du mouvement en principe. Tout d'abord, assurez-vous que vos couches sont bien organisées. Je recommande d'organiser vos couches de haut en bas en suivant la position sur la vôtre sur votre conception. Ainsi, par exemple, votre barre de navigation serait en haut et à votre pied. Ce serait le bas, donc la couche de navigation serait en haut de la liste et la couche de pied de page serait en bas de la liste. Et cela rendra les choses beaucoup plus faciles lors de l'animation en principe. Et le second est très important de nommer vos couches correctement. Si vous n'animez pas un fichier qui a beaucoup de calques peut devenir vraiment désordonné très rapidement, et il serait très difficile de mettre à jour votre fichier à l'avenir. Assurez-vous donc que toutes les couches ont un nom clair et qui sont organisées par groupes ou sections parce que les doublons principaux des années de laïc qui seront animées. Donc tu ne voudrais pas travailler avec des noms comme Lay your Want ou 350 tu sais ? Assurez-vous donc de les nommer intuitivement, et c'est clair pour vous. quelle plainte vous travaillez. Ok, super. Maintenant passons à la vidéo suivante où nous allons passer sur l'interface principale et ensuite nous allons importer le fichier. 9. Princi : importer notre fichier: dans cette vidéo, nous allons prendre les principes de l'animation dont nous venons de parler, et nous allons les mettre en pratique. Commençons donc par nous familiariser avec l'interface de principe. D' abord à gauche, nous avons nos propriétés de calque et nous avons nos calques et à droite, nous avons notre fenêtre d'aperçu et nous pourrons jouer avec notre prototype. Et nous allons également pouvoir voir nos animations jouer en temps réel alors que nous éditons et modifions aussi les vallées et les propriétés des animations. Donc, en principe, il existe deux types de timeline les pilotes et l'animation, que vous pouvez faire continuer et éteindre fait comme ça. Ainsi, les animations se produisent entre les tableaux d'art et elles sont déclenchées par des événements tels que le haut ou le clic ou le survol à l'intérieur et à l'extérieur. Et les pilotes ne sont techniquement pas classés comme des animations. En principe, , ils se produisent à l'intérieur et dans notre tableau, et ils sont plus comme des effets de défilement ou traîner un ble. Laters. Donc, pour commencer, j'aime séparer ma fenêtre d'aperçu comme ça, et j'aime l'avoir sur le côté parce que sinon il est un peu dans la voie des tableaux d'art Thea . Et donc je vais bouger ma fenêtre comme ça. De cette façon, nous pouvons nous concentrer et travailler sur nos conseils ici et voir ce qui se passe en temps réel ici. Maintenant, allons de l'avant et importer sont fig mon fichier. Cliquez sur le bouton d'importation et le demandé de se connecter à notre compte féminin. Alors allons-y et faisons-le. Cela ouvrira une nouvelle fenêtre dans votre navigateur, et vous devez autoriser les axes à principe. Donc nous allons cliquer dessus. Et afin de s'assurer que c'était important le bon projet. Revenons à la Fig MMA, et cela peut être fait à la fois dans l'application de bureau ou l'application de navigateur. Donc, sélectionnons le cadre que nous voulons important et revenons au principe, et nous allons cliquer sur l'importation des cadres sélectionnés. Ok, donc maintenant nous sommes prêts à commencer à animer 10. Princi : défiler la page: Ok, donc voici notre page, et la première chose que je veux faire est de changer la taille du port de vue. Donc, pour ce faire, passons à la taille des presets et sélectionnez Fenêtre l'arrêt et le web. Ainsi, comme vous pouvez le voir ici, une fenêtre d'aperçu a été mise à jour en conséquence. Et maintenant, jetons un coup d'oeil à notre structure de fichiers pendant une seconde. Donc, partout dans les sections ou groupe individuellement et leur caché. Et si vous voulez les voir ou accéder aux éléments de rendement à l'intérieur, tout ce que vous avez à faire est de vérifier les sous-couches de clip rapide ici, donc nous allons les vivre cachés pour l'instant. Nous reviendrons dans ces états plus tard. Cette salope ne fait rien en ce moment. Donc, je veux m'assurer que nous pouvons faire est de défiler vertical ici. Donc, pour ce faire, nous devons changer les paramètres verticaux ici pour faire défiler au lieu de statique. Donc, nous allons grouper toutes les sections en appuyant sur la commande G. Et renommons ces groupes en fenêtre écureuil, et vous pouvez le faire en appuyant sur commande sont donc maintenant avoir nos calques sélectionnés. Changeons aussi le paramètre statique . Faites défiler ici maintenant. Quelque chose d'intéressant s'est passé ici. Principal a créé ici un pilote qui spécifie que la fenêtre de défilement a un driver off scroll sur l'axe Y. Et si vous faites glisser ces ligne année à gauche sur la mariée, vous pouvez voir le défilement se déplacer de haut en bas. Mais revenons à ça plus tard. Et pour l'instant, ramenons ça à zéro. Donc, si vous allez à la fenêtre d'aperçu, en fait, rien ne se passe ici et commencer, essayez Dragon ceci Mais ce n'est pas ne veut pas vraiment. Donc, pour corriger cela, le groupe doit avoir la même taille que notre vue pour la taille. Donc, nous allons, euh, ajustons les paramètres ici. Donc échanger des nouvelles ici et ensuite faire les neuf pixels élevés comme de vous versé. Et donc vous allez à la fenêtre d'aperçu, puis vous avez une page évolutive. Ok, donc c'était facile. La prochaine vidéo va s'animer. Comment vont Londres ? La page va regarder 11. Princi : chargement de page: Ok, Donc dans cette vidéo, nous allons créer un effet de chargement pour les éléments qui sont dans la section héros. Donc, ce que je veux faire ici est une animation très simple où ces éléments s'estompent et flottent d'en bas dans un style en cascade, donc un peu comme un par un. Donc, pour ce faire, nous allons sélectionner notre page de destination ici, et je vais la renommer en véritable Transition. D' accord. Et je vais cliquer sur ces petites choses de vie Bull, icône et sélectionner auto, ce qui signifie fondamentalement que nos transitions air vont jouer automatiquement pour que nous puissions voir cette petite flèche bleue ici qui, hum, va pointer vers la prochaine notre conseil d'administration. Mais puisque nous n'avons pas d'autres sangliers sont ici va sélectionner celui que nous avons déjà afin qu'il duplique comme ça. Et comme je l'ai déjà mentionné, la timeline animée fonctionne entre nos portes. Ainsi, comme vous pouvez le voir ici, le principal a créé ces flèches, et si vous cliquez dessus, vous pouvez voir la chronologie animée dehors et comment il a tous nos calques ici. Et c'est pourquoi il est important d'avoir une bonne habitude de nommer correctement vos calques car il sera très triste de voir ce que vous animez ici et simplement ce qui se passe ici. Alors commençons par renommer le conseil de cour en page écureuil. Maintenant, nous allons Creavy effet flottant ici. Je vais sélectionner ces éléments et les déplacer 30 pixels vers le bas, et vous pouvez le faire en cliquant sur Maj et la touche fléchée vers le bas trois fois. Ainsi, chaque fois que vous cliquez sur atteint dans une touche fléchée se déplacera. 10 picks s'arrêtent dans cette direction. Donc, si je regarde ces espions en cliquant sur ce bouton ici, ça nous mènera à la première notre planche. Et si vous placez votre bouche n'importe où sur l'écran d'aperçu, nous pouvons prouver que vous êtes des animations par défaut. Principal vous garde une durée de 300 millisecondes et utilise le style de triplement D pour nous. Maintenant, je préfère personnellement la facilité. Les deux, je pense que ça rend les animations légèrement plus lisses, mais n'hésitez pas à utiliser ce que vous préférez. Ici, je vais changer tous ces éléments pour faciliter les deux, et je vais également sélectionner la barre de navigation ici et changer tous ces éléments de sélection à zéro prison une équipe de passe. Ainsi, comme vous pouvez le voir ici, Principal a automatiquement créé sont des animations. Et si vous déplacez votre souris vers la gauche et la droite sur la chronologie, vous pouvez prévisualiser votre animation. Donc, de cette façon, nous pouvons voir les animations qui viennent le long. Et comme je l'ai dit, je veux que les éléments entrent un par un. Donc, je vais traîner les choses et les séparer de 100 millisecondes chacune. Ok, donc ça ressemble à ça. Il a l'air assez agréable et lisse. Je pense qu'on peut s'en sortir avec, hum, peut-être étendre l'animation de la position juste un peu pour lui donner un peu comme un fils des éléments étant mais traînés dans un peu. Ok, donc je vais les sélectionner ici et les étendre pour 100 millisecondes de plus, je suppose. Voyons voir à quoi ça ressemble maintenant. D' accord, certains arrivent avec ça. Passons à la vidéo suivante. Où va animer comment ces voitures vont entrer dans l'écran ? Eh bien, faire défiler la page vers le bas 12. Princi : Effets de surplombe: à droite. Donc nous voilà à nouveau et ce qui est juste nettoyer un peu. Donc ce que je veux faire maintenant, c'est que je veux animer ces cartes, et je veux que les cartes aient un effet Khobar. Et je veux aussi créer un effet de défilement pour que lorsque nous défilons vers le bas, les chariots apparaissent d'une manière agréable et fluide. Pour ce faire, nous allons créer un nouvel art pour, et je vais sélectionner ici. Le défilement commence, et je vais le dupliquer à nouveau. Et puis je vais exécuter ces effets de défilement. Très bien, alors nous allons, um déclipser sont des couches définies ici. Je veux juste voir ce qui se passe. Et c'est là que nous allons commencer à utiliser nos chauffeurs ici. de commencer Avantde commencerà animer ces cartes, je veux créer les effets Khobar. Pour ce faire, je vais faire un composant. Alors sélectionnons une de ses cartes ici, et passons à ces boutons ici qui dit créer un composant. Et puis je vais cliquer ici et sélectionner plus perspicacité va dupliquer cela et puis quand vous sur l'extérieur va revenir au début. Nous avons créé une boucle ici en ce moment. Rien ne se passe vraiment parce qu'on n'a rien changé. Je vais changer mon cheval d'art nommé ici June actif. Et puis ici, je veux la voiture à 10 pixels. Et je veux aussi avoir une ombre ici. Donc je vais utiliser la même ombre que nous devons vraiment trouver ici. Euh, juste pour l'exercice, Uh, allons ici à 16 ans par 4 % zéro visant tous nos fonds pour Ok. Je veux donc en savoir plus pour avoir une ligne ici, ce genre d'abus de gauche à droite. Et si on retourne à son dossier ici, tu remarqueras que j'ai déjà beaucoup préparé. Ces composants pour vous. Si vous allez au composant apprendre plus, vous verrez qu'il y aurait déjà un groupe actif et un groupe sur. Et parce que lorsque vous importez un fichier au principal tous les malades par an et que vous regroupez qu'il est caché ,cela ne sera pas important ici, , et cela aurait fait que les états plus transparents. Donc ici, changons notre capacité de 0 à 200, puis mettons l'état actif au pourcentage de sirop et j'étais Vous pouvez voir ici que nous avons une ligne ici maintenant. Ce que je voulais, c'est une des lignes à tracer de gauche à droite. Ok, alors allons à notre état actif. Et puis changeons la ligne ici dans l'État de Khobar, 20 avec. Donc, si nous pouvions aller prévisualiser ça maintenant, ça marche. Alors fermons tout. Retournons au parent. Donc maintenant, ce que je veux faire, c'est que je veux faire double emploi et que nous ayons trois voitures qui font la même chose. Donc d'abord je vais le renommer Carte un, puis je vais dupliquer 20 mais en appuyant sur la commande profonde. Et puis je vais m'assurer qu'ils sont une ligne. Selon les cartes originales, je ne fais qu'élire les cartes et les aligner, et maintenant nous pouvons aller de l'avant et rencontrer nos cartes précédentes, et nous avons aperçu cela vous pouvez voir qu'il y a sureffet fonctionne maintenant bien, non ? Donc c'est tout pour ces vidéos. Dans la prochaine, nous allons créer un effet de défilement pour trois cartes 13. Princi : Effets de Scroll (partie 1): Ok, alors maintenant, acceptons cet effet grandissant ici pour nos cartes. Maintenant, c'est là que nous allons utiliser nos chauffeurs et ce que je voulais pour vous. C' est que lorsque les cartes ont atteint cette position dans l'écran, vous ressemblez exactement à ceci. Nous allons sélectionner nos cœurs et ensuite nous allons à ces petits symboles plus et sélectionner le centre. Pourquoi ? Et créer des Cris Frenk et je veux aussi qu'ils s'estompent. Je vais donc sélectionner des capacités bien en bas. Revenons à zéro, c'est là que commence notre animation et je vais les déplacer 100 pixels vers le bas. Cette fois d'un est d'être un peu plus drastique que les 30 pixels. Et puis je vais les séparer aussi bien par 100 pixels chacun, comme si jamais Prevue. C' est ce qui défilait vers le bas ? Vous pouvez voir l'effet qui arrive maintenant. C' est génial, agréable et lisse. allons nous assurer que nous ajoutons notre décoloration aussi. Changeons donc ce qui les vend tous à nouveau et modifions la capacité à zéro. Alors, Proview va bien, que oui, alors faisons-le dès le début. D' accord ? Et ou les effets homer fonctionnent toujours. C' est génial. Maintenant, allons dans la prochaine vidéo où nous allons animer la prochaine section 14. Princi : Effets de Scroll (partie 2a): Donc nous voilà à nouveau et passons à la section suivante et nous allons faire quelque chose très similaire ici. En fait, on va faire à peu près la même chose pour chaque section. Ils vont être un peu différents dans quelques petits détails. Mais à peu près l'essentiel des animations et le style des animations vont être les mêmes. Maintenant, nous allons faire la même chose ici en les transformant en composants. Et la raison pour laquelle nous faisons les composants d'abord est que nous allons créer des interactions pour la page. Mais pour la Corée, ces interactions, nous allons devoir créer nos conseils et chaque fois que nous dupliquons sur notre carte e copies sur chaque composant et chaque pauvre jolie que vous avez. Si nous dupliquons dans la guerre de l'art sans créer de composants, alors nous devrons faire notre travail deux fois. Donc pour sortir ça du chemin, on va le faire maintenant. Maintenant, commençons par celle-là. Alors allons-y avec un excellent composant. Et comme je l'ai dit, j'ai déjà créé ces états pour vous était actif et plus que celui-ci aura besoin d' autre état qui va être le select à ST maintenant. D' abord, je veux voir ce qui se passe, parce que quand j'étais trop sombre, alors je vais juste créer un fond pour ce fond blanc. Donc je vais juste appuyer sur sont pour un rectangle, et puis je vais juste créer un très, vous savez, juste pour voir ce qui se passe, juste pour changer ça en White, et puis je vais déplace-le ici. Cas maintenant je peux voir. Maintenant, changeons le nom ici trop actif, et puis créons notre sureffet, puis notre retour à l'extérieur et je vais changer ces deux-là, et je vais dupliquer cette commande actuelle D et supprimer qui prouve dans la direction. Je veux passer, exalté parce que je ne veux pas passer accidentellement dans des états différents quand je ne veux pas le faire. Donc il va y avoir un changement d'utilisation comme, Ok, maintenant allons-y. Et puis nous allons montrer notre état actif, qui est un pastis 100% c'est bien. Et notre Khobar, c'est 0%. Mais je veux en fait que ces deux ressemblent sont sélectionnés état, parce que si vous regardez la conception. C' est à quoi ressemble l'état sélectionné dans le steak actif saoudien. On dirait que ça a été changé. Pour être en fait Dube va changer c'est mentir à zéro, et ensuite je vais te changer. Passe-le ici aussi. 60 %. Et là, je vais le faire. Mais l'ensemble 100% vous êtes actif 0%. Et encore une fois, je veux que ces lignes soient tracées de gauche. Bon, donc je vais le changer ici 20 et je vais les laisser car il est si faible maintenant on peut voir qu'on est parfaits. Super. Revenons voir le parent. Et ici, comme vous pouvez le voir, il a changé son apparence, Mais nous pouvons aller ici et passer de l'actif à la sélection. Maintenant, nous avons ceci exactement comme nous le concevons. Maintenant, nous allons faire la même chose pour ces composants. Renommons simplement cette première étape 201, puis les inondations créent un composant pour cela. Aller créer un rectangle ici pour voir trop longtemps changer en blanc. passage à l'arrière a changé ces deux états actifs. Mais je vais dupliquer ses deux fois. Et puis ceux-ci seront finis. Ça allait être sélectionné. Alors le fait du titulaire va changer ce 200%. Il est de 1 à 0 % et nous allons faire le même premier Etat élu. Donc 100% et 0%. Et puis notre état actif est un très le poids que vous regardez. Alors assurons qu'on se connecte. L' art ennuie ici et puis pour environ la colonne vertébrale. Et maintenant, ça marche. Et n'oublie pas quand tu fais ça, Linus. Eh bien, donc on va retourner à ici, changer notre ligne. 20 Quoi ? Et les réseaux ? Super. Retournons voir notre parent. Et puis les vies ont été nommées cette étape 202, puis nous en avons aperçu. Ça marche. 15. Princi : Effets de Scroll (partie 2b) de Princier): Alors maintenant, créons nos effets de défilement pour cela. Donc je veux que ces deux-là ressemblent assez. Je baguette le texte pour glisser vers le haut et s'estomper, et je vais encore les aimer ici aussi avec ceux-ci. Et je vais créer un pilote ici, un cadre clé ici et Sandra pourquoi ? Et aussi pour le passage. Revenons maintenant à l'endroit où l'animation précédente s'est terminée et nous allons déplacer ces 100 pixels. Je vais appuyer sur Maj et vers le bas l'anarchie 10 fois et ensuite je vais les séparer de 50 pixels chacun. Je ne veux pas que ce soit trop fou avec 100 % de cellules chacune parce que sinon ça va prendre beaucoup de temps à charger. Droit ? Donc on prévoit. C' est maintenant qu'il a l'air très lisse. J' aime ça. Maintenant, sélectionnons-les tous et changez la rapacité. 20 Nous pouvons voir ici. C' est sympa. Nous ferons la même chose. Sauf que cette fois utiliserait le centre X pour cela. Allons-y et on va cliquer sur Centre X et capacité. Revenons ici, puis nous allons déplacer 100 pixels et changer la capacité à zéro. Nous passons donc en revue nos informations ici. Ça arrive ensemble. Très gentil. Bon, donc c'est tout pour cette section. Dans la vidéo suivante, nous ferons quelque chose de très similaire pour la section suivante. Et puis on y va, Monsieur, Salutations ou interactions plus complexes. 16. Princi : Effets de Scroll (partie 3): Très bien, donc nous voilà avec cette section. Allons voir nos chauffeurs et mettons-les dans la bonne position. Encore une fois, quand la section atteint le point de thèse, je voulais ressembler à ça. Maintenant, nous allons juste ajuster nos cartes parce qu'il y a trois voitures que nous avons ici sont juste des espaces réservés. Les cartes de rial sont ici, et on va utiliser le principe, mais pour s'assurer qu'elles sont dans la bonne position. Donc je vais juste les supprimer ici, et je vais changer ça à 200%. Et je vais changer l'échelle ici à 0,9 dans les 12 0,8. Et la raison pour laquelle les plus anciens où un espace réservé est parce que le texte est différent. Et je voulais utiliser la propriété scaling ici parce que plus tard, je vais vous montrer comment nous allons créer une interaction pour retourner à travers ces cartes. Ok, alors assurons qu'ils sont alignés au bas de la première carte, et ensuite je vais les déplacer 20 pixels vers le bas chacun et vous laisser voir à quoi ils ressemblent. Il y a juste un texte différent. Bien sûr, c'est du texte Demi mais je veux juste qu'ils aient l'air différents. Donc maintenant qu'on a mis ça hors de propos, c'est proche et voyons comment on va faire cette prochaine section. Donc, encore une fois, j'ai gagné les étiquettes à la décoloration et à glissement, et je veux animer ce fond pour découvrir les voitures et puis, dans une des deux heures pour animer aussi bien. Il va se rencontrer de gauche et de droite. Alors commençons par le texte. Je vais sélectionner ceci et je vais créer un cadre clé. Je pense que c'est bien pour Sandra Y et l'opacité. Revenons à l'endroit où s'est terminée notre animation précédente et saluons nos images clés ici. Donc, nous allons à nouveau descendre de 100 pixels. Je veux juste m'assurer que tout est cohérent et utilisé. La même chose est de baser ici, Alors séparons ces mots par 50 pixels aussi. Oups. Ok, nous allons prévisualiser ce Moran. C' est assez lisse. Maintenant, nous allons à notre fondu en effet en changeant la capacité à zéro. Alors on y va maintenant, on les voit une réunion. Bon, passons à ces parties. Donc ici, je vais créer un cadre clé quatre centre X et avec quelque chose avec eux comme ça . Et passons en revue ici, donc ok, je pense que je veux que l'arrière-plan finisse juste un peu plus tôt. Donc, pour ce faire, je vais agrandir ça ici et bouger son tour. Donc je pense que je veux la fin. Voyons juste voir. Donc je veux finir à propos de leur truc. Ce serait le A d on. Alors voyons ici. Oui, pour que nous puissions mieux voir les cartes maintenant ? Oui. Maintenant animons ces deux heures ici. Donc encore une fois, je vais créer une clé à partir d'un centre X, et ensuite je veux qu'ils augmentent un peu. Je vais ajouter un cadre de compétences Qué et puis un passé deux clés libre. Maintenant, revenons au début de l'animation, et puis je vais à des 20 pixels chacun sur le site. Et puis je vais changer l'échelle à 0,8 et il y a des passages de votre alors voyons à quoi ça ressemble. Ok, donc je veux que Teoh finisse juste avant le texto. Nous ? Eh bien, et je ne veux pas qu'ils commencent tôt, non plus parce qu'il ne semble pas qu'ils flottent là. Et je veux qu'ils soient plus proches de la ligne de l'animation de l'arrière-salle ici. Alors passons par ici. Changez la portée un peu plus tôt, probablement autour de là, juste un peu plus. Et puis je veux qu'ils finissent juste un peu plus tôt aussi. Peut-être par là. On va te voir. Ok, je pense qu'on veut juste s'assurer qu'on ne peut pas dire à l'utilisateur que vous connaissez ces boutons d'air et que vous pouvez cliquer ici, et je veux qu'il comprenne ça tout de suite. Donc je pense que ça marche pour l'instant. Donc, dans la prochaine vidéo, nous allons finir les effets de défilement, puis nous allons passer à créer des interactions plus complexes pour les cartes et notre cheval jusqu'à ce que les effets de grattage soient effacés. 17. Princi : Effets de Scroll (partie 4): D' accord. Passons donc à la section suivante ici et voulons juste en voir plus. Donc on va faire ça comme on l'a fait. Les sections précédentes allaient en fait, nous allons regrouper cette commande de cartes G, et je vais changer ça pour tester. J' ai l'impression que c'est mes cartes. Et nous allons comme ça aussi. Je vais addict Frame pour le centre. Pourquoi ? Et garder cadre a une équipe. Et ici, avec la fin de l'innovation de notre province, Teoh corrige ça. C' est un homme courageux. Um, 15. Jetons un coup d'oeil. Ouais, je ne veux pas que ça soit trop parce que je veux ça pour que quand on fait défiler , ces voitures se déplacent automatiquement sur le côté. , Donc je ne veux pas que ça devienne une distraction et qu'il se passe trop ici, alors viens-le comme ça. Et puis Alice a juste mis tout à zéro positif. D' accord ? Ça fait bien. Ok, donc maintenant passons à la section ici avec beaucoup de choses et ceux-ci vont être vraiment similaires à nouveau. On va juste s'assurer que ça va. Alors choisissons nos logos ici et ces composants. Et puis nous allons cliquer sur le vin central, puis l'opacité. Retournons ici. Déplacez ces 100 pixels vers le bas. Ok, alors pour le my 50. Et nous ferons la même chose avec ces boutons ici. Et je veux aussi qu'ils ressemblent à des styles de cascade. Apparaissent un par un. Et nous pouvons le faire d'une manière différente. Donc c'était juste à notre passé t ici juste pour avoir ces cadres clés fait. Ensuite, nous pouvons sélectionner nos logos ici et ensuite simplement déplacer les cadres clés. Laissons l'ABC Lobel comme ça. Et dans ceux-ci, nous allons simplement les déplacer. Mais comme ça, puis le suivant. Je fais juste ça par moi , mais, je veux dire, si vous voulez vraiment être vraiment spécifique, vous pouvez consommer ici et ensuite juste être littéralement aussi parfait que vous voulez être, je supposons. Et enfin, le baiser de swoon a été perdu. Répétez ça. Ouais, on dirait que oui, je pense que c'est probablement trop moins juste un peu moins ici. Juste comme ça, Lucy. Cas de ce plus Donc je vais bien. avec ça. Et puis je veux juste m'assurer que la nourriture ou n'est pas dans le chemin afin que vous puissiez voir ici ne peut pas les vêtements à la nourriture gagner loin. Alors bougeons ça aussi. C' est juste, hum, créer une clé à partir d'ici pour le centre Pourquoi ? Et passons au début. Et avec ces 100 pixels vers le bas, et je pense qu'on peut faire ça pour que ça commence beaucoup plus tard, peut-être là , oui, c'est plus agréable. Peut-être même un loyer. Oui. Ok, donc nous l'avons. Présentons dès le début. Ce sont des effets défilants ou des combats Khobar pour les cartes. Les cartes de témoignage sont des logos dans les grandes réservations de pieds que nous avons fait. Nous avons fini avec nos effets de défilement dans les prochaines vidéos. Nous allons créer des attractions plus intéressantes ici et des animations vont à. J' ai fait les sections de ça. Nous pouvons cliquer ici et passer à l'étape suivante, et puis nous allons créer une indirection années qui peut retourner à travers nos voitures en cliquant sur sa flèche. Et puis nous allons juste créer un parcours automatique jusqu'à ce qu'on fasse défiler ici, sorte que quand on fait défiler ces airs se déplaçant latéralement et qu'on puisse les voir d'accord, super. Passons donc aux prochaines vidéos 18. Princi : scroller d'interaction (partie 1): Ok, donc nous voilà sur la section suivante. Maintenant, ce que je voulais entendre, c'est que je veux una fait le bouton de sorte que lorsque nous cliquons dessus, nous pouvons voir la prochaine étape numéro deux venir de la droite. Alors faisons un nettoyage ici. Juste des vêtements, des dossiers et je vais couper mes couches ici. Maintenant, je vais aller à je vais revenir à cette section ici, et ce que je veux faire en premier, c'est créer mon interaction. Donc, nous allons cliquer sur ces boutons et nous allons cliquer sur le bouton et dupliquer notre carte. Et la première chose à faire serait de changer les états d'actif do, sélectionnés dans ceux-ci parmi sélectionnés pour agir. Ensuite, nous allons créer et tapoter pour revenir à la page précédente. Donc, en ce moment, rien ne se passe vraiment. Parfois, des choses arrivent. , Une chose que je fais quand ça arrive,c'est que je fais ça bien. Donc maintenant rien ne se passe vraiment, c'est que vous pouvez voir ici, mais commençons par créer notre animation. Alors déclipsons notre soupe plus tard pour voir ce qui se passe ici. Et c'est la future étape numéro deux qui veut de la viande. Alors ouvrons notre chronologie ennemie, et je vais fermer la chronologie des pilotes pendant une seconde. Maintenant il y a quelque chose que je veux mentionner ici. Comme vous pouvez le voir ici, il y a deux icônes, donc l'eau a ces trois lignes. Cela signifie que l'animation a été créée dans la chronologie du conducteur, et que le Wanda a le flocon de neige signifie que l'animation a été créée dans la chronologie d'animation . Maintenant, malheureusement, si vous avez modifié une propriété et la chronologie des pilotes, vous ne pouvez pas modifier la même propriété dans la chronologie de l'animation. Voyons donc un exemple ici pour sélectionner le calque ici, qui représente l'animation de ces blocs d'image venant de droite, entrant et s'estompant de droite. Alors identifions ici. Maintenant, vous pouvez voir ici le centre X et un pastie sont contrôlés par les pilotes et parce que nous voulons animer cette section pour qu'elle se déplace de droite à gauche, essentiellement sur l'axe X. Techniquement, on ne peut pas le faire parce qu'ils sont contrôlés par les conducteurs. Mais voici un petit truc que j'aime faire. Cette propriété est appliquée uniquement au groupe, mais pas aux éléments à l'intérieur. Donc, sélectionnons les éléments à l'intérieur et tous les autres éléments que nous allons animer. Donc, sélectionnons tous ces ainsi et allons également sélectionner l'arrière-plan parce que va m'aider à aligner les éléments correctement. 30. Vas-y. Donc, si nous voyons ici maintenant, Theo Enemy Timeline a créé une animation pour la propriété Centre X pour les deux éléments. Jetons un coup d'oeil à ce que nous avons. Ici, nous retournons aux caractéristiques du musée que l'on cliquerait ici avec les caractéristiques Étape deux. 19. Princi : scroller d'interaction (partie 2): maintenant, je pense que nous pouvons encore rendre les choses un peu plus lisses, et je veux faire en sorte que lorsque nous changeons pour mettre en vedette l'étape 2, l'animation hors des composants à l'intérieur, c'est comme lisser et lisser. Et je veux qu'ils quittent l'écran un par un et apparaissent à l'écran un par un même manière, à ce que nous avons fait pour les sections précédentes. Alors passons à ça maintenant. Une autre chose que je veux mentionner à propos de la chronologie ennemie est que les flottes de neige qui sont en bleu signifient que vous ne pouvez pas changer l'animation ici. Il veut dire que c'est un composant. Et si vous voulez changer l'animation, vous devez changer à l'intérieur du composant. Ainsi, par exemple, la carte numéro un de la est un composant, donc si je double-clique dessus, je peux voir ma chronologie ici, et je peux bien changer la thèse à n'importe quel assouplissement qui veulent étendre autant que je veux. Mais je vais juste laisser ça comme avant, parce que j'aime ce que ça a l'air jusqu'à présent. Revenons à ce truc. Une autre chose qui est important de mentionner ici est que tous ces calques, Fondamentalement presque chaque couche a une animation ici, mais cela ne signifie pas nécessairement que sont des informations qui sont utiles pour ces tableaux d'art. Donc, dans ces gays étaient juste préoccupés par les éléments sur l'écran. Ainsi, nous pouvons techniquement sélectionner toutes ces animations et simplement les supprimer en cliquant. Vous savez, l'animation et rien ne change vraiment ici. Donc, je sais que cela peut devenir un peu désordonné ici et ceux-ci utilisent parce que techniquement, chaque fois que nous dupliquons un embarqué, chaque élément qui a changé principal crée automatiquement une intimation ici, même si cela inclut le conducteurs ou vous savez quoi que ce soit que nous avons changé ici. Donc je sais que c'est peut-être que tu trouves la confusion ici, mais essayons de nettoyer ça autant que possible. J' ai donc eu ces illusions maintenant, et je vais commencer par animer les composants dont j'ai besoin. Uhm, je vais supprimer fondamentalement tout ce qui a l'icône du pilote ici pour que je sache que nous n'avons pas besoin de ceux-ci. Ok, super. Alors commençons à animer nos composants. Nous allons commencer par celui-ci, et ce que je veux faire a une sorte d'apparaitre un par envie. Je vais juste les séparer de 0,2 millisecondes chacun. Donc, ce serait six. Donc on peut voir à quoi ça ressemble, et c'est ce que je veux. Maintenant, la prochaine chose que je veux faire est de changer les thés de style assouplissant. D' accord. Et puis faisons la fonctionnalité Étape deux. Donc ce serait celle-là, et je vais les séparer à nouveau. Mon point, Zroom Chew Mills discours Aiken. D' accord. Et nous ne nous soucions pas vraiment de l'arrière-plan, alors d'accord. Non, ça marche. Maintenant, changeons Thies pour le relâcher. Et à moins que chaque composant ne dure environ 500 millisecondes ici. Donc à propos de la 0.50. Ok, et maintenant ajustons. Celui-ci doit commencer. Peut-être autour de 0.20. Voilà, tu y vas. Alors jouons ça en arrière. Et c'est ainsi que nos fonctionnalités L'étape 2 apparaît donc c'est assez agréable. J' aime ça. Et la raison pour laquelle il a vu ceux-ci se calmer, c'est parce que je les regarde dans leur ensemble. Automatisation. Fondamentalement, c'est ah, toute la transition, et je voulais être facile à entrer et à sortir. Donc, les premiers composants vivent l'écran pour un facile et ceux qui arrivent sont fondamentalement et il est sorti. Et comme je l'ai mentionné dans la section Fury en termes de durée, parce que cela il y a beaucoup de composants en mouvement dans l'écran, vous vouliez être 500 millisecondes ou plus au total. Donc, il est joué à nouveau. Ouais, c' est sympa. Maintenant, je vais juste le laisser comme ça. Je vais passer à la section suivante. Mais pourquoi ne pas essayer de faire la même chose pour les fonctionnalités Étape 1 et fondamentalement ce que vous auriez à faire là-bas est à peu près la même chose, sauf en sens inverse, puis voir comment vous le faites et publié dans la section du projet. 20. Princi : cartes d'interaction: Ok, alors faisons notre prochaine interaction ici. Et ce que je voulais entendre, c'est une interaction qui montre que les voitures tournent quand je clique sur ce bras. Alors commençons par fermer. Ce n'est pas une force dont on n'a pas besoin. Et je vais couper mes couches ici et je vais aller voir mes chauffeurs aussi. Trouver la position de la section suivante, comme ici et puis je vais sélectionner ma flèche et je vais cliquer sur le robinet et je vais dupliquer et je vais tourner nom ce ne sont pas carte du conseil d'administration être en cours Et OK, donc la première chose que je voulait est que je veux juste mes cartes ici, Donc je vais augmenter le côté taille, étaient ici afin que je puisse voir correctement et je vais gagner ma carte A au fond. Et puis je vais changer l'échelle de la carte battre 21 et je vais m'assurer qu'il est en ligne à la carte un.Ensuite, je peux changer les voitures e à la compétence 9.9 et carte huit à l'échelle 80.8. Maintenant, je peux sélectionner à nouveau le centre commercial. Je vais les aligner sur le haut de la carte être et puis à nouveau au fond de la carte de bœuf. Ensuite, je vais sélectionner mes deux chariots de dessous et les déplacer de 20 pixels chacun. D' accord, la prochaine chose que je voulais, c'est que je veux changer les sélecteurs ici. Alors je vais Teoh, copiez ces couleurs. Et c'est juste 3333 Alors changez ces deux alouettes grises comme Great ! Et ceux-là, il va faire de la pluie sombre. Et c'est quelque chose qu'on va faire avec les heures. Donc ceux-là, ça va espérer que ça ira 33 ans et l'autre va bien. Alors voyons à quoi cela ressemble assez revenir à mon tableau d'art précédent et ensuite je vais prévisualiser mon animation. Ok, donc pas à toi. Mauvaise façon peut. On ne peut toujours pas polir un peu plus. Donc, ce que je veux faire maintenant, c'est que je veux créer quelque chose entre ces deux partenaires parce qu' il n'est toujours pas clair que nous retournons les cartes. Donc sang cliquez sur un autre dans la traction ici, allez sélectionner le bouton esprit et cliquez sur taper. Je vais dupliquer cela maintenant je vais supprimer le robinet précédent que je serais avant, et à la place je vais créer une transition automatique. Donc fondamentalement, cela signifie que lorsque nous cliquons sur la flèche, il va aller à ceux-ci ne sont pas ennuyés. Et quand l'animation se termine ici va aller à ceux-ci ne sont pas si ici. Quand je veux faire est quand je sélectionne ma carte A et je vais les déplacer 40 pixels vers le haut et 40 pixels vers la gauche. Mais je vais changer l'angle en moins deux. Ensuite, je vais changer mes sélecteurs ici pour être, hum, hum, 40 pour cent alpha dans ces 12 Ensuite, je vais sélectionner mon siège de carte et changer le passage A e 20 Maintenant, vous savez sembler dehors. Et si nous revenons à notre tableau d'art précédent et jouons ça, ça ressemble à ça. Ok, donc pas trop mal. Mais on peut encore le polir un peu plus. Et ce que je veux faire ici maintenant, c'est que je veux juste que le timing va fermer le timing des pilotes de ces animations. Alors où changeaient ici ? Il est les sélecteurs de la Cour A, C et C. Donc je vais juste Teoh, assurez-vous que je ne vais rien changer ici, donc je vais supprimer cela et aussi tout cela, et je vais changer tout cela trop facile que je vais aller à la prochaine ne sont pas conseil d'administration, et je vais faire la même chose. Sauf que je vais me changer avec eux aussi. S' il vous plaît l'extérieur. Ok, alors passons en revue ça. Ouais, pas trop mal. Super. Pour que nous puissions faire la même chose pour le prochain garde. Quoi ? Avez-vous essayé de le faire vous-même et affiché sur la section du projet ? Passons maintenant à la vidéo suivante. Où sera animer cette poussette et ce sera une animation très, très simple. On va juste faire en sorte que les témoignages aient l'air qu'ils défilent automatiquement vers la gauche. 21. Princi, scroller automatique: C' est la dernière section que nous allons animer. Et avant d'arriver à ça, je veux juste te montrer rapidement que j'ai terminé la dernière voiture qu'on avait besoin d'animer . Maintenant, si tu avais une chance de le faire tout seul, c'est génial. Je veux juste te montrer rapidement ce que j'ai fait ici. Donc, tout d' abord, j'ai renommé tous mes mots d'art. Donc la carte soit transitionnelle. C' est celui sur lequel nous travaillions dans le passé. Carte vidéo, fin. Et puis j'ai créé deux nouvelles guerres artistiques ici. Donc actuel Voir la transition et le panier. Voir la fin. Et si nous voyons nos animations ici pour la carte voir transition. J' ai ajusté tous ces éléments pour faciliter et fourcher artsy et tout celui-ci est pour soulager afin qu' ils correspondent à la carte précédente. Ok, super. Passons maintenant à la section suivante. On y va, Teoh, va à la chronologie du chauffeur et celui-là sera très simple. Allons, euh, l' or sur le chemin de la mer ou des chariots de témoignage. Et je vais bouger le pouce. Euh, 23 à peu près trois cartes comme ça. Deux cartes, trois cartes. J' adore aller les déplacer sur Juin 3 cartes comme ça, puis aller à mon ennemi en temps opportun et aller trouver le tissu de ligne section zéro ici, cartes de témoignage et ce centre. Pourquoi est celui que nous voulons rencontrer ? Alors je vais y arriver. Je vais l'étendre jusqu'à environ 12 secondes, et je vais changer à l'animation en Linéaire. Revenons donc au tableau d'art précédent et continuons à défiler, et vous pouvez voir les cartes défiler automatiquement là. Super. Alors jouons à tout depuis le début. Nous avons notre effet de chargement défiler vers le bas et nous avons nos cartes. Il a aussi tout un effet pour nos cartes. Et puis nous avons un défilement, euh ici à notre fonctionnalité Étape numéro deux. Et puis nous avons une belle section défiler vers le bas ici et nous pouvons retourner à travers nos cartes comme ça. Et on ne peut pas descendre. Sarah, juste de l'argent, SLA, et puis voir nos clients et la nourriture. C' est ça. Super. Passons donc à la prochaine vidéo où nous allons passer en revue ce que vous avez appris, et nous allons voir comment enregistrer votre fichier et exporter votre fichier en dribble ou un fichier vidéo, ou fichier vidéo, même en tant que programme pour n'importe quel développeur ou autre et vous voulez qu'ils jouent avec votre prototype et obtenir des commentaires. 22. Conclusion: Très bien, félicitations pour avoir terminé ces cours et créé votre page d'accueil animée. Regardons ce que vous avez appris jusqu'à présent. abord, vous apprenez à faire des animations simples pour créer un effet de chargement pour ces sections héros. Ensuite, vous apprendrez à utiliser les pilotes pour créer des effets de défilement vertical. Ensuite, comment travailler avec des composants pour créer des effets Khobar. Vous apprendrez également à utiliser la timeline animée pour créer des animations lisses et à animer des interactions complexes. L' utilisation de multiples sont des alésages. Enfin, vous avez créé un effet très simple qui ressemble à un cheval infini sur érudit. Impressionnant. Donc, lorsque vous êtes prêt à exporter votre fichier, veuillez réinitialiser votre fenêtre d'aperçu et appuyer sur la touche Contrôle et la lettre V pour Victor, et il commencera à enregistrer tout ce que vous faites dans la fenêtre d'aperçu. Alors passez en revue tout ce que vous avez créé. Et lorsque vous avez terminé, cliquez à nouveau sur Contrôle V pour arrêter l'enregistrement. Maintenant, vous pouvez exporter votre fichier comme un fichier vidéo ou un fichier cadeau, um, ou progression, mais honnêtement, en fait, n'ont jamais utilisé la dernière option. Une autre chose cool que vous pouvez faire ici est si vous allez dans le fichier et sélectionnez l'application Mac explorée. Cela crée un fichier d'application qui ne peut être lu que sur le Mac, mais vous pouvez le partager avec les développeurs ou les concepteurs avec lesquels vous travaillez. Donc là, vous l'avez. Ton type de porta. C' est génial. C' est mon premier cours, et j'aimerais entendre vos commentaires. Et si tu veux, la classe joue partagée avec un ami. Aussi, n'oubliez pas de soumettre votre projet à la galerie et de laisser votre avis. Je voudrais beaucoup plus de cours comme ceux-ci dans l'animation, et vous I Et si vous aimez entendre parler d'eux, cliquez sur le Fuller mais merci.