Animer avec l'API JavaScript Web Animations

1. Introduction: Les animations simples sont assez faciles avec CSS. Mais dès que vous voulez animer quelques choses à la fois ou dans l'ordre, cela peut bientôt devenir problématique. n'y a pas de moyen simple de CSS de dire quand cette animation est terminée, exécutez, cette autre, par exemple. Cependant, c'est quelque chose que vous pouvez faire facilement avec l'API JavaScript Web Animations. Et c'est ce que nous allons apprendre dans ce cours. Maintenant, si vous êtes un débutant complet avec le développement web, ce n'est probablement pas le cours pour vous, mais si vous connaissez HTML et CSS et avez une compréhension modérée du JavaScript, je pense que vous devez faire très bien. Cependant, je prends de l'avance sur moi-même. Je suis Ben Frain, développeur web et auteur du best-seller Responsive Web Design avec HTML5 et CSS. Si vous prenez ce cours, je vais vous montrer comment écrire des animations avec JavaScript Web Animations API. Et nous allons tout faire des animations simples que vous seriez habitué à utiliser et CSS jusqu' à un certain nombre d'animations séquencées dans un morceau d'interaction qui va construire ensemble. Tout ce dont vous avez besoin pour ce cours est un éditeur de texte, un navigateur et une tolérance pour les blagues de qualité inférieure. Alors installez-vous confortablement, offrez-vous une bonne boisson. Et nous commencerons dans la prochaine vidéo. 2. La construction du projet: Avant de construire ce truc, je veux te montrer où on va finir. Donc vous pouvez voir ici sur mon écran de droite, nous avons ce genre de ce que je refroidisse en grande partie la scène. Et nous avons un ensemble de boutons en bas. Et en cliquant à travers, vous pouvez voir où nous exécutons quelques séquences, sorte de défilement de texte Star Wars qui traversent la fusée. Et vous pouvez voir que le nombre d'animations en cours d'exécution somme ensemble et certains aussi dans l'ordre. Donc les trois de ces scènes de bataille, et vous pouvez voir notre espèce Rocky entre et traverse. Et puis notre dernière scène à la fin, c' est la fusée Londres. Les Jets s'envolent. Et après juste un court délai, petit ami de l' UCL surgit qui ont adoré appelé Eddy. Ce que vous construisez ne doit pas être le même que celui-ci. Ça peut être ça. Ça pourrait être quelque chose de similaire à ça, ou ça pourrait être quelque chose de complètement différent. Tout ce qui est important est que vous apprenez et comprenez suffisamment l'API des animations Web pour que vous puissiez commencer à déplacer les choses autour de l'écran avec JavaScript. Maintenant, avant d'aller plus loin, je pense qu'il vaut la peine d'examiner pourquoi nous voulons faire cela avec JavaScript au lieu de CSS. Maintenant, je suis un fan massif de CSS. Parfois, il s'agit de choisir le bon outil pour le bon travail. On va jeter un oeil à ça dans la prochaine vidéo. 3. Pourquoi ne pas seulement utiliser CSS ?: Jetons un coup d'oeil à une animation très simple avec CSS. J' ai un rechargement en direct en cours ici et j'ai un outil appelé plus beau, les reformats, que la taxe est-ce que ça va ? Nous y reviendrons très bientôt. Pour l'instant, on va faire une animation très simple. Donc elle va faire, donnons un div dans la page. On va lui donner une classe de choses. Et puis voyons si avec la puissance de CSS, nous pouvons tout d'abord, faire une belle boîte. Sur la page. Largeur, 100 pixels de haut, 200 pixels, couleur d'arrière-plan. On aura une belle orange vif. C' est juste vérifier. On a R-square, d'accord ? Et maintenant, nous allons lancer une animation. Donc, je vais juste écrire la déclaration d'animation d'abord, puis nous allons écrire l'image-clé après. Ne vous inquiétez pas du fait qu'il n'y a pas de cadre clé à la minute. Alors Animation, et on va l'appeler bouger, non ? Ça va prendre 1 seconde et c'est aller de l'avant. Et on va s'assouplir. C' est la fonction chronométrage. Si vous ne savez pas ce qu'est 0, c'est, nous allons le couvrir bientôt, ne vous inquiétez pas pour ça. Ok, donc maintenant on doit écrire le mouvement réel, non ? Images-clés. Allons obtenir ce peu vite. Et on va juste y aller, ça va passer à. Donc, quand vous l'utilisez pour, dans cette situation, vous pouvez écrire pour cent 200% ou quelque chose comme ça. Mais c'est plus facile si, si vous voulez simplement passer à l'animation à quelque chose de nouveau. Si vous l'écrivez comme ceci, il se déplacera juste là où il, où vous voulez qu'il finisse. Donc dans ce cas, je veux juste bouger notre petit carré. On va traduire, et on va y aller, va aller 300 pixels vers la droite. Et je vais descendre. Et pendant que nous sommes là, changeons le rayon de la frontière à 50%. Alors avec un peu de chance, qu'est-ce qui aide à devenir fou ? Et changeons la couleur de fond. Et on va aller à, on ira dans un joli gris foncé. Ok, voyons ce que ça fait pour nos fortunes. Quoi que Dunya fasse ne veut pas ça à la règle ou ne cherche pas à s'attendre à ce qu'il aille. J' ai besoin d'écrire un mouvement de cadres clés, non ? D' accord. Parce que le sourire sur moi, d'accord, pour que vous puissiez voir qu'on sort d'un carré lumineux, se déplaçant à droite, le transformer en cercle, d'accord. Et si nous voulions maintenant attendre une seconde, puis déplacer tout encerclé vers le bas et le retourner en carré, c'est quelques façons que vous pourriez faire cela. Vous pouvez soit ajouter une autre animation à tous les sélecteurs, soit nous pourrions la construire dans les images clés. Donc, si nous allons le construire dans les images clés, regardons ça d'abord. Si nous voulons intégrer les images clés, supposons que nous allons simplement copier ceci et ce sera notre nouveau. Donc ça va aller 0, que ça allait aller 33%. On veut que ça finisse. Donc 0 ne va pas avoir de transformation dessus. Ça ne va pas avoir un rayon d'Ebola. C' est essentiellement notre position de départ, et c'est R. Donc nous allons aller pour notre troisième orange vif du chemin de l'autre côté. On ressemble à ça. Et puis nous voulons attendre là pour un autre 2.5ème. Donc, de tout le chemin à 66%, cela fonctionne dans ma tête de donneur pour l'échantillon, le travail dans la vraie vie ici. Et ça va être pareil. Parce que quand on arrive à 60, 66% grâce à notre animation, je voulais être au même endroit. Donc, donc entre 3366 va être une pause et puis juste saisir ce peu. Je suis un idiot, désolé. Prenons ça. Donc, ça va être tout à 100%. Et puis à 100%, nous voulons toujours être sur la droite. On va descendre 300. On va retourner à un carré. Nous avons réglé différemment. Et puis on retournera à notre place. Ça va arriver assez vite à 1 seconde. Donc je vais juste rendre la durée est de l'animation un peu plus longtemps. Donc je vais changer la seconde à trois secondes. Donc nous devrions obtenir maintenant quelque chose comme 1 seconde à travers, 1 seconde pause, 1 seconde vers le bas. Tels sont faits quelque chose de mal. On y va. Et réessayez. Attendez. Eh bien, on p, ok, donc c'était bon. Mais supposons maintenant, alors que les designers qui aiment ce que nous avons fait avec ce carré, ils m'ont assommé la fête, euh, ils m'ont assommé la fête, euh, mais ils veulent en fait 1 seconde, 2 secondes de retard et 1 seconde de bas. On peut contourner ça ne pouvait pas attendre. On pourrait changer nos images clés. Vous pourriez travailler, déterminer où le pourcentage serait pour le, pour les piscines, puis changer votre livre. Il commence à devenir assez difficile à gérer. Et ce n'est qu'une animation que nous courons ici. J' ai dit avant qu'on puisse faire ça d'une autre façon. Alors essayons ça. Si nous, si nous revenons à où nous étions il y a un moment, où nous avons juste à déplacer l'animation droite. Au lieu de le faire avec des images clés, supposons que ce que nous avons fait c'est que nous avons créé une autre image clé. Je vais appeler ce mouvement vers le bas. Et celui-ci va faire, c'est que ça va passer de MEA, ça ne marchera pas. Donc nous allons passer de juste pour être clair, quand nous voulons descendre, nous savons que nous allons être 300 à 0 bas. On va être un cercle. Et nous allons être dans les années 3, ce qui est le genre de gris foncé. Et puis au moment où nous arriverons à terminer, nous aimerions être de retour et ressembler à un carré. On dirait un carré, idéal tout le temps. 300 Darrow, Xero, rayon frontière. O, mais deux. 90. Ce seront donc nos images clés pour descendre. Alors on pourrait mettre ici, déménager. Et nous voulons que ça dise 1 seconde. Et nous voulons un délai de 500 millisecondes. Et nous voulons donner un avants et nous irons à l'aise. Il y a une erreur évidente ici pourquoi ça ne va pas marcher. Je vais l'exécuter. Et les doigts sur les poses. Tu peux me dire si tu sais ce que c'est. Laissons ça depuis le début. Tu as vu ça ? Il ne traverse même pas avant qu'il ne commence à descendre. Et la raison pour cela, et c'est pourquoi les animations CSS, CSS peuvent être problématiques, c'est parce que dans un tout, pour que toute seconde animation s'exécute, nous devons tenir compte du temps qu'il faut en premier pour terminer. Il n'y a aucun moyen NCSS de dire quand le premier est terminé, alors faites le suivant. Donc ce qu'on devrait faire ici, c'est qu'on doit y aller, accord, donc notre retard, on veut que tu fasses cinq, on a fait un demi retard après qu'il ait traversé. Donc, ce n'est pas un retard de 500 millisecondes, c'est en fait un 1500 millisecondes, 1,5, donc je peux retarder. Donc maintenant ça devrait être quelque chose de plus comme nous voulons voir. On a le retard, puis il descend. Nous avons travaillé sur ce problème ici. Mais la réalité est, n'est pas une façon fantastique de penser à ces choses. Sans doute, vous pourriez rendre cela un peu plus facile avec des propriétés personnalisées, ce que vous pourriez faire pour sûr, nous pourrions aller. La durée est de 300 millisecondes. Et ça, ça pourrait aider. Cela dépend de vos préférences ou supposons, mais nous pourrions faire la durée. Et cela va aussi être la durée. Durée. Et pour notre retard, je ne suis même pas convaincu que c'est mieux et je ne suis certainement pas convaincu qu'il soit le genre de chose facile à raisonner. Si vous reveniez à ce code dans six mois, cela prendrait un peu de gratter la tête. Donc, ce sera la durée fois 1,5. Non, ce n'est pas juste. Ok. Fermé au mauvais endroit. C' est bizarre. Espérons que cela fera la même chose et essayons-le. Ouais, ok, donc ça marche. Le faire de cette façon. Cela rend un peu plus facile de changer l'animation globale car au lieu d'avoir à entrer et recalculer ou retarder, il parle généralement Ici nous pouvons montrer et cela écrire 1 seconde. Ok, donc on a une maison d'une seconde. Je pourrais retarder 1 seconde. Nous avons travaillé autour de cela et nous avons examiné comment vous pourriez potentiellement rendre ce petit peu plus facile. J' utilise des propriétés personnalisées, mais il n'y a toujours pas de moyen facile de dire chose grossière que lorsque cette chose est finie ruineuse. Ensuite, quand c'est fini, courez, cette autre chose. Et il y a aussi que nous n'avons même pas abordé ici. Si nous voulions mettre en pause les animations, puis les reprendre, va soudainement les faire revenir dans l'autre direction. La vérité est que CSS n'a tout simplement pas une bonne réponse pour cela. Et tu sais ce que je vais dire ? L' API Animations Web a une bonne réponse pour cela. Vous êtes probablement conscient qu'il y a beaucoup de paquets d'animation JavaScript tiers que vous pouvez télécharger et utiliser dans votre projet, que vous trouvez, il y en a de très bons. Je pense à des choses comme la chaussette verte. Mais le problème est, c'est quelque chose que vous devez ensuite mettre dans votre page Web, l'application que vous construisez. Chaque fois que vous voulez exécuter une animation. Et c'est aussi, vous devez apprendre un morceau de syntaxe personnalisé qui peut ou non être d' environ dix ans. Avec l'API Animations Web, c'est une norme, cela ne va aller nulle part. Donc, ce que vous apprendrez avec une API Web Animations va vous aider à aller de l'avant. Espérons que c'est abordé la raison pour laquelle nous voudrions utiliser JavaScript. Et regardons la façon dont nous le faisons avec JavaScript dans la prochaine vidéo. 4. Qu'est-ce même une API ?: Avant d'écrire notre première animation avec JavaScript, je veux juste couvrir le terme API. Api, l'acronyme signifie interface de programmation d'application. Tout ce qui signifie pour ce que nous faisons ici, c'est qu'il y a une interface JavaScript intégrée dans le navigateur Web qui nous permet de contrôler les animations avec JavaScript car c'est une norme web, il y a une spécification que vous pouvez aller et lire. Les spécifications diffèrent grandement en ce qui concerne les fonctionnalités Web. Donc très facile d'obtenir votre tête autour et de comprendre les autres moins cellule. Je trouve la spécification de l'API Web Animations peu intense. Maintenant, j'espère que si je fais un travail à moitié décent ici, vous ne devriez pas avoir à aller regarder cette spécification beaucoup. Sauf si vous voulez, ce qui, vous savez, c'est entièrement à vous de décider. Je ne juge pas. Beaucoup en termes de support du navigateur. Comme je l'enregistre cette fin 20-20. Et si nous utilisons, puis-je utiliser le type .com dans l'API Animations Web, puis le support ressemble à ceci. Vous avez un soutien décent sur tout ce que vous pouvez raisonnablement vouloir utiliser. Absents notables, IE 11 et complément à la version 18. Mais évidemment, il y a de moins en moins de préoccupations à l'heure actuelle. Il y a aussi des polyphénols. Si vous sentez que vous avez besoin de le faire, c'est évidemment assez bon déjà. Et ça va aller mieux. C' est assez d'introduction. Continuons à droite dans notre première animation avec JavaScript. Dans la vidéo suivante. 5. Un exemple d'API d'animation Web simple: Bon, lançons la première animation avec l'API Animations Web. Nous allons commencer par la forme que nous avions il y a quelques vidéos que nous étions en train de déplacer avec CSS. Donc, si vous vous souvenez, Don était très simple et un seul élément avec une classe de choses. Et je suis juste en train de lier ici aux animations ab.js. Maintenant, les animations point JS à la minute est très simple. n'y a rien qui a juste un journal de console pour que vous puissiez voir cela faire quelque chose. Et le premier travail est juste de se débarrasser de tous les styles que nous avons avant qui faisaient cette animation. Si vous vous souvenez. Je vais juste effacer certains de ces autres trucs hors du chemin. Désolée, une fois de plus, nous avons la place qui traverse dix pour un cercle et qui redescend. Maintenant, on veut se débarrasser des trucs d'animation Olof pour moi parce qu'on n'a pas besoin de tout ça. Maintenant. Ce que nous avons maintenant c'est r-carré ne faisant rien. Et nous allons refaire cette animation avec JavaScript. Et juste pour vous montrer, ouvrons les outils de devtools afin que vous puissiez voir la console Jess reporting pour le service. Nous savons que tous les fichiers JavaScript branchés, pas de problème. La première chose que nous allons faire, et laissez-moi utiliser le mot-clé const ici pour faire une variable de sorte à l'élément sur la page. Vous pourriez en utiliser moins. Vous pouvez utiliser VAR pour ce que nous faisons. Ça n'a pas vraiment d'importance. Je voudrais juste prendre l'habitude d'utiliser contre 20 est quelque chose qui est constant et je ne vais pas changer. Donc, un autre document, le sélecteur de requête point. Vous n'avez pas besoin de faire le sélecteur de requête tout car il n'y en a qu'un sur la page. Et son truc, cool c'est penser à une chose égale document, requête, sélecteur. Tout. Juste pour vérifier, on a ça sur la page. On va le faire avec tout, mais juste pour s'assurer que les premiers bits entrent en jeu. D' accord. Donc vous pouvez voir ici dans la console, nous avons attrapé tous les éléments. Ok, alors maintenant on l'a. Nous voulons plus d'animation. Et on va y aller. Et que la première méthode que la méthode que vous utiliserez la plupart du temps, il est animé. Animer. Ok, donc je suis principalement pour animer prend deux sets, eh bien, deux arguments, ne vous inquiétez pas du tout dans cette vidéo, si ça ressemble à gobbledygook, on va examiner ces trucs dans un grand nombre de détails sous peu. Je vais juste vous montrer à quoi ressemble cette même animation que nous avons faite en CSS quand vous le faites avec JavaScript. Le premier argument sera un tableau d'images clés. Donc, notre première image clé est le gain d'être forme trans. Et vous remarquerez ici que nous utilisons une chaîne pour ce qui se passe dans la transformation. Donc je pense que c'était traduire 300 pixels, rien de fonction de synchronisation de l'intrigue ici et nous allons dire va prendre le temps en JavaScript. Et l'API JavaScript se fait toujours en millisecondes. Donc, vous pourriez être habitué à en CSS, disons en 1 seconde est 1S. C' est un non-aller. En JavaScript, c'est toujours en millisecondes. Donc 1 seconde, 1000 millisecondes. Vous n'avez pas besoin de mettre les unités. Il est toujours supposé que vous utiliseriez des millisecondes, remplissez. Ça va être les deux. Donc, au cas où nous allons à nouveau dans l'une ou l'autre direction, ne vous inquiétez pas pour l'instant. Facilitation, nous allons aller en JavaScript Justinien aussi bien que l'API Animations Web, la fonction de synchronisation par défaut en CSS est une facilité, alors que dans JavaScript la terre, la valeur par défaut est A-linéaire. Donc, si nous voulons faire quelque chose qui n'est pas une animation linéaire quand vous devez vraiment dire ça. Donc, disons que nous allons 0s et ici juste pour vous montrer à quoi cela ressemble quand je sauve ceci maintenant cela va être légèrement reformaté par plus joli. Alors, voilà. Donc, vous pouvez voir que le premier petit morceau que nous avons mis dans est juste cette transformation. Et nous dirons aller à travers. Et nous dirons de faire toutes les 1000 millisecondes que nous voulions remplir afin que nous obtenions les styles du point final de l'animation persistants. Et nous utilisons une fonction de synchronisation de facilité et de sortie. Maintenant, nous avions aussi, nous l'avons changé d'un carré à un cercle comme il allait à droite. Donc ce que nous devons faire ici, nous allons passer du rayon de la frontière. Et vous êtes aussi dans l'utilisation du sol JavaScript, CamelCase, noms de propriété. Donc, en CSS, nous aurions un tiret de bordure, rayon en JavaScript est une bordure, puis un rayon avec un R. majuscule Donc un rayon de bordereau ne devient pas opex et nous allons transformer l'est pas. Donc ça va être notre point de départ. Et puis on va changer ça pour être le rayon du constructeur. Et puis ça va être 50%. Jetons un coup d'oeil. Ok, donc quelque chose par ici. Pendant qu'on s'est trompés. me manque une virgule. Avec vos cadres clés, vous pouvez voir ici qu'ils utilisent ces accolades. Et après chaque ensemble d'accolades, ceci est, ceux-ci sont par chaque image-clé individuelle. Et après chacun de ceux que vous devez mettre une virgule. Ok, alors on y va. Et encore une fois, je pense que sur celui que nous avons construit avec CSS, nous aussi, nous avons transformé la et la couleur de fond. Donc, ce serait la couleur de fond comme ça. Et encore une fois, vous passez dans une corde et un merci était à trois. Alors on y va. C' était la première partie de ce que nous avons fait avec le CSS. Ce qui est intéressant à ce sujet, c'est que nous pouvons maintenant dire, nous pouvons séquencer les choses. Donc, nous pouvons dire quand c'est fini, alors. Donc, quand cette animation sera terminée, nous allons commencer une nouvelle animation. Et on va dire ça, et j'ai huit ans. Et encore une fois, nous allons passer dans deux choses. Le premier est notre gamme d'images-clés. Encore une fois, ne t'accroche pas à ça pour l'instant. Et ça va aller dans la forme des tendances. Et c'est comme sous les pixels. Vérifions simplement ce qui se passe ici et vous pouvez voir comment cela est séquencé. Et donc je vais partir pour l'instant. On le remplira plus en détail dans un instant. Et cela va encore dire qu'il y a un retard ici de 2.5ème. Et puis nous ferons les mêmes choses qu'avant. Utiliser à nouveau facilement et à l'extérieur. Ok, la durée. Encore une fois, vous pouvez voir qu'il n'y a pas d'ordre spécifique à ces choses. Tant que tu as les bonnes choses là-dedans, ça va marcher très bien. D'accord. Voyons ce que ça fait pour nous. Ok, donc pouvez-vous voir comment les uns courent après les autres, même si j'ai les mauvaises valeurs là-dedans. Donc, à la minute je suis en train de transformer de 300 ici pour ensuite être 0 et l'axe des x. Donc je dois m'assurer que ce 300 est là dedans. Et on va faire 200 pour l'instant. D' accord. Voyons ce que ça fait pour nous. Ok, et si vous vous souvenez, nous voulions aussi le retourner à un carré. Encore une fois, ce que nous devons faire ici, car nous allons rendre notre couleur de fond à ce qu'il était. Et c'était F9 0. Et nous allons remonter le rayon de la frontière à 0 pixels. Ou nous pourrions utiliser des pourcentages qui chevauchent phi. Encore une fois, je ne m'attends pas à ce que vous compreniez cela maintenant , c'est juste vous donner un aperçu de la façon dont vous écririez une animation simple avec l'API JavaScript Web Animations. Ok, donc c'est un très bref aperçu fait avec et maintenant on peut entrer dans le minutieux. 6. Refresh du projet: Bienvenue de retour. Rafraîchissons nos souvenirs sur ce que sont les principaux projets que nous allons construire ensemble. Nous avons une zone de scène sera canevas, si vous voulez, à ne pas confondre avec l'élément de canevas dans lequel vous entrez. Vous pouvez également utiliser un JavaScript pour peindre des choses avec. Nous n'utilisons pas l'élément canvas. J' appelle juste cet élément que nous allons tout déplacer dans Canvas. Et nous avons aussi ces boutons ci-dessous. Donc nous avons à côté pour sauter les choses. Et puis nous avons aussi comme tire Boston, et puis nous avons un trou noir, qui viendra trop tard. On a un peu de configuration à faire ici. On a cette petite lecture de n'importe quelle scène. Nous allons mettre en place, en fait construire la coquille, cette chose d'abord dans la prochaine vidéo. Maintenant, si vous êtes principalement intéressé par juste comprendre et entrer dans le bit où nous utilisons réellement l'API. Vous voudrez peut-être sauter un peu, mais dans les prochaines vidéos, plus de construire cette structure, nous allons également couvrir des choses comme les fonctions de synchronisation et les animations d'images clés. En termes généraux, tout comme une sorte de rafraîchissement au cas où il serait quelque chose que vous n'avez jamais fait auparavant ou quelque chose dont vous avez juste besoin d'un peu de sorte que je reviendrai à la vitesse avec. Donc, si vous n'êtes pas inquiet de la facilité dans les fonctions de synchronisation , les durées, comment faire des itérations, tout ce genre de choses par tous les moyens, sautez de l'avant. Sinon, traîner autour pour les prochaines vidéos et nous allons passer à travers elasto off et ensuite obtenir la construction ou le projet réel ensemble. 7. Configuration de base: On va commencer par la configuration la plus simple que tu puisses imaginer. Nous avons un fichier HTML pratiquement vide. Rien d'autre qu'une console se connecte dans notre fichier JavaScript. Et je vais styles et évidemment ces deux feuilles de style et le fichier JavaScript lient tous les deux à la feuille de style. Et ils appelaient notre script d'animation. Nous n'avons pas besoin, et vous n' avez pas besoin d'outils de construction pour suivre cela et faire fonctionner les choses. Je vais utiliser un outil appelé Browser Sync tout au long de ces vidéos, juste parce qu'il me donne automatiquement des recharges et signifie que nous pouvons avancer rapidement sans que je rafraîchisse continuellement la page. Maintenant, vous pouvez également évidemment installateurs vous-même. Si vous passez à BrowserSync point IO, vous pouvez voir ici les instructions d'installation pour ce faire. Cela ne nécessite pas quelques choses supplémentaires comme npm et node, qui si vous n'êtes pas familier avec ces outils, je pense que mon conseil à ce stade serait juste oublier cette partie. Ne vous enlisez pas et obtenez ces outils de construction et exécutez cela. Ce n'est pas l'objectif de ce que nous faisons ici. Nous voulons aller sur les bonnes choses et faire les animations web. Donc, si vous êtes familier et à l'aise, peut-être tailler une demi-heure et essayer de faire fonctionner ce truc livre. Ne travaillez pas sur ce point, ce n'est pas super important. Tout ce qu'il nécessite est de faire une installation MPI, installant la synchronisation du navigateur globalement. Et puis vous pouvez voir si vous cliquez, commencez. Encore une fois, ce sera différent selon le système d'exploitation sur lequel vous êtes. Je suis un Mac ici. Vous êtes peut-être Windows, vous Linux. Et une fois que vous avez ouvert et en cours d'exécution, c'est un cas simple d'ouvrir un terminal et de le passer dans une commande, BrowserSync, que vous demandez essentiellement à BrowserSync de démarrer un serveur local. Et vous pouvez voir ici, je dis ça à des choses que je dis ici. J' exécute la synchronisation du navigateur comme commande, démarrer, arrêter la synchronisation du navigateur. Et puis les deux sortes d'arguments, si vous aimez que je passe pour servir et désolé, serveur et fichiers. Et ces deux options vous permettent de lui dire où sera la racine du serveur, qu'il va tourner et où sont les fichiers que vous voulez qu'il regarde. Maintenant, dans cet exemple ici, ma faute, mes fichiers que nous regardons ici dans un dossier appelé vid sept. Donc, à partir de ce point, j'exécute cette commande et cliquez sur Entrée et le me fait tourner un serveur local ici. Et puis c'est simple comme si je voulais changer ça pour favoriser la couleur orange. Je reçois ces recharges instantanées. Donc, c'est juste un outil très utile si vous êtes rapidement itéré sur les choses. Cela vous fera économiser un peu de temps de la commande et tout pour rafraîchir votre ou en utilisant votre souris pour le faire, grands outils que vous seul pouvez faire fonctionner rapidement. Ne vous attardez pas si vous continuez. En outre, vous verrez probablement ici que j'utilise un outil appelé plus joli. Et nous allons plus joli fait, est-ce qu'il prend la forme en fait code essentiellement. Donc, plutôt que vous vous inquiétez de l'indentation ou si vous devez mettre des point-virgules et tout le reste. Pretty prend juste soin de ça pour toi. Donc, vous pouvez voir ici est un exemple. Si je n'ai pas indenté ce fichier correctement, je peux simplement l'enregistrer. Et jolie va le rendre joli. Donc plus jolie si vous n'êtes pas familier avec ça. Je le recommande fortement. Plus joli point E/S. Et encore une fois, c'est un autre outil qui va avoir besoin de nœud va avoir besoin de MPM. N' insistez pas à ce sujet si cela prend du temps ou qu'il est difficile de se lever et de courir, sautez dessus. Vous pouvez toujours y revenir plus tard, mais ne laissez pas cela vous empêcher de continuer à animer certaines choses. Donc, avec cela dit, continuons dans la vidéo suivante et construisons réellement notre structure de base. 8. Créer l'étape et les contrôles: Donc, dans cette vidéo, nous allons regarder le genre de socle, si vous voulez, de ce que nous sommes sur le point de construire. Donc, si nous commençons avec HTML, vous pouvez voir la seule chose que j'ai ajoutée à partir de notre fichier vide. Il est, j'ai un élément principal ici, qui encore une fois, pourrait être facile à regarder dans les outils de développement en fait. On a donc un élément principal. On est là, vous pouvez voir la zone de la toile, pas la vraie Canvas. Juste un div que j'ai 6'2 et Canvas, c'est là qu'on va changer un truc de loi. Et vous pouvez voir ici, il a juste une bordure de largeur et de hauteur fixe autour de la couleur de fond extérieur. Et vous pouvez voir plus important, il a un débordement caché non une position de relative. Le débordement caché est important parce qu'une fois que nous commençons à déplacer les choses, nous le voulons comme un peu comme notre caméra de film, si vous voulez. Et quand les choses vont de part et d'autre, nous ne voulons pas traîner sur le côté de notre scène. Et la position relative est importante car au fur et à mesure que nous avançons, vous verrez que lorsque nous ajoutons des choses dans notre toile, nous allons généralement les positionner absolument couvrira cela sous peu. Mais le parent est important parce que sinon les choses qui étaient positionnées absolument se positionneraient contre la fenêtre plutôt que notre zone de scène. Vous pouvez voir ici que nous avons juste éléments de bouton standard pour chacun de nos contrôles à travers le bas, chacun d'eux a un bouton de type ID. J' ai toujours l'habitude d'écrire le bouton Type sur les boutons parce que le comportement par défaut d'un élément de bouton est de soumettre, ce qui dans ce cas ne ferait aucune différence. Mais si vous aviez par hasard un bouton qui se trouvait dans un formulaire et que vous n'écrivez pas sur, il peut soumettre le formulaire. Donc, c'est juste un côté quelle explication comme pourquoi je mets toujours le type égal bouton sur les éléments étrangers. Nous avons une classe de bouton Annie Dash, comme dans le bouton animations. Sur chacun de ces éléments. La première écoute le bouton Précédent et notre bouton trou noir, qui viendra trop tard. Vous pouvez voir qu'ils commencent la vie avec éléments désactivés sur eux parce que lorsque la page se charge pour la première fois, vous ne pouvez ni revenir en arrière ni démarrer le trou noir. Par défaut, ils sont désactivés dans nos styles. Assez simple encore une fois, style de base pour tous les éléments ou principaux, qui nous donne ce genre de largeur de page de 800 toile de base Dan, comme je l'ai expliqué précédemment. Et il ya des boutons ont juste obtenu le style de bouton fantôme standard, si vous voulez. n'y a rien de vraiment de conséquence là-dedans. C' est des trucs très basiques. Animations à ce stade. Tout ce que nous avons fait, c'est que nous avons fait des constantes pour chacun des boutons. Donc, si vous vous souvenez, nous avons le contrôle précédent, qui est celui, suivant, qui est ce trou noir et se déverse ici. Et puis la lecture est le bit de texte qui apparaît là. Alors que nous sauterons à travers les scènes, ça dira l'un des deux, désolé, l'un des 32 sur 3.3.3. Ensuite, nous avons ajouté deux écouteurs d'événements qui, à ce stade, nous avons, nous ne sommes pas prêts à faire des choses autour, jouer pause, et nous ne sommes pas intéressés à faire des choses autour du trou noir. Nous le sommes. La première chose que nous sommes intéressés à faire est de brancher ce bouton suivant et précédent. Et ce que ça va faire, c'est que ça va nous donner un mécanisme pour faire avancer la scène, si tu veux. Et je vais vous montrer la mécanique de ça au fur et à mesure. Mais essentiellement, nous avons juste besoin de créer un écouteur ou une fonction qui s'exécute lorsque ces éléments sont cliqués. Et nous pourrions également, au lieu de clint, vous pourriez utiliser pointé là bas si vous préférez, descendant des auditeurs que nous avons sur ces deux bosons. Vous pouvez voir ici il y a un idx max, qui est l'index maximum que j'ai défini à trois. Ça va être la limite du nombre de scènes. La chose qu'on a va avoir. Je cods ça en dur ici. Mais il peut y avoir des cas où vous construisez quelque chose où il est plus logique de le faire dynamiquement. Donc, vous pourriez le faire, il pourrait être une lecture DOM que vous devez faire. Il pourrait être basé sur les données qui arrivent. Cela vous dit que ces sept diapositives à passer à ce stade sont juste codées en dur. Nous avons également défini quelques tours pour l'index précédent sur l'index actuel. Et c'est pour que nous puissions déterminer si nous allons vers l'avant ou vers l'arrière, ce qui, espérons-le, aura un peu plus de sens lorsque nous passons par cette fonction de clic de direction du processus. Maintenant, j'ai délibérément laissé cette fonction de clic de direction de processus pliée parce qu'elle est assez dense, bien que j'espère, bien commenté. Maintenant, si vous vous souvenez, nous ne déclenchons dysfonctionnement que lorsque vous cliquez sur le bouton Suivant, lorsque vous cliquez sur le bouton Précédent. Et donc la première chose que nous devons faire est de savoir lequel de ces deux-là sur lequel vous avez cliqué. Cette chose que nous faisons fonctionne en principe en ayant un certain nombre de scènes que vous pouvez cliquer sur Suivant pour passer par un sens et précédent pour combattre à travers le contraire. La première chose qu'on a déterminée est ce que j'appelle la polarité ici. Et je veux savoir si vous avez cliqué sur le premier ou désolé, si vous avez cliqué sur précédent ou suivant. Et sur cette base, nous fixons la polarité à un 0 ou à un. Ainsi est un opérateur ternaire ici, ce qui est comme un condensé if else déclarations. Et tout ce que nous faisons, nous disons, c'est l'identifiant de la chose qui clique sur ce contrôle priv. Si c'est le cas, alors notre polarité est 0, IE nous allons en arrière. Et si vous avez cliqué sur le suivant ou, ou, vous savez, si ce n'est pas ça, c'est fondamentalement un qui veut dire que nous allons de l'avant. Nous voulons également définir l'indice précédent à l'endroit où nous sommes actuellement. Cela semblait déroutant parce que lorsque nous cliquons, cela se déplaçait dans une direction ou une autre. Nous devons sauver où nous en sommes actuellement au cas où vous vouliez y revenir. Ou plutôt, on peut dire dans quelle direction on voyage. On l'a mis là. Et puis basé sur si notre polarité en tant que un ou un 0, si c'est un, nous allons de l'avant. Et donc si l'endroit où nous sommes actuellement est le même que l'index maximum, qui si vous vous souvenez, nous définissons MaxIndex apparaître en haut. Alors, en gros, démissionne. Ça veut dire qu'on est à la fin de nos scènes. Sinon, nous voulons supprimer désactivé du bouton. Il se peut qu'il n'ait pas été désactivé à ce moment, mais si c'est le cas, il sera supprimé. Et puis nous voulons définir l'index actuel. Donc ça va marcher pour la prochaine fois. Nous allons définir l'index actuel, faire un ajout. On va compter. Nous allons augmenter cet entier. Donc, si ce n'était pas nul, il va faire chaud. Mais d'abord, nous devons vérifier. Donc, nous allons dire si l'index actuel, quand il en a un ajouté, est identique ou égal à 12 MaxIndex. Ensuite, nous le définissons sur MaxIndex. Sinon, nous définissons l'indice actuel pour être l'indice courant plus un recâblage de magnitude qui, écoutez à nouveau, semble déroutant. Faites confiance à la paperasse. Ensuite, si l'index actuel est le MaxIndex, nous voulons le définir pour être désactivé. Donc, fondamentalement, si nous avons passé au dernier, nous voulons définir à côté pour être désactivé parce que vous ne pouvez pas aller plus loin. Sinon, c'est la même chose, mais aller en arrière. Donc, si vous rendez en arrière, nous voulons enlever les handicapés vers l'avant parce que si nous allons en arrière, alors nous pouvons évidemment aller de l'avant. Si l'index actuel est 0, nous pouvons quitter car nous sommes au début. Sinon, nous allons supprimer tout état désactivé du bouton, désolé, attribut désactivé du bouton. Et puis nous allons définir l'indice actuel pour être l'indice actuel moins un. Si c'est inférieur ou égal à 0, alors on va le mettre à 0. Sinon, nous allons définir l'index actuel pour être l'indice courant moins un. Alors rappelez-vous simplement si, si vous n'êtes pas utilisé pour les opérateurs d'instructions ternaires en JavaScript, vous pensez simplement que ceux-ci sont condensés si elses, c'est essentiellement ce qu'ils sont. Et ce que vous faites, c'est que vous dites si, si quelque chose est vrai, mais il y a votre condition fondamentalement. Et si cette condition est vraie, faites la première chose, sinon, faites cette deuxième chose. Et puis, juste pour voir quelles sont ces valeurs, nous allons consoles déconnecter cela. Cette section du bas ici reviendra à plus tard. Il s'agit de la façon dont nous allons créer des animations et arrêter de faire ce qu'ils font chaque fois que vous cliquez vers l'avant et vers l'arrière. Ne vous inquiétez pas pour ça. Mais pour l'instant pour se mettre à la vitesse sur cette vidéo. Et encore une fois, ce n'est évidemment pas le cas, ce n'est pas essentiel pour l'API Animations Web. C' est juste pour le projet que nous construisons car nous donnons juste un cadre pour lancer ces différentes animations et scènes. Juste pour vérifier, ce petit fonctionne avec notre synchronisation de navigateur fonctionnant à partir de la dernière vidéo. Si je clique sur Suivant, c'était non nul et maintenant c'est un, était sur un et maintenant c'est trop pas trop et maintenant c'est trois. Et il y a des états handicapés dans lesquels je ne peux pas aller plus loin en revenant dans l'autre sens. J' étais sur trois et maintenant c'est trop pas trop. Maintenant, c'est de l'eau chaude sur un et maintenant il est 0 quand il ne peut pas aller plus loin en arrière. C' était beaucoup d'outil pour ce qui ne semble pas beaucoup sur la page, mais ce sera essentiellement ce que nous voulons faire dans les prochaines vidéos. Maintenant, avant de commencer à animer avec JavaScript proprement dit, il y a encore quelques sujets de plus sur lesquels nous avons juste besoin d'une poignée d'abord. Et ce sont les cadres clés en principe. Et puis aussi les différentes fonctions de synchronisation. On va les regarder dans les prochaines vidéos. Je te verrai dans un instant. 9. Théorie de l'animation Web : Les images clés: Juste pour être sûr que nous partons à la bonne chute. Je vais passer en revue les bases de ce que nous entendons par Keyframing, les interpellations et les animations et tout ce genre de choses. Donc, juste si vous n'êtes pas familier avec l'idée de cadres clés. Si nous avons une animation très basique et laissez-nous, supposons, supposons que nous ayons une balle ici. Et nous voulons qu'il aille jusqu'ici et qu'il finisse ici. En termes d'animation, ce que nous verrions réellement comme l'utilisation finale ou si vous la regardez, un appel à, vous verrez que vous ne verrez pas simplement la chose se déplacer instantanément de là à là. Ce que vous verrez est le chemin de la balle se déplaçant de 1 à l'autre, puis finalement à ce point. Et la terminologie pour ces choses, ou entendre ou vos cadres clés. Et puis les bits entre les deux, ou d'où vient le mot interpolation, interpolation. C' est l'entre-deux entre ces images clés. Donc, ce qui nous inquiète principalement lorsque nous animons, que ce soit travers les effets d'après ou que ce soit par JavaScript ou CSS, c'est que nous sommes intéressés à faire ces points d'images-clés et à laisser le ordinateur comprendre les entre-deux. Voilà donc les bases de l'image-clé. Donc, lorsque nous parlons d'organiser des images clés et d'écrire des images clés, rappelez-vous que tout ce que vous faites, c'est que vous êtes, que vous spécifiez où se trouvent ces points. Là où il y a un changement distinct entre le mouvement de la chose que vous animez, comment cela se manifeste, voir et penser à quelque chose. On ne va pas vraiment animer quelque chose. Mais supposons juste que la classe div égale boîte. Supposons qu'on ait une boîte ici et qu'on dise la largeur de la boîte. pixels des merveilles, non ? Sur les pixels. Ce cola moulu. Qui n'aime pas un peu, rose vif, rose, rose. D'accord. Voilà notre boîte. Et si nous voulions déplacer cette chose autour, la façon dont ces verrous en termes JavaScript est que nous dirions const box égale requête, Désolé, document dot query sector. Et il y a une boîte. Et puis on dirait Box dot animate. C' est la façon dont l'API, Web Animations API a cette méthode animate. Et vous pouvez voir ici l'outillage à l'intérieur de Sublime me me dit que cela prend deux arguments, un ensemble de cadres clés. Et puis qu'est-ce que les options de refroidissement ou les options d'animation d'images clés. Et nous passerons à ceux de la prochaine vidéo. La première chose que nous aimerions passer. Donc tu vas le faire passer. Habituellement deux objets ou un tableau d'objets et un ensemble d'objets. Ce que ce premier bit avant le premier argument que nous allons passer est toujours les images-clés, qu'il s'agisse d'une seule image clé ou d'un ensemble d'images clés passées en tant que tableau. Donc, vous seriez généralement, si c'était une image clé, donc cela se produirait quand certaines choses déjà quelque part ailleurs sur le DOM. Et disons que nous voulons le transformer en, nous allons dire traduire son val court tard et c'est toujours une chaîne ici. Et on dirait 500 pixels, 200 pixels. C' est juste le seul. Si on voulait le déplacer. Quelques cadres clés comme ce genre d'œuvre incroyable que je vous ai montré avant. Vous devez passer un tableau d'objets. Donc, au lieu de cela, ce que vous faites ici, c'est que nous soyons juste soignés dans cette minute supérieure, je vais les enlever parce que vous n'avez pas besoin de vous en soucier pour l'instant. Au lieu de passer un seul objet, vous passeriez dans un tableau d'objets. Donc, il est juste nécessaire que cela jusqu'à un peu dans les invites gras est plus logique pour nous laisser tomber complètement. Donc u, b et le deuxième bit et transformer et nous arrivons à l'échelle à trois fois sa taille. Donc, dans ce cas, cette image-clé, qui passe deux images clés là-dedans. Le premier est la traduction. Toute seconde change l'échelle. Maintenant, vous pouvez, par défaut, simplement passer une durée. Ça devrait Rome. Donc, si nous venons de passer en deux mille deux mille et deux mille millisecondes à secondes, et nous nous sommes débarrassés de ce bit. Donc maintenant, nous sommes juste en train de régler l'envoi sensible de toutes les images clés avec la durée. Vous pouvez y voir notre merveilleux morceau d'animation. Cependant, ce deuxième pari ici est où nous le ferions habituellement, et le plus souvent, vous allez envoyer un objet avec un tas d'options de tas de fonctions de synchronisation. Et nous allons regarder dans la prochaine vidéo. 10. Options de synchronisation: Dans la dernière vidéo, nous avons examiné les images clés, la théorie des images clés et la façon dont elles sont appliquées essentiellement avec l'API Animations Web. Dans cette vidéo, nous allons regarder le deuxième argument que nous passons dans la fonction animate. C' est là qu'on a laissé la dernière vidéo. Et nous avions, si vous vous souvenez, nous avons l'animation que nous avons passée. Le premier argument que nous avons transmis était un tableau d'images-clés. Nous avons laissé cela à la fin de la dernière vidéo et le second argument était juste resté vide. Essentiellement, nous avons essayé si vous vous en souvenez, définissant cette durée sur une durée qui va tout exécuter par défaut, mais avec une durée dans leurs 3 mille millisecondes, trois secondes. Et vous pouvez voir ici, c'est l'effet que nous obtenons quand nous exécutons ça. Cependant, en général, vous n'enverrez pas seulement la durée. Vous voudrez envoyer d'autres choses aussi. Maintenant, si j'ai juste besoin, espère un peu ici pour que vous puissiez voir ce qui se passe un peu mieux. Il est l'ouverture et la fermeture de toutes les fonctions animées. La première chose que nous faisons que nous avons regardé la dernière vidéo, c'est d'envoyer ce tableau d'images clés. Et ce qui nous intéresse dans cette vidéo, c'est ce qui vient après la virgule, la deuxième série d'arguments. Et typiquement ça va être un objet. Maintenant, les choses que vous pouvez passer dans cet objet sont tout à voir avec la façon dont vous voulez l'animation à Rome. Donc, les choses que vous pouvez envoyer dans ou la durée, qui encore une fois, millisecondes et vous l'écrivez pas comme une chaîne, mais comme un entier. Donc 3 000 nous donneraient 33 secondes de retard. Vous pouvez choisir de définir un délai afin que cette chose ne s'enfuit pas tout de suite. Vous retardez également un entier. Ainsi, 500 millisecondes vous donneraient un délai de 2,5. Les itérations. Si vous vouliez exécuter quelque chose un certain nombre de fois, vous pourriez dire, vous savez, pour, pour qu'il s'exécute quatre fois en CSS, si vous voulez exécuter une animation infiniment, vous utiliseriez infinie. Légèrement différent. Et l'API JavaScript, vous définiriez en fait l'infini comme le nombre JavaScript infini comme ça avec une majuscule I. Et l'infini, le mode remplissage prend, vous n'avez pas écrit du film d'avoine ou c'est juste remplir et vous devez le passer une chaîne. Donc, vous pouvez avoir la valeur par défaut. En JavaScript, une fonction de synchronisation linéaire. Css est différent et CSS c'est une facilité. Donc ça peut vous rattraper. Alors soyez conscient de cela. Et ce que vous pouvez envoyer en 0 et en dehors. Ou si vous vouliez devenir fantaisie, peut-être qu'il y a quelque chose de bien, vous l'avez vu gagner facilement, et choisissons un, choisissons ce genre de. Vous pouvez donc choisir d'utiliser une courbe de cloche. Et encore une fois, vous passez ça comme une chaîne. Donc, si vous citez autour d'elle et l'envoyer. Alors comme ça va se passer, ça va prendre trois secondes, je vais supprimer ce retard parce qu'on va être ennuyeux. Consentement pour regarder. Deux secondes. Ça va durer une éternité et nous avons ce film qui abandonne. Vous pouvez aussi lui dire de bouger. Vous pouvez également définir la direction de l'animation, qui si vous avez fait ce genre de choses en CSS, vous savez, vous pouvez aller normal, inverse, ultime, un inverse alternatif. À première vue, vous pourriez penser pourquoi est l'inverse et pourquoi est le, désolé, Y est l'inverse ultime. Donc normal viendrait de toile de fond, mais la vapeur, normale irait dans cette direction. L' inverse irait évidemment dans cette direction. Ultime est d'avant en arrière. Ultime inversé là. La différence clé comme ça commencerait à la fin, se déplacerait de cette façon, puis continuerait. Et vous écririez cette direction. Et encore une fois, c'est une ficelle. Donc, ce serait normal ou ce serait inverse ou ultime inverse. Débarrassons-nous de ça. Débarrassons-nous de ça. Et voir ce que ça fait. Pas beaucoup. Ok, donc un truc de botch. Maintenant, allons jeter un coup d'oeil rapide et voir si nous pouvons déterminer ce que j'ai mal fait. Cet éditeur édité. Ok, donc comme un idiot, j'ai défini le mode de remplissage pour être une courbe en forme de cloche où ce qu'il devrait être est de soulager. C' est ça ou remplir. Phil, nous n'avons pas couvert. Phil pourrait être normal à l'envers. On y va. Il est parti. Auto vers l'arrière, les deux vers l'avant, pas souvent. Tu dois utiliser au moins les avants. Ainsi, lorsque l'animation s'exécute, vous souhaitez conserver les styles qui existent à la fin de cette animation. Peut-être que tu ne le fais pas. L' autre que j'ai tendance à utiliser beaucoup est les deux, qui signifie que quelle que soit la direction que je lance cette animation, je veux que les styles à chaque extrémité s'appliquent en fonction de la direction qu'il est rond. Donc, dans ce cas, tu mourrais. Je vais juste rester dans les deux là. Voyons ce que ça fait pour nous. Et vous pouvez voir là que la facilité dans un peu inhabituelle a obtenu cette belle sorte de fonction popping et timing qui se passe là-bas. Donc, en gros, si vous avez fait ce genre de chose avec CSS, cela devrait se sentir instantanément familier. Peu de différences, mais en gros, il devrait être ce que vous aviez l'habitude de faire. Maintenant, nous avons examiné les bases de ces choses. Les images clés de la vidéo précédente ainsi que les fonctions et options de synchronisation de cette vidéo. Espérons que cela aura un peu plus de sens à mesure que nous avançons dans la réalisation des choses avec cette API. 11. La même animation réalisée avec CSS et JS: Dans les deux dernières vidéos, nous avons envisagé d'écrire les images clés d'une animation en JavaScript. Et puis nous avons également examiné les options que vous pouvez passer à une animation Durée des fonctions de temporisation. Dans cette vidéo, je veux juste conduire à la maison comment écrire une animation comparable à la fois en CSS et en JavaScript. Donc on va, on va mettre deux articles sur la page. Nous allons faire un spinner une fois avec CSS, et puis je fais exactement le même spinner avec JavaScript. Donc, classe div, et nous allons appeler cette classe CSS spinner. Vous devinez probablement Spinner JS. Les deux vont partager certains styles. Alors définissons les styles communs. Tout d'abord, pas terriblement spinner ish tapis de livre parce que nous avons laissé ici, rayon de la frontière 50%. Et cela fera notre cercle rectangle. Et en fait, juste à un peu d'espace autour ceux-ci veut coller un peu de marge à l'extérieur. Et puis faites tourner CSS. Disons de l'animation. Espérons qu'il aura au moins 102 animations CSS écrites. Si ce n'est pas le cas, j'espère que cela aura un sens. Nous allons faire la propriété d'animation, ou la propriété à court terme que nous allons passer dans notre nom d'animation, qui va être et me faire tourner. Et ça va dire 1 seconde. Il va avoir des avants et donc conserver les styles comme il va et il va aller infini. Et puis si vous vous souvenez, et l'animation en CSS utilise à la fonction de synchronisation facile par défaut. Et nous allons vouloir, eh bien, en fait, je vais vous montrer ce que cela fait par défaut et ensuite nous allons mettre qui a initié la différence. Donc les images clés tournent aussi. Et j'espère que vous vous souvenez en CSS, si c'est l'état par défaut est d'où vous voulez vous déplacer. Vous n'avez pas besoin de définir cela, donc vous pouvez simplement dire où vous voulez aller. Donc, dans ce cas, je vais faire une transformation qui est une rotation 359 degrés. Ok, maintenant pouvez-vous voir ici que c'est la fonction de synchronisation CSS par défaut, qui est un simple, qui est ce genre de mouvement staccato que vous y arrivez. Donc, nous pouvons résoudre cela et CSS pour nos besoins ici en disant simplement linéaire. Et cela nous donnera un, un temps linéaire et les fonctions des épinards continue tout simplement. Donc, c'est notre CSS un trié. Regardons comment nous écririons la même animation avec JavaScript. En réalité, tourner comme ceci n'est pas un bon cas d'utilisation pour une animation JavaScript avec l'API Web Animations. Nous faisons cela vraiment juste pour ramener à la maison le format auquel nous nous habituons maintenant en JavaScript de la méthode animate, en passant les images clés. Et puis les différentes options de chronométrage que nous voulons également affecter à ce contexte, notre spinner J S est égal à document. Donc je vais juste prendre ça et le document d'abord. Et puis nous allons animer et nous allons passer dans deux objets. Dans ce cas, ce sera nos options, y compris la fonction de synchronisation. Et cette première sera notre image-clé. Donc encore une fois, le mot-clé n'est pas comme une chaîne, mais la valeur de la propriété est, donc nous allons faire pivoter 359 degrés. Et là, nous allons dire la durée. Si vous vous souvenez, en JavaScript avec l'API JavaScript, ce n'est pas des secondes, c'est des millisecondes et nous le passons comme un entier. Donc, il y a notre 1 seconde est millisecondes. On ne veut pas retarder. Nous voulons notre remplissage. Et nous allons le répéter, passant comme une chaîne, prêts à dire en avant, prêts à dire en avant, parce qu'il y a des choses qui ne vont jamais en avant, forcer les itérations. Et JavaScript, nous passons l'infini plutôt que l'infini. Et puis, comme nous l'avons discuté il y a un instant, fonction de synchronisation par défaut de JavaScript est une fonction linéaire, donc nous ne devrions pas avoir besoin de définir cela. Vous pouvez voir qu'ils sont exactement les mêmes. Spin animé une fois avec CSS et une fois avec JavaScript. Maintenant, un problème commun avec les animations CSS est lorsque vous voulez prendre deux transformations, par exemple, et les exécuter simultanément sur le même élément. Ce n'est tout simplement pas quelque chose que vous pouvez faire avec CSS, mais c'est quelque chose que vous pouvez faire avec JavaScript Web Animations API. Dans la prochaine vidéo, nous allons voir comment nous pourrions ajouter quelque chose de simple, comme une échelle. En plus de cela, transformez la rotation. Et nous verrons comment c'est possible avec JavaScript. 12. Ajouter des animations ensemble: À la fin de la dernière vidéo, on s'était fait pour les fileurs. L' un s'anime avec CSS et l'autre s'anime avec JavaScript. Et j'ai mentionné que l'un des problèmes courants que vous auriez avec CSS est si vous essayez d'appliquer aux images clés qui utilisent Transform, par exemple, en même temps au même élément. Donc, tout d'abord, je vais le faire avec le CSS. Et vous pouvez voir le problème qui se produit. Supposons donc que nous ayons notre spinner d'autopsie ici est la version CSS. Et supposons qu'à côté de cette chose tourne, je veux aussi qu'elle pulse. Donc, il devient un peu plus petit, un peu plus grand que le spin se produit. Donc vous pourriez penser que vous pourriez faire quelque chose comme ça. Donc, j'ai une autre transformation et vous seriez pardonné de croire que cela devrait fonctionner avec une autre image-clé qui et tout ce qui fait est de mettre à l'échelle l'élément qui est appliqué à. Il y a notre premier, je vais juste copier ça. C' est lui que je vais en second. Et celui-ci sera Scale moi. Tu vois à quel point c'est confus ? Forme d'un meilleur mot ? Il essaie de faire les deux animations sont celles. Breed ne sait pas comment résoudre ça. Il ne peut pas, il ne peut pas comprendre comment appliquer ces deux transformations ensemble. Maintenant, à l'heure actuelle, comme nous sommes attrapés à la fin de 2020, il n'y a pas de solution pour cela dans CSS. Il y a, cependant, une solution pour cela en JavaScript juste pour empêcher ce top d'être silencieux, si ennuyeux. Et je vais désactiver l'animation de la CSS. Retournez au fichier JavaScript, puis nous verrons comment nous pourrions le faire avec JavaScript. En fait, nous pouvons, nous pouvons gagner du temps ici, prenons celui-là. Et nous sommes venus changer ce bit pour être à l'échelle 0.8. Maintenant, c'est exactement la même situation que nous avions avec tous les CSS un. Mais l'API Javascript Web Animations comme une astuce a appelé le manchon. Vous pouvez également à l'intérieur de vos options, vous pouvez utiliser composite. Et il y en a quelques-uns. Vous pouvez voir ici, les chaînes que vous pouvez passer au composite s'accumulent au remplacement, remplace la valeur par défaut qui prend n'importe quelle animation précédente était en cours d'exécution et la remplace par cette nouvelle. Ce que nous voulons faire ici, c'est choisir. Et ce que cela va faire est de prendre notre deuxième animation et de l'ajouter à la première. Accumulez est similaire mais légèrement différent. On ne va pas entrer dans les différences de ça. Maintenant, je veux juste te montrer ce qui se passe quand on le colle aussi. Vous pourriez penser que c'est toujours cassé, n'est-ce pas juste parce que ce que je n'ai pas fait, c'est que je n'ai pas défini la direction pour être ultime à la minute. Il se réinitialise. Mais en faisant cela, vous pouvez voir que nous obtenons cette belle combinaison de ces deux animations séparées, quelque chose que vous ne pouvez tout simplement pas faire avec CSS. Une autre chose à noter à ce stade est que vous pouvez voir que ces animations sont écrites ici, ils jouent immédiatement. Maintenant, c'est peut-être ce que vous voulez faire. Donc il y a un, il y a deux façons de résoudre ce problème. Le moyen le plus simple serait de m'assigner, me tourner comme l'autre. Et celui-ci va être Scale me. Et ce que nous pourrions alors faire, c'est aller tourner peut parsemer les piscines. Et ils devraient éteindre l'un d'eux. Et ensuite, vous pourriez aussi me faire des dipôles à l'échelle. Et ce que vous pouvez faire ici, c'est que vous pouvez, dès que vous avez défini une animation, vous pouvez immédiatement parce que nous avons, nous l'avons assigné à une const là-bas. Nous pouvons alors utiliser cela pour dire, cette chose est attachée, c'est une animation et la mettre immédiatement en pause. Et puis tu pourrais choisir de tirer ça. Et d'autres événements comme un bouton en cours de clic ou autre animation de finition comme nous regardons cela maintenant, ainsi que l'occasion de ranger cela un peu. Chaque fois que nous avons regardé ces animations jusqu'à présent, nous avons juste passé tout directement dans la fonction animate, qui est très bien ici. Mais lorsque vous faites quelque chose d'un peu plus grande échelle, il devient rapidement difficile de gérer toutes ces images clés et différentes fonctions de synchronisation. Dans la prochaine vidéo, nous allons juste passer un peu de temps à regarder comment vous pourriez refactoriser ça pour le rendre un peu plus facile à gérer. 13. 13 WAAPI: Revenez à il y a, espérons-le, quelques millisecondes. Dans la dernière vidéo, nous étions arrivés à ce point où nous avions, nous avions fait de nous tourner presque CSS ou JavaScript. Et nous avons regardé la joie de cette propriété composite que vous pouvez utiliser en JavaScript pour combiner deux animations ensemble. Si vous vous souvenez, cela nous donnait la possibilité d'avoir une échelle en cours d'exécution sur une animation, une rotation en cours d'exécution sur une autre animation, et obtenir le résultat de ces deux ensemble dans le DOM. Profitez de l'occasion alors que nous avons relativement peu de code sur la page qui juste refactoriser cela légèrement et le rendre plus gérable. À l'heure actuelle. Chaque fois que nous courons dans cette fonction d'animation, en passant dans les images clés et les fonctions de synchronisation tout comme, comme des objets. Donc, probablement la chose la plus simple que vous pouvez faire si vous avez un tas d'animations est que vous pouvez nommer vos images clés et les séparer. Donc, dans ce cas, bien que ce soit très simple, nous pourrions dire const, spin kf et évidemment ne pas avoir à les nommer de cette façon. J' ai juste, j'ai tendance à mettre kf, kf à la fin ou au début juste pour que je sache que c'est une image-clé Miss vient. Et tout ce qu'on va faire, c'est juste prendre ça et public comme ça. Et puis on passera. Au lieu de cela, nous allons passer cela en latin, ce printemps k, f. Et puis cette chose nous pouvons sortir et nous pouvons dire const, spin timing. Et puis avec un meilleur regard, oui, on y va. Donc, tout fonctionne toujours de la même façon. Mais ce que nous faisons, c'est que nous sommes, nous séparons nos images clés en un objet différent et nous séparons tout notre temps pour cette animation, généralement, vous avez tendance à le faire parce qu'avec les images clés, vous ne serez pas être toujours en passe juste une chose comme ça. Typiquement, ce sera un tableau et un tas d'images clés. Et voir tout cela à l'intérieur de la fonction animée peut devenir un peu désordonné. Donc on va faire la même chose maintenant avec celui-là. Et tu pourrais empiler tout ça sauf le top si tu le voulais. Supposons donc que nous allons grandir cette échelle KF Wiki frames. Et nous dirons, mettez-le ici juste à là dans un contexte d'audit sensé, d'échelle, de timing. Et encore une fois, on va prendre ça. Et puis si vous imaginez ici, a juste fait qu'il est un peu plus raisonnable de penser à ces comme irrationnellement. Voici donc notre fonction animée et nous allons la transmettre, désolé, à l'échelle ou ici seulement, en passant toutes les images clés. Et notre temps et sauver ça juste pour que jolie fasse son truc. Et puis ce que vous pouvez trouver, c'est si vous travaillez avec, une grande interaction. Une fois que vous avez compris les images clés, vous pouvez coller plus ailleurs et juste importer des hommes et garder la, garder la logique de ce que vous êtes l'animation est de faire à ces belle, petite cause succincte à la fonction animée. Vous verrez ce genre de modèle de plus en plus que nous allons construire un petit projet ensemble. Pour vous donner un exemple, supposons que nous ayons un bouton, ajouter un événement, écouteur, écoutez. Et puis il est plus facile de faire des appels comme ça. Plutôt que comment dans tout le temps signifie et plus vieux. Les images clés à l'intérieur si et si vous avez réussi cet automne, je pense que vous savez, tout ce dont vous avez besoin, pour commencer à construire ce projet avec moi. Donc, dans la prochaine vidéo, nous allons jeter un coup d'œil sur le projet qui va construire et nous allons aller ligne par ligne section à travers l'article fini. Et j'espère qu'à ce stade, il sera assez clair ce qui se passe. Alors allez vous chercher une tasse de votre boisson préférée. Ce sera probablement long. Je te verrai là dans un instant. 14. Aperçu du fichier d'animation: Dans cette vidéo, nous allons tout couvrir en dehors de l'écriture des animations elles-mêmes. Donc je vais vous emmener à travers toute la structure de ce projet. Juste pour que vous compreniez la mécanique de tout ce qui se passe autour des animations elles-mêmes et comment je suis arrivé à cela, ce point avec les différentes choses dans le DOM et comment elles sont positionnées. Je ne veux pas qu'il semble que je brille sur un peu de la mise en œuvre. Donc, c'est tout ce qui obtient le HTML et comment il est arrivé là, a obtenu SVG de la façon dont ils ont été optimisés et mis dans le DOM, le style de base dans et comment cela a été mis en place. Donc, si tout ce que vous pouvez vivre sans, par tous les moyens, passez à la vidéo suivante où nous parlons des animations réelles dans ce projet. Mais sinon traîne autour et je te guènerai à travers tout ce qu'on a fait. Vous pouvez voir que nous avons un élément principal ici. Et dans les vidéos précédentes, nous vous avons montré la semaine. Je vous ai montré ces contrôles en bas, c' est-à-dire les différents boutons que nous avons ici. Vous pouvez également voir ici il y a cet élément de côté ici où c'est juste où je donne du crédit à l'œuvre et d'où ça provient. Le, le genre de bit intéressant en termes de projet lui-même et de choses que vous pouvez voir se dérouler pendant que vous saurez à travers ces scènes. Tous les actifs graphiques provenant d'un site appelé vector easy. Donc, si vous allez vers vector easy, recherchez quelque chose qui est dans le genre de chose que vous êtes intéressé à utiliser. Donc évidemment, j'ai choisi quelque chose sur le thème de l'espace, mais vous pourriez choisir quelque chose, eh bien, ce que vous voulez. La chose clé à faire, deux choses à prendre en compte. Vous avez besoin de l'écran un peu plus large. Vous devez vous assurer que vous prenez l'éditeur compatible. Et puis n'importe laquelle de ces choses que vous cliquez ensuite, vous pouvez voir que vous obtenez ce petit bouton d'édition ici. Pour des raisons que je ne comprends pas quand vous écran est petit ou que les capacités enlevées. Donc nécessiteux un peu plus large, cliquez sur le bouton d'édition. Et puis ce que vous pouvez faire est que vous pouvez en fait simplement télécharger l'actif directement depuis cet éditeur ici. C' est effectivement ce que j'ai fait. Donc, si vous imaginez que j'ai attrapé l'effet SVG apps facile. Et puis ce que j'ai fait c'est que j'ai fait tout ce que j'ai fait. J' utilise sketchier, mais évidemment vous pourriez utiliser un faux miroir ou quelque soit vos paquets graphiques préférés, collez-le dans chacun des actifs qui sont Non, j'étais susceptible d'avoir besoin et leur a donné un titre. Et puis une chose que j'aime toujours faire, si jamais je vais mettre de l'actif SVG sur le web, alors je le ferai toujours. Il existe un outil appelé SVG, qui optimise essentiellement les fichiers SVG. Et encore mieux que mal à l'aise. Et ce type appelé Jake Archibald mitter, un outil qui enveloppe SVG, qui est un outil en ligne de commande, le place dans une interface graphique agréable. Donc, dans ce cas, je voudrais obtenir mon tableau d'art ici, copier le code SVG. Ouvrez SVG, collez dans mon balisage, puis il vous donne ces deux onglets ici, les tablettes d'image, vous venez de vérifier que rien n'a mal tourné après les optimisations ont été faites. Mais vous pouvez voir ici la différence dans le code. Je vais juste faire ce plein écran pour un instant. C' est le code optimisé. Et puis c'était l'original. Donc, vous pouvez voir qu'il enlève beaucoup d'espaces, normalise tous les nombres, supprime tous les éléments qui ne sont pas nécessaires. Le résultat est aussi longtemps que la chose semble que vous voulez qu'elle regarde. Vous pouvez voir ici nous avons une économie de 64 % dans la taille du fichier. Ce n'était donc pas massif avant, mais il est descendu un peu. Vous pouvez juste copier ça de là maintenant. Et c'était notre Moss. Et puis ce qu'il faisait est à l'intérieur du HTML. Il suffit de déplacer ça là-bas. Donc oui, à l'intérieur du HTML, tout ce que je fais est pour chacun des actifs graphiques de les envelopper dans un élément. Et je viens de coller ce code SVG directement à l'intérieur de l'élément. Et cette classe sur l'élément rapide est juste pour que nous puissions mettre un CSS de positionnement de base sur ce qui a été fait pour chacun de ces éléments ici. Donc vous pouvez voir ces noms exactement les mêmes centres commerciaux Saturne Lune, planification des frappes de roquettes, Eddie. Voilà, tu y vas. Oh, de l'autre côté de la lune, des étoiles au fond. Vous pouvez juste faire sur couche, mais c'était une sorte d'évasion étoile si vous voulez, que vous pouvez voir derrière chacune des scènes. Donc, vous pouvez simplement le faire là-bas avec ces fusions sans l'utiliser comme élément d'arrière-plan, que vous verrez dans une minute. Et puis cette div ici est juste notre première sorte de texte de défilement de Stowe demander. Il est le genre de viande et de pommes de terre de ce que nous aurons à faire quand nous viendrons animer dans trucs et les styles de base pour s'en occuper. Vous pouvez voir ici nous avons quelques bases à partir de HTML. Et notre toile d'élément rapide est ce que nous appelons cette zone ici. Il y a l'arrière-plan de nos magasins et chaque ensemble pour nous donner notre échappée star. J' ai pensé que cette ligne valait la peine d'appeler parce que je suis passé par là. Mais j'ai pensé qu'il était assez intéressant de parler brièvement au début d'avoir les étoiles de fond, ces choses ici. J' ai eu ces plus brillants que vous les voyant là-bas. Et ce qu'il faisait, c'est que je les collais. C' était en utilisant l'élément de fond, coller les styles à l'arrière, puis pour mettre un lavage plus sombre sur le haut et sombre et ces étoiles vers le bas. J' étais paresseux et je le faisais dans le code au lieu de le faire dans l'éditeur graphique. Mais pendant que je faisais est d'utiliser un dégradé linéaire, qui n'était effectivement pas de dégradé, mais cela vous permet de mettre une superposition semi-transparente sur le dessus d'une image avec CSS. Il est un peu une sorte de truc CSS. Cependant, ce que j'ai trouvé quand je l'ai fait, c'est que la qualité de l'animation, pas la qualité, que la performance d'animation a commencé à souffrir. Donc je dirais parfois que c'est le genre de choses que vous pourriez faire un choix. Pas réalisé pourquoi notre animation lui continue à essayer de garder vos éléments aussi simples que possible, les choses que vous ajoutez de la capacité et des filtres à. Et CSS sont moins susceptibles d'animer Eh bien lorsque vous les déplacez autour de l'écran, l'essuie-glace, que vous pouvez voir ici que c'est quand chaque CNN, vous pouvez voir que nous avons différentes sortes de transitions. Encore une fois, en quelque sorte éteint l'écran de style poêle se dissout. Et la partie blanche est ce que nous utilisons pour faire ça. Et c'est juste un seul élément que nous bougeons à nouveau autour de la page avec le y p, vous pouvez voir qu'il y avait un, il y avait une ombre de boîte là-dessus à 1 où encore une fois, j'ai fini par tirer cela parce qu'il n'a pas vraiment ajouté beaucoup. Et encore une fois, c'est plus et cela nécessite plus de puissance de calcul. Si vous avez un rendu, une ombre à l'écran et votre film sur nous, évidemment plus intensif pour l'ordinateur à faire. Tout ce que vous pouvez voir est positionné tous nos actifs graphiques. Je les mets à l'intérieur de la toile. Absolument position. Donc par défaut, ils vont tous s'asseoir en haut à gauche de cet élément rapide. Supposons que les choses restent à moitié à filtrer parce que j'ai senti que ça en valait la peine. Donc, si vous voulez vous ramener au début ici, j'ai aimé ce petit genre de lueur de la lune, un plein qui était tout à fait un atout laissé que dans pourtant tous ces éléments sont positionnés, certains d'entre eux transformation basique sur juste positionnez-les quelque part raisonnable sur la page. Et puis nous allons animer de là à autre part. Cela vaut la peine de le refroidir juste au cas où vous n'êtes pas conscient lorsque nous utilisons la position absolue dans NCSS, ces éléments à nouveau, pour être positionnés par rapport à leur parent d'élément non statique le plus proche. Donc, dans notre cas, vous pouvez voir ici tout Canvas qui est le parent de tous ces actifs graphiques. Nous avons donné cette position de relative, ce qui signifie que nos éléments absolument positionnés se positionneront par rapport à cela. L' autre bonne chose en termes d'animation est que vous n'avez pas besoin d' utiliser une transformation et cela n'affectera pas les autres éléments. En règle générale, si vous êtes éléments dans un flux de documents normal et que vous les déplacez avec des marges, paddings et tout ce genre de choses, ils vont interférer avec tout ce qui est également dans le flux de documents. Donc, à cause de ce que nous faisons ici, j'ai tout fait positionné pour qu'ils puissent tous bouger indépendamment et n'affecter aucun autre élément. Ensuite, juste un peu plus loin dans le CSS, vous pouvez voir ici, nous avons une transformation par défaut sur ce type initial de taxe Star Wars juste pour abandonner la perspective tordue. Donc, en utilisant quelques transformations, ils le tournaient et le traduisaient. Bande dessinée de tous les autres mots qui riment avec ça. C'est ce qu'on y fait. Et puis nous sommes aussi arrivés ici, vous pouvez voir des trous noirs tourner quand nous arrivons sur le trou noir. Tu verras que quand on mettra le trou noir, il tourne autour. Et j'utilise juste une animation CSS ici pour le faire plutôt que de le faire en JavaScript. Juste pour vous montrer, vous pouvez mélanger et assortir ces deux choses ensemble assez heureux. Quand il s'agit de JavaScript. Beaucoup de choses que vous avez déjà vu dans les vidéos précédentes en termes de configuration de base de ce fichier, nous affectons tous nos boutons aux concerts. Et nous avons quelques écouteurs de clic en cours, sur le suivant et le précédent. Nous en avons un sur les pores, que nous allons voir dans une vidéo plus tard, et sur le bouton trou noir aussi. Tout ce que nous avons sur la page tous les éléments pour les actifs graphiques que nous avons générés coincés dans le DOM. Ils sont tous référencés ici. Et puis nous sommes dans les variables que nous avons configurées dans la vidéo précédente pour notre fonctionnalité suivante et précédente. Ainsi, nous pouvons passer à travers ce, ces séquences d'animations dans les quelques vidéos aussi bien. Si vous vous souvenez, nous avons cherché à refactoriser ce code de sorte que nos images-clés et les timings d'images clés étaient dans des scientifiques distincts, des variables ou des constantes distinctes dans ce cas, dans ce cas. Donc, voici un tas de nos cadres clés et ne vous inquiétez pas pour ça pour l'instant. Les horaires ici offrent chacune des scènes et je vais vous expliquer pourquoi nous l'avons fait ici pendant que nous continuons dans la prochaine vidéo. Ou les animations pour les différentes scènes sont toutes gérées dans cette fonction unique et m, que j'étais trop paresseux pour écrire de l'animation. Je ne voulais pas qu'il soit confondu avec animate qui étaient évidemment une méthode réelle de l'API. Ennemis où toute la magie se produit. Et puis en dehors de cela, nous avons traité la fonction de clic de direction, que nous avons traversé auparavant. Donc on n'a pas besoin de s'en soucier. Basculer la lecture est ce que nous utilisons pour faire une lecture et une pause. Et encore une fois, nous y reviendrons bientôt. Et puis je vais à nouveau fonctionner trou noir, ce qui viendra plus loin. En termes de notre fichier JavaScript. On fait juste référence à nos contrôles. Nous branchons les commandes aux fonctions que nous allons piloter pour faire ce que nous avons besoin d'elles. Nous faisons également référence à chacun des éléments graphiques que nous pourrions souhaiter animer. Et puis principalement, Nous avons une charge de bateau de différentes images clés assignées aux constantes. Et puis nous avons une fonction, fonction principale, qui va commencer à animer ces éléments. Et c'est ce que nous avons enfin à faire maintenant et nous allons regarder dans la prochaine vidéo. 15. Écrire les animations: En supposant que vous n'avez pas commencé sur cette vidéo en particulier, vous saurez ce que nous regardons sur le côté gauche de l'écran ici. C' est beaucoup d'animations d'images clés différentes. La couverture de tous les bits possibles d'animation sera les différentes images clés que j'ai besoin d'exécuter sur différents éléments afin de faire fonctionner cet ensemble d'animations. Ou défiler assez taxé sont rocailleux voler à travers avec les planètes, se déplacer légèrement. La petite chose de titre qui arrive, le WIP se déplaçant à travers. Ça. Pourquoi rétrécir là bas que la fusée à venir et à travers Mars, se déplaçant à travers la piste de la fusée, boosters, éteindre et alittle extraterrestre surgit aussi. Chacun d'entre eux est couvert par ces différents ensembles de cadres clés ici. J' ai donc essayé de les nommer un peu judicieusement. Mais la chose clé ici est de dire qu'il n'y a pas, il n' y a pas de compétences magiques que vous pouvez apprendre à les obtenir correctement. C' est juste beaucoup de temps, essais et d'erreurs, pour que les choses fonctionnent comme vous voulez qu'elles fonctionnent. La seule chose que nous n'avons pas regardé jusqu'à présent, Il vaut la peine d'appeler est que vous êtes en bas de ces images clés, vous verrez occasionnellement décalage ici. Maintenant, ce que le décalage fait, c'est qu'il vous permet de faire l'équivalent de pourcentages dans les animations CSS. Et l'animation CSS. Nous pourrions dire que non, nous faisons cela 50%, nous le faisons à 100%, Nous le faisons. Ça pourrait être aussi facilement 73, désolé, pas 730, 73 %. Et à cela, c'est évidemment ce que vous faites à ce moment précis, alors que les images clés traversent. Et ça, si ça dure cinq secondes, ce sera à un moment particulier. Et si l'animation était exécutée pendant dix secondes, elle serait à 73% de dix secondes. Donc, vous pouvez faire la même chose en mouillé avec l'API Animations Web en utilisant ce mot-clé offset, vous pouvez voir que ce n'est pas une chaîne, c'est un entier et c'est entre zéro et un, avec une note de 100% étant 0%. Donc 0,2 est à 20%. C' est donc aussi simple que cela l'est lorsque vous les images clés, et surtout ce sont les images clés avec lesquelles vous les transmettez, pas les options de synchronisation. Vous verrez ça parsemé ici, mais c'est essentiellement ce que c'est. n'y a rien ici que vous n'avez pas encore vu, c'est que nous allons passer par quelques exemples. offres de texte si cruelles ou le texte de Stowe. Et vous pouvez voir ici, c'est là que nous commençons. Et puis on utilise juste le Translate Y pour extraire le Feng au loin. La plupart d'entre eux n'ont que deux images clés, c'est une sorte de point de départ et de fin. Il y en a quelques-uns qui ont plus comme celui-ci que nous venons d'examiner ici en gros, même s'ils regardent, mettons un peu plus d'espace ici. Même s'ils ont l'air, cela peut sembler un peu intimidant au début, mais il n'y a rien que vous ne serez pas habitué à faire en CSS si vous n'avez pas du tout des animations CSS. C' est juste beaucoup d'entre eux. Une fois le total de tout ce qui se passe. Encore une fois, ce modèle, Vous devez être utilisé pour les crochets pour les images clés du tableau, séparés par des virgules ou un objet chacun. Alors on y va. Les crochets sont notre objet pour la première image clé et la deuxième image clé. Et vous pouvez voir, même si ceux-ci sont écrits différemment à des endroits différents, c'est exactement le même modèle. Pour faire ça, tu as fait quelques leçons, Mark. Je crois que tu l'as maintenant. Donc, dans la leçon suivante, nous allons examiner comment nous exécutons ces images clés ensemble et construisons réellement l'ope des animations. 16. Séquencement des animations: Dernière vidéo, nous étions en train d'entrer dans l'épaisseur de tous les fichiers JavaScript principaux qui exécute toutes ces animations pour notre projet que nous construisons ensemble. Nous regardons à travers ces cadres clés et nous pouvons voir qu'ils le sont, alors qu'il y en a beaucoup. Et cela peut sembler déroutant au début. C' est le même modèle de base que nous avons, nous avons utilisé plusieurs fois tout au long et est essentiellement le même que ce que vous feriez avec CSS. Au-delà de cela, nous voulons regarder maintenant notre fonction principale d'animation. Et si vous vous souvenez, ce petit projet fonctionne par nous ayant un compteur simple qui passe à travers les scènes que nous voulons exécuter. Et sur la base alors de quel nombre particulier étaient scène Ohno que nous sommes sur allaient séquencer un tas de ces animations et images clés à R1. C1 est effectivement ce qui se passe ici. Le texte du Stowe s'éteint. Une fusée se déplace à travers, mais un texte entre et ces planètes se déplacent doucement. La première chose que vous verrez ici, à l'intérieur de la section C1, c'est que je suis en train de réinitialiser les trucs sur le navire ici. Donc, la raison pour laquelle cela est fait ici est parce que vous pouvez revenir à la scène pour la scène 1 de s2. Et si c'est le cas, nous devons faire face à cela en mélangeant tous les morceaux dont nous avons besoin au bon endroit. Maintenant, vous pouvez voir ici avec tous ces testament, ceux qui sont réinitialisés, la durée est définie sur 0, donc vous ne voyez pas réellement l'animation se produire. C' est juste un moyen rapide de récupérer tout là où il doit être prêt à exécuter l'animation proprement dite. Cette fonction d'animation fait tout ce que vous avez déjà vu beaucoup de fois. Maintenant, nous choisissons l'élément. Nous exécutons la méthode animée dessus. Et puis nous le passons dans nos images-clés qui, vous savez, défilent, défilent, désintègrent le texte ou s'estompent. C' est donc le référencement de nos images clés apparaissent. Et puis nous passons nos options d'animation, nos fonctions de chronométrage, nos durées et des choses comme ça. Et dans ce cas, tout cela dit courir avec 0 durée juste pour les réinitialiser à la normale. Donc les choses intéressantes commencent un peu plus loin ici. Et vous pouvez voir ici le texte cruel de Stowe textile. Nous commençons par courir pendant trois secondes. Le mode de remplissage est avancé de sorte que les styles sont conservés au fur et à mesure qu'il s'éteint. Et puis, intéressant, vous pouvez voir ici que la prochaine chose que nous obtenons, rappelez-vous au début quand j'essayais de vous vendre l'idée d'apprendre ce genre de choses. Une chose que vous pourriez faire avec une API JavaScript que vous ne pouvez pas faire avec les animations CSS. Comme séquençage. Vous pouvez exécuter une animation à l'arrière d'une autre animation. Et nous le faisons avec l'API JavaScript Web Animations en utilisant un ajout assez récent à la langue, ce qui est des promesses. Et ce que font les promesses, c'est qu'ils nous laissent dire fini, qui est fondamentalement comme quand cette chose est terminée, puis allez faire cette autre chose. Dans la prochaine vidéo, je vais me battre et essayer de vous donner une version de profane de la façon dont les promesses fonctionnent et pourquoi elles sont si importantes pour ce que nous faisons ici. Mais pour l'instant, il suffit de considérer certaines des autres choses qui sont possibles ici en JavaScript qui ne sont pas possibles ou pas aussi faciles avec CSS. Vous pouvez voir sur certaines de ces animations qui sont en cours d'exécution en termes de durée, nous pouvons dire durée C1 divisée par un certain montant. Et ce n'est pas juste pour être intelligent Coyle. C' est parce que si nous décidons de changer la durée C1 à dix secondes ou 15 secondes, nous n'avons pas à revenir dans notre animation et tout en temps réel. Le fait que tout cela soit basé sur valeur initiale signifie que nous n'avons pas à nous inquiéter à ce sujet. Vous pouvez voir ici que nous disons quand cette chose est finie, chose de la réalité, quand cette chose est terminée, chose de malhonnêteté. Et sur et sur ça va. Et vous pouvez voir ici à la fin, nous utilisons le fini de ne pas exécuter une autre animation était en fait de juste changer quelque chose dans le dôme. Bien que je puisse apprécier si vous n'êtes pas habitué à écrire de l'animation en JavaScript, cela peut sembler assez compliqué, livre assez intimidant a grandi le code. Prenez votre temps et regardez à travers et vous verrez que c'est en fait tout un tas de choses que vous savez déjà faire. Donc, avec tout ce qui dit, je veux souligner l'importance et l'utilité de cette idée de chaîner les animations utilise ces promesses qui font partie de l'API Animations Web. Dans la prochaine vidéo, nous allons parler des promesses en général et pourquoi cela nous est si utile. 17. Explainer de base: Si vous regardez cette vidéo et que vous savez ce que JavaScript promet, ou un pour vous regarder la mauvaise vidéo. Allez sur la suivante. Pour tout le monde. Je vais essayer de la manière la plus simple possible d'expliquer quelles promesses sont en JavaScript. Maintenant, laissez-moi être clair. Cela ne va pas me gagner un endroit que Google, je suis intéressé ici, pas dans la précision technique, mais plutôt simplement transmettre les fondamentaux du concept de promesses. En JavaScript. Habituellement, l'analyseur descend ligne par ligne et exécute chaque ligne de code dans le fichier JavaScript. Ce qu'il ne fait pas par défaut est de savoir attendre quelque chose. Donc, par exemple, il toucherait Align. Tu diras, va me chercher ce message sur Internet. Il n'attend pas habituellement que ce morceau de texte revienne avant qu'il passe à la ligne suivante, pas plus qu'il ne devrait, où nous aurions du JavaScript très, très lent dans la nature. Cependant, précédemment, nous avons contourné ce problème avec quelque chose appelé callbacks. Une fonction de rappel est simplement le terme que nous utilisons pour décrire lorsque vous passez une fonction en tant qu'argument à une autre fonction, qui est ensuite exécutée à partir de la fonction auteur. Et tu verrais un modèle où quelque chose va entrer. Ils sont, il y aura un peu de code et ensuite vous obtiendrez votre rappel ici. Et ça aurait le nom qu'il a besoin d'avoir. Cela va courir après ce premier bit. Donc vous pourriez avoir des options dans leur, Angie irait, Voici mon corps principal de fonction. Et vous faites tout ce que vous deviez faire à l'intérieur de votre fonction là-bas, en utilisant les options qui avaient été transmises. Et quand tout ce qui avait été fait, tu ferais quelque chose comme ça pour courir. La deuxième fonction que vous transmettez lorsque vous l'appelez. Cela a assez bien fonctionné. Bien qu'il finisse avec un code qui enrobe la pyramide du malheur, où il va triangulaire, plus bas, triangulaire, vraiment suivre. Il traverse la page. Nous pouvons faire mieux que cela maintenant avec des promesses en JavaScript, nous pouvons tous nous identifier avec le fait que nous avons fait des promesses aux gens. Parfois, ces promesses sont remplies et parfois elles ne le sont pas. Et ils fonctionnent exactement de la même manière en JavaScript. Dans une promesse vous permet de représenter quelque chose qui peut ou ne peut pas être rempli ou rejeté. Pourquoi cela est intéressant pour nous avec une API d'animations JavaScript est parce que l'une des choses fondamentales que nous avons voulu faire avec les animations et CSS est fausse. Une animation du dos d'une autre animation sans avoir à faire la gymnastique mentale de comprendre les délais corrects pour que les choses fonctionnent en séquence. Et nous l'utilisons largement dans notre petit projet pour faire en sorte qu'une chose se produise. Et une fois que cela est fait, une autre chose arrive et encore et encore. Et la syntaxe ou tout ce que vous devez comprendre dans le but d'utiliser cette API JavaScript est ce point fini puis mots-clés, mots-clés, syntaxe. Quand une animation est terminée, vous, vous pouvez la voir si cet espace n'est pas nécessairement, c'est juste la façon dont il est formaté. Vous exécuteriez la méthode animate. Et puis immédiatement vous allez point fini point puis. Et vous pouvez voir ici, nous utilisons une fonction de flèche afin que vous puissiez passer quelque chose par là si vous voulez mettre typiquement que vous n'êtes pas. Et puis vous lui donnez une fonction de flèche. Et puis il y a le corps de la prochaine chose que vous voulez arriver. Donc, dans ce cas, le texte défile, supprimant un attribut dans le DOM, puis j'exécute une autre animation. Et là encore, j'ai une promesse à ce sujet. Et quand celui-là finira, je fais la prochaine chose. Avec l'API JavaScript Web Animations. Vous n'avez pas besoin d'entrer dans la complexité de savoir si une promesse est en attente ou si elle est rejetée. Ce sont les sortes de choses qui vous inquiètent lorsque vous faites de la programmation réelle, si vous le souhaitez, plutôt que de simplement déplacer les choses dans l'interface utilisateur. Mais ce concept de promesses nous est encore très utile pour cette raison. Donc, les seules choses que vous avez vraiment besoin de prendre de ceci ou qui promet une chose impressionnante en JavaScript qui nous permet de faire les choses de manière asynchrone. Et la syntaxe pour nous de le faire avec des animations et de séquence animations est dot fini accolades dot van, fonction flèche. La prochaine chose que tu veux faire. Et vous pouvez les enchaîner autant que vous le souhaitez. Maintenant, une autre chose vraiment géniale à propos de l'API Animations Web est le fait qu' il est très simple de mettre en pause et de redémarrer les animations. Et nous verrons comment le faire dans la prochaine vidéo. En utilisant nos nouvelles promesses de meilleur ami. 18. Pause et redémarrage et redémarrage: Une des grandes choses. Une autre grande chose à propos de l'API Animations Web est qu'il facile de mettre en pause et de rejouer des vidéos. Rappelez-vous dès le début, quand nous avons créé notre page d'index, nous avions un bouton que nous avions inventorié piscines. Et nous allons regarder cela maintenant et voir comment c'est grand ouvert, voir comment il met en pause et joue l'animation. Donc juste pour te donner une idée de ce qui se passe. Ainsi, au fur et à mesure que notre animation joue, nous pouvons cliquer sur pause. Et lorsque vous cliquez à nouveau dessus pour arrêter les choses à nouveau. Et la façon dont cela fonctionne apparaît en haut de tous les fichiers. Nous venons d'ajouter un écouteur d'événement au bouton pause. Et vous pouvez voir ici que lorsque vous cliquez dessus, nous exécutons une fonction appelée bascule lecture. J' ai réduit toutes les autres fonctions qui ne sont pas pertinentes. Et c'est une petite fonction que nous regardons ici. Donc, en bas de notre fichier ici, vous pouvez voir ici notre fonction de lecture totale. Tout ce qu'ils stockent. Il existe une méthode qui fait partie de l'API Animations Web, vous exécutez sur les documents, et elle s'appelle Obtenir des animations. Et ce qu'il fait, c'est qu'il recueille toutes les animations qui s'exécutent dans ce document. Et puis vous pouvez faire essentiellement ce que vous voulez faire avec ces animations. Vous pouvez inspecter les prophéties de ces animations et vous pouvez également apporter des modifications à ces animations. Donc, dans ce cas, ce que nous faisons ici, c'est qu'il vous donne la méthode de la carte de points, qui est une méthode que vous pouvez exécuter sur des tableaux généralement. Mais parce qu'il y a un tas de ces animations que vous pouvez cartographier, ce qui est fondamentalement, si vous ne savez pas quelle est la carte, c' est comme faire une boucle sur un certain nombre de choses. Il vous laisse parcourir quelque chose. Donc, dans notre cas, nous disons avoir toutes les animations et ensuite nous voulons les boucler dessus. Et vous pouvez voir ici que j'ai, J'ai intitulé chacune de l'animation, J'ai inventorié l'animation. Et ce que cela me permet de faire est de dire, si l'état de jeu de l'animation est en cours d'exécution, IE fait une animation qui se passe, alors ce que je veux faire est de la mettre en pause. Cependant, si l'animation est déjà en pause, alors je veux la jouer. Donc, c'est juste un bascule très simple, mais c'est en utilisant ces méthodes que nous obtenons avec cette API. Donc juste pour passer une fois de plus, nous disons, donnez-moi toutes les animations, qui sont là. Et puis nous devrions les cartographier pour parcourir toutes les animations que nous avons trouvées dans le document. On nomme. Chaque instance de ces animations. Vous pouvez appeler des saucisses si vous voulez, ou un manteau ou une fenêtre. Cela n'a pas vraiment d'importance, est juste un identifiant pour que nous itérons sur eux. Et puis je dis, si cette animation particulière a un état de jeu de Rodin, vous pouvez le voir. C' est une chaîne et j'utilise l'égalité ici pour dire que c'est essentiellement trois signes égaux. Si nous courons, arrêtez-le. Donc encore une fois, c'est ce point pores parenthèses appelle cette fonction, la met en pause. Sinon, si l'animation elle-même était déjà en pause, alors nous voulons qu'elle joue. Et c'est aussi simple que ça. Cela vous permet de rassembler n'importe quoi. Animations sage, si elle a été écrite en CSS, JavaScript, puis pause plaque. Et il y a aussi d'autres méthodes que nous avons disponibles comme dot council, dot finish. Et nous allons profiter de l'occasion dans la prochaine vidéo, nous allons essayer de refactoriser ce que nous avons à la minute où le résultat final sera exactement le même ou très proche. Mais ce que je veux faire est de regarder ce qui se passerait si nous refactorisions le code que nous avons et essayions de base plus autour de l'assignation des animations aux variables et de les exécuter et quelles sont les choses sans lesquelles nous pourrions faire ne donnez nous aux économies d'écrire les choses d'une manière différente. Donc on va le faire dans la prochaine vidéo. 19. Refactoriser notre code: Dans la dernière vidéo, nous avons examiné comment nous pourrions facilement mettre en pause et lire toutes les animations qui se produisent à tout moment dans le document. Et en conséquence, nous avons examiné les méthodes de l'API telles que les pores et le jeu de points. Et a également mentionné qu'il y avait des choses comme la fourniture de points et l'annulation de points. Et cela m'a fait penser, je me demande à quoi ressemblerait ce fichier si nous le refactorisions, pour le baser plus rond en utilisant ou en configurant les fonctions avec des variables. Donc, cela pourrait être appelé avec le jeu de points et les pores de points et l'inverse de points, plutôt que le genre de méthode déclarative que nous avons fait jusqu'à présent. Donc, nous allons compresser les prochaines heures en un temps très rapide et rapide, si vous voulez, de moi refactoriser ce code. Ensuite, nous examinerons ce que j'ai dortoir et nous verrons s' il y a des avantages à faire ça et quels sont les compromis, tout le reste. On se voit dans 40 secondes en temps réel, quelques heures pour moi. J' ai toutes ces animations et il y aura probablement plus que j'ai juste besoin de courir le même temps actuel est égal à 0 et jusqu'à pores pour arrêter et ainsi de suite. Je sens plus si je regarde juste une sorte de fonctionnalité abstraite de ce bit dans une fonction. Donc, je vais faire la réinitialisation des fonctions et des animations. Et cela va prendre un tableau d' animations, d'animations pour chacune. Et je vais juste faire une boucle sur ça. Fondamentalement, nous Animation, dire point d'animation actuel est égal à 0 et l'animation ne le font pas. Et puis ici, je devrais être capable de juste faire des animations VSAT. Et puis je vais passer dans ce tableau de toutes les choses que je veux exécuter sur l'auto obtenu dans le texte de Stowe off et la planification du trafic de phase M sur lui. Parce que s'estomper et s'évader. Mon panneau. Intro. Ok, une autre chose devrait fonctionner exactement de la même façon. Je dois te parler du plus chaud en deux ou trois heures. Comparons maintenant les deux fichiers. Donc c'est ce que nous avions avant. Et puis nous le comparerons avec celui-ci, qui est celui qui a été refacturé. La plupart des choses en haut sont exactement les mêmes. Vous pouvez voir que nous regardons des choses comme les images clés que je viens d'ajouter kf au grand, au début. Juste pour que je ne sois pas confus entre ce qui est une fonction pour toute l'animation et ce qui est juste les images clés. Rien n'y est matériellement changé, juste, juste légèrement renommé. Là où ça devient un peu différent, c'est une fois que tu auras dépassé le, les durées de synchronisation ici, vous pouvez voir, eh bien en fait je vais juste passer une minute. Si vous revenez à notre fonction d'animation principale fonctionnelle anime maintenant, il semble tout à fait différent par rapport à notre fonction principale comme il l'était auparavant. Vous pouvez le voir avant qu'on réinitialisait des choses comme ça. Et puis nous décrivons chacun juste là dans la fonction. Ensuite, nous allons passer à l'utilisation de nos promesses pour séquencer la prochaine animation qui semble légèrement différente. Maintenant, quoi, ce que nous avons fait est pris, pris quelque chose comme un essuie-glace animer ça. Et j'ai enveloppé ça dans quelque chose comme ça. Donc, ce morceau ici est essentiellement ce que vous obtenez. Le. Et puis ce que je fais, c'est que je l'attribue avec un nom pour que je puisse appeler avec un jeu de points ou que je puisse l'arrêter avec des pores de points. Donc plus loin, vous pouvez voir que la fonction d'animation réelle elle-même est beaucoup plus décalée parce que nous faisons juste choses comme cette chose jouer quand rien n'est fini. Animation Roma que l'animation Rona et puis exécuter cette animation. Et bien que ce soit sympa et compact, j'ai en fait trouvé cela plus difficile à raisonner et à réfléchir. Il obtient essentiellement le même résultat. Il reste quelques petits morceaux ici où je, je ne pense pas que ça marche aussi bien, mais c'était assez d' un refacteur pour me faire réaliser que je préfère en fait la façon originale. Ce qui est important ici, c' est qu'il illustre qu'il existe un certain nombre de façons d' écrire ces choses pour obtenir des résultats très similaires. Cela dépend vraiment de votre cas d'utilisation et de vos préférences. Mais vous pouvez voir ici des choses amusantes que vous, que nous n'avons pas regardées auparavant. Il y a des façons d'inverser une animation où vous pouvez utiliser le point inverse, mais cela inverse toujours la direction qu'il est juste en cours d'exécution. Alors qu'un taux de lecture de 1 est toujours en avant et qu'un taux de lecture de, de minus1, que nous avons obtenu quelques endroits ici, est toujours inversé. Donc j'ai ça de temps en temps. Annuler, où nous avons cette méthode d'annulation de points. Ce que le point annuler les portes de la méthode est essentiellement termine cette animation et marcher. C' est, c'est mort. n'y a plus rien de ce truc là. finition des points, les repousse et l'animation sur son point de terminaison, propulse immédiatement l'animation vers son point final. Donc, vous pouvez voir que quelque chose comme une scène trois, très, très compact de cette façon. Et nous utilisons cette fonction d'animations récentes pour simplement faire une boucle à travers tout ce que nous voulons le remettre au début. Donc, si vous comparez voir trois, c'est comme ça qu'on l'avait avant. C' est ça. Alors c'est là. Dans l'ensemble, la totalité, au total. Cette façon de le faire. Cependant, bien que cela semble compact, une fois que vous avez pris en compte le fait que vous devez réécrire tous ces éléments, tous les bits de morceaux apparaissent et les assignent à des constantes ou des variables. La taille totale réelle du fichier refactored est d'environ 565 lignes. Et l'original arrivait vers 459. Donc, c'est en fait plus long à certains égards, mais peut-être mieux de laisser cela dans les fichiers pour que vous ayez un aperçu à travers ma préférence, la façon dont nous l'avons fait à l'origine. Mais cette façon est également valable si c'est votre préférence. Maintenant, nous avons fait cette petite excursion de refactoring. On va y retourner et utiliser le code original, le code qu'on a regardé depuis le début. Et ce que nous allons faire ensuite est de regarder comment vous pouvez inspecter une transformation, quelque chose qui devait utiliser quelque chose appelé la matrice pour extraire les valeurs d'une transformation CSS. Et il y a quelque chose que nous pouvons faire maintenant avec l'API qui nous permet de ramasser des choses ailleurs sur la page sont déjà transformées et de les déplacer vers un nouvel endroit. On va regarder ça dans la prochaine vidéo. 20. Plus d'images: Plus de matrice. Ça ne veut pas dire que tu ne peux pas continuer à regarder des films surestimés de Keanu Reeves des années 90. Cependant, ce que nous pouvons faire est d'arrêter d'utiliser la matrice CSS pour essayer de comprendre ce qui se passe avec la transformation. Si vous n'avez aucune idée de ce dont je parle, Considérez la situation existante avec des animations CSS où vous allez mettre une transformation à un élément et en fonction de sa position actuelle, vous voulez lire cela avec JavaScript, obtenez les coordonnées de l'endroit où il se trouve en ce moment et le déplacer ou le modifier d'une manière ou d'une autre. Avec JavaScript. Historiquement, nous avons dû utiliser la propriété matrix. Maintenant, la propriété de matrice est ce que le navigateur compose toutes les différentes transformations que vous avez pu mettre sur un élément dans une syntaxe redoutable. Donc, il y a un véhicule d'outil, c'est tools.com en colère, CSS, slash générateur en pointillés transformation. Et cela nous permet d'aller belle, interface utilisateur simple. Vous pouvez simplement ajouter un peu de à quelques transformations différentes sur un élément ici. Et maintenant, ce qui est important à noter, c'est ce qui est généré. En bas. Vous pouvez ignorer les préfixes du fournisseur utilisés pour regarder cette ligne supérieure ici. C' est la valeur de la matrice, il y a le résultat de toutes ces autres transformations séparées. Et il est une façon succincte du navigateur communiquer exactement comment ça marche quelque chose à regarder. Cependant, quand vous venez de lire cela en JavaScript, il est très difficile d'essayer de comprendre quels bits la rotation, qui bits la, la transformation x, qui bits l'échelle. La bonne nouvelle est, avec l'API Animations Web, vous pouvez simplifier ce genre de processus de profit en utilisant simplement Get Computed Style. Vous pouvez transmettre une leçon à l'API Animations Web et l'utiliser comme point de départ pour une autre animation. Nous allons l'utiliser quand nous regarderons comment nous faisons fonctionner tous les trous noirs. Quand vous le faites dans la vidéo suivante. 21. Nouvelles animations au milieu en transformation: C' est potentiellement aller dans les mauvaises herbes un peu, mais je voulais vous montrer le genre de chose qui est possible lorsque vous animez avec JavaScript plutôt que d' animer avec CSS, si c'est ce à quoi vous êtes habitué. Donc, à l'intérieur de notre petit projet d'animation, vous pouvez voir que lorsque nous cliquons sur le côté de l'avant, payons chacun, ce bouton de trou noir s'allume pour nous d'utiliser. Maintenant, je vais juste rafraîchir ça à nouveau. Je vais vous montrer ce qui se passe quand on appuie sur ça. Donc, le savon de lumière trou noir, je clique trou noir, un trou noir apparaît et il suce beaucoup des éléments qui sont sur la page dedans. Maintenant, la façon dont cela est réalisé est la suivante. Nous avons branché notre bouton trou noir pour créer la fonction trou noir, ce qui est la chose que nous allons regarder maintenant. Notez donc le bas du fichier de projet, le dernier fichier de projet. Vous pouvez voir ici, cette caisse de trou noir fonction. Maintenant, je vais juste passer en revue le genre de pièces de configuration de cette fonction en premier. Même s'ils ne sont pas réellement à voir avec l'API Animations Web, juste pour que vous compreniez ce qui se passe. Tout d'abord, nous disons juste que nous avons un booléen que nous avons assis trou noir actif, ce qui est réglé pour être vrai lorsque le trou noir est activé. Si cela est déjà activé, nous ne voulons pas le redémarrer. Donc, si les trous noirs entrent déjà, ou l'index actuel e ne serait pas invisible, alors nous sommes fondamentalement juste de retourner la fonction que nous faisons un retour tôt là-bas. Alors ce que nous faisons, c'est pour toutes ces autres boîtes, pour la prochaine, la précédente et la pause. Si les trous noirs en cours d'exécution, nous voulons faire une pause. Il y avait juste si certains deviennent gâcher quelque chose et arrêter les animations rencontrées flux, quelque chose comme ça. Alors ce que nous faisons c'est que nous obtenons la zone de la toile par le genre de zone de scène. Et nous recevons la boîte rectangle du client. Donc, il nous donne toutes les informations de géométrie dont nous pourrions avoir besoin. Nous avons ensuite un flotteur aléatoire de fonction, qui si vous le nourrissez un minimum et un maximum, il vous donnera un chiffre aléatoire entre ces deux points. coordonnées aléatoires sont juste une autre petite fonction qui nous permet générer une valeur X et une valeur Y basée sur notre taille de toile. Nous avons ensuite ce truc appelé articles applicables. Et c'est juste un tableau que j'ai ajouté dans l'un des éléments que je suis heureux d'être aspiré dans le trou noir. Donc ça veut dire que je voulais que le Rocky continue et ne soit pas aspirée dans le trou noir. Donc en faisant ça, ça veut dire que j'ai un certain contrôle sur ce qui se fait tirer. Nous avons ensuite une petite fonction qui vérifie simplement si l'élément qui est actuellement animé dans le cadre de cette liste ou non. Et puis ce que nous faisons est de créer un div et d'ajouter dans le DOM avec une classe de trou noir de toile. Et là-bas dans le CSS, vous pouvez voir ici que nous avons juste quelques styles de base pour cette chose. Il fait 50 pixels par 50 pixels de large. Nous avons ce JPEG trou noir, et nous exécutons juste une animation CSS standard sur cela. Et vous pouvez voir que c'est, c' est ce qui nous donne ce genre de trou noir qui tourne, un peu d'accord. Donc, de retour dans notre JavaScript, cette chose est ajoutée dans le dom. Nous positionnons ensuite notre DOM en fonction des coordonnées générées au hasard par cette fonction. Et le moins 25 est juste parce que le Baco lui-même a une taille de 50 pixels. Donc, nous voulons que le centre de cela soit hors de cela dans les deux axes. Maintenant, nous sommes sur le peu où nous utilisons réellement l'API Animations. Alors rappelez-vous dans la vidéo précédente, lorsque nous avons regardé pause et lecture, nous utilisons ce document.write animations, dot map pour boucle sur annette toutes les animations qui sont en cours d'exécution. Donc, tout d'abord, je vérifie que si l'une des animations qui la ruinent fait partie de la liste des choses. Je suis heureux de faire quelque chose avec ce petit, s'ils sont juste vérifiés, alors nous sommes dans l'obtention des éléments eux-mêmes. Donc, lorsque nous faisons une boucle sur les animations avec qui obtenir l'API Animations, nous pouvons obtenir des informations à partir de là aussi. Donc, je reçois l'élément bascule ici de l'élément qui est en cours d'animation. Et puis, à son tour, et je fais des choses ou j'obtiens la géométrie de cet objet, j'obtiens sa position gauche, sa position supérieure. Et puis en définissant de nouvelles coordonnées, qui sont les nouvelles coordonnées aléatoires moins la coordonnée existante, tel type de distance que nous devons déplacer. Et puis pour chaque élément, chaque élément cible. Donc vous pouvez voir à nouveau, je suppose que c'est l'animation. Et puis je vais trouver la cible. Donc I0 l'élément sur lequel l'animation est en cours d'exécution. Et puis je cours une nouvelle animation qui utilise que je passe dans cette fenêtre obtenir le style calculé Anan élément transformation. Et c'est essentiellement quand nous avons regardé dans la vidéo précédente sur la matrice. Et dans le passé, vous deviez lire cette valeur dans et essayer déterminer quelles transformations actuellement appliquées à un élément. Nous pourrions faire mieux que cela avec cette API parce que nous pouvons simplement dire, Allez me trouver cet élément sur la page et utiliser sa transformation actuelle à l'intérieur de l'image-clé qu'il va ensuite sur les mouvements. Donc, vous pouvez voir ici, la première section de cette image-clé est essentiellement dire, commencer à partir de l'endroit où vous êtes à la minute. Ensuite, nous traduisons l'élément à ses nouvelles coordonnées et le réduisons à l'échelle. Donc ces deux parties de l'image-clé que nous fabriquons ici. Voici notre nouveau cadre clé. Nous partons d'où il est et puis nous le traduisons à partir de là vers de nouvelles coordonnées. Et où nous finissons avec l'élément avec une opacité de 0. Donc, c'est fondamentalement l'attraper, déplacer là où il a besoin d'aller et le rétrécir. Donc ça donne l'apparence d'être aspiré dans un trou noir, ou du moins c'est ce que je voulais. Et cette chose se passe sur une 2.5ème et évidemment ça pourrait être ce que vous vouliez. Donc c'est à ça que nous avons affaire, cette fonction de trou noir. Encore une fois, regardons juste à quoi ça ressemble. Maintenant, vous l'avez expliqué au trou noir apparaît, tout est trempé dans et l'animation CSS continue à tourner le trou noir. Ok, prochaine vidéo, nous allons juste couvrir et parler de quelques petits morceaux que nous n'avons pas vraiment couverts en détail jusqu'à présent. Avant d'arriver à la fin de notre temps ensemble. 22. Engager des styles dans le DOM: Une dernière petite pépite que vous pouvez trouver utile lorsque vous utilisez cette API. Il existe une méthode appelée styles de validation. Et ce qui vous permet de faire, c'est quand une animation arrive à sa fin, elle applique les effets de cette animation sous forme de styles intégrés à l'élément. Donc je vais juste vous montrer l'effet de ça. Maintenant, nous utilisons la fonction Blackhole ici que nous avons regardé dans la vidéo précédente. Et tout ce que je vais faire en boucle sur chacun de nos éléments qui sont animés. Je vais juste rester ici en bas. Après que cet élément a animé, je vais dire animation. Oups, styles animation.com. Et donc chaque fois qu'il boucle sur une de ces choses, ce que j'espère arriver, c'est que je vais voir ce sont les styles en ligne le résultat final de toutes ces animations. Alors gardons ça et regardons ce qui se passe ici. Alors mettons-nous les choses en mouvement ici. Et puis on va appuyer sur le trou noir. Et puis regardons vers le bas. Et vous pouvez voir ici que la méthode de commit styles a appliqué le lieu de repos final, si vous le souhaitez, les résultats de tout ce qui se passe dans l'animation. Maintenant, je n'ai pas beaucoup utilisé. Ce que nous avons construit ici ensemble, mais vous pouvez le trouver très utile dans ce que vous utiliseriez pour construire. Donc, ce n'est qu'un bref aperçu de cette méthode et de quoi vous pourriez l'utiliser. 23. Conclusion: On y va, mon ami. À la fin. Espérons que si vous le suivez tout au long de ce cours, vous aurez maintenant une meilleure compréhension de la façon dont vous pouvez animer des choses sur le web avec l'API JavaScript Web Animations. Rappelez-vous, nous sommes passés d'avoir aucune animation en JavaScript à écrire quelques animations simples, celles que nous ferions normalement en CSS. Pour ensuite un projet où nous avons toute une série d'animations séquencées l'une après l'autre. Nous avons abordé des choses comme ramasser les transformations d'un endroit dans le DOM, les déplacer ailleurs. Apprendre à mettre en pause et à rejouer des animations, à les conseiller, à les déplacer vers la fin. Si vous avez réussi à suivre et à construire quelque chose de votre propre ou même ce produit lui-même. Comme nous avons parcouru ces vidéos, vous devriez vous sentir très fier de vous lorsque vous essayez pour la première fois. Si tu te trouves à trébucher, retour, donne-moi un rafraîchissement. C' est comme n'importe quoi d'autre sur le web. Vous allez être doué en le pratiquant et en l'utilisant dans la nature. Personne ne choisit cette valeur par défaut tout de suite. C' est la première vidéo, bien sûr, ont fait. Donc, il serait vraiment utile d'avoir vos commentaires Bon, même mauvais. Alors s'il vous plaît me trouver sur Twitter à Ben effiloché. Ou vous pouvez m'envoyer un courriel au contact de Ben frame.com. Et j'adorerais entendre vos pensées. Sinon, je te reverrai la prochaine fois.