OK, nous serons heureux de revenir.
Donc, dans cette vidéo, nous allons prendre ce que nous avons déjà fait et nous allons animer un peu.
Donc, finalement, ce que nous voulons faire, c'est que pour chaque pression de touche nous obtenons un cercle dans un endroit aléatoire avec une couleur et que la couleur s'anime légèrement.
Et nous obtenons également l'animation de taille.
Donc, je ne sais pas si vous pouviez prendre sur la couleur change, mais c'est plutôt joli sleights pour ajouter un peu à la teinte.
Mais l'un ou l'autre de nous fera commencer.
Nous allons commencer à simplement changer la couleur de ces cercles et nous allons réellement commencer plus simplement en changeant simplement la couleur d'un cercle.
Donc, pas tous ceux qui viendront plus tard.
Donc, si nous allons à Paperchase revenir à des tutoriels et vous regardez l'animation au fond.
La première chose que vous pouvez faire est de jeter un oeil à certains des exemples.
Voici un exemple.
Et vous pouvez voir que c'est vraiment vraiment simple de faire l'animation.
Ce que nous faisons, c'est que nous définissons quelque chose dans ce cas un rectangle.
Dans notre cas, ce sera un cercle, puis il y aura ceci sur le cadre et tout code que nous mettrons ici fonctionnera sur chaque image de l'animation.
Donc, dans ce cas, chaque cadre de cette animation nous tournons ce rectangle de trois degrés ou dans ce cas, ce qui est ce que nous allons utiliser chaque cadre, nous ajoutons un à la teinte de ce cercle que nous avons défini ici.
Alors essayons ça.
Allons de l'avant et faire un nouveau cercle pas à l'intérieur de la clé vers le bas.
Donc, ce sera toujours là quand la page est chargée.
Donc, nous allons appeler le cercle var animate égale le nouveau cercle de point de chemin et aura-t-il de nouveaux points et faisons ce cercle à 300 virgule 300 et le rayon.
Faisons-le plus grand 100.
Juste comme ça.
Et puis nous allons faire animé et ce qu'on appelle le cercle animé plutôt que d'animer la couleur de remplissage de point et le mettre en rouge pour commencer juste comme ça.
Génial.
Donc, il ne va pas être animé encore, mais si vous rafraîchir, nous obtenons un grand cercle et chaque fois que je frappe une clé, nous obtenons des cercles plus petits qui sont aléatoires.
Maintenant, nous devons ajouter dans notre animation et c'est vraiment simple que nous avons vu la fonction sur le cadre et nous pouvons passer en ou hors, sauf cet argument événement.
Si nous voulions faire quelque chose avec chaque image si nous voulions des données à ce sujet, nous n'en avons pas vraiment besoin.
Et puis tous les faire ici est à la couleur animée de remplissage de point de cercle que vous plus égale un.
Et c'est directement de cet exemple.
Donc, chaque fois que l'animation demande une nouvelle image qui ne dépend pas de nous, nous ne décidons pas de la fréquence d'images à quelle fréquence ce code est appelé.
Chaque fois qu'il ya un nouveau cadre dont le papier prend juste soin de nous ajoutons un à la teinte de son cercle animé.
Allons rafraîchir et nous y allons.
Donc vraiment vraiment simple de faire ce genre d'animation.
Nous pouvons aussi faire des animations bien que partout où changer la position de quelque chose et c'est un peu plus compliqué.
Celui-ci se trouve être encore plus complexe cet exemple parce qu'ils ne sont pas simplement animé quelque chose d'un point à un autre point et il n'est pas aussi accélérer uniformément.
Donc, c'est un peu plus complexe, mais encore quelques lignes.
Voici un autre exemple de déplacement des choses.
Quelques autres animations.
Ce que nous allons faire, cependant, est d'utiliser quelque chose qu'ils ne montrent pas et les exemples ici que je passe un peu de temps à creuser dans les docs ce que nous voulons faire est juste l'échelle de chacun vers le bas de chaque cadre.
Donc, ce que nous faisons est essentiellement lorsque j'appuie sur une touche, nous faisons un cercle.
Disons que cela commence comme 300 par 300 ou 300 rayon excusez-moi quand je frappé ce personnage chaque cadre ou en le réduisant un peu par la mise à l'échelle essentiellement par point neuf neuf point neuf huit.
J'oublie le nombre exact mais nous le multiplions par une taille plus petite chaque cadre et il se rétrécit et se rétrécit pour qu'il disparaisse.
Alors je vais vous montrer comment ça marche.
Revenons à notre code, nous avons le cercle toujours animé et à l'intérieur du cadre plutôt que d'ajouter un à la teinte.
Ce que nous allons faire est de faire l'échelle de point d'un cercle animé qui est une méthode que j'ai trouvé et nous pouvons multiplier par n'importe quelle fraction que nous voulons si nous le laissons juste à un il restera la même taille afin que nous ne le verrons pas.
Mais si nous faisons quelque chose comme le point neuf et nous rafraîchissons Là nous allons tous les changements de cadres hewe par 1.
Et il échelles par le point neuf ou 90 pour cent de ce qu'il était dans le cadre précédent.
Donc, si nous changeons cela à quelque chose comme le point 9 9 pour qu'il y ait une transition plus lente vers le bas et si nous la changeons à quelque chose comme le point cinq, cela va se rétrécir très très rapidement.
Donc, chaque cadre, il obtient la moitié de gros comme il était dans la course précédente.
Donc, je pense que je suis parti avec le point 9 pour commencer.
Nous allons donc en rester là.
Et maintenant nous avons un seul cercle changeant de couleur et de rétrécissement ce que nous voulons faire ensuite, c'est quand je frappe ces autres touches.
Vous voulez que ces cercles fassent la même chose et c'est un peu plus compliqué.
Mais honnêtement, le code ici, il restera le même tout ce qui est différent, c'est que nous devons le faire pour chaque cercle qui est sur la page.
Et c'est probablement le changement le plus radical qui va faire ce qui va réellement faire est d'avoir un tableau de cercles et chaque fois que nous appuyons sur une touche Nous allons ajouter ce cercle dans ce nouveau tableau parce que maintenant nous ne sommes pas en train de garder la trace de tous Les cercles dont nous avons besoin pour les sauver d'une façon ou d'une autre.
Ainsi, sur le cadre ici, dans cette fonction, nous pouvons alors référer à chaque cercle qui existe déjà et animé.
Nous garderons donc ce code.
Mais ce que nous voulons faire est de boucler un tableau qui n'existe pas et nous allons simplement l'appeler cercles.
Donc, pour var i est égal à zéro Ayas inférieur à Circle StarLink.
Plus plus ce que nous voulons faire est de faire des cercles.
Je remplis couleur fait ici.
Nous commencerons donc par la couleur de remplissage juste au début.
Je vais donc copier cette ligne.
Donc, ça ne fonctionnera pas car Circle n'existe pas.
Mais l'idée est que, sur chaque trame, nous parcourons tous les cercles de ce tableau et que nous ajoutons un à chaque ton de chaque trame.
Et vous pourriez penser que c'est assez intense et il est beaucoup de choses se passe, mais le papier prend juste soin de lui.
Mais nous ajouterons également une petite optimisation vers la fin, donc je vais vous montrer ce que je veux dire dans une future vidéo.
Mais pour l'instant, c'est ce que nous allons faire.
Et tout ce que nous avons à faire maintenant est en fait ajouter ce cercle que nous faisons dans le tableau de cercles afin que nous puissions définir ce tableau pour nos cercles est un tableau vide pour démarrer et puis lorsque vous appuyez sur une touche sur la touche bas nous allons juste Faire des cercles pousser ce nouveau cercle dans le cercle arrêter pousser ce nouveau chemin hors du cercle à ce point aléatoire.
Actuellement, nous avons un rayon de 10 et réinitialiser la couleur de remplissage de tuer comme orange.
Donc nous poussons juste ce cercle que nous avions déjà dans le tableau de ce cercle.
Et puis nous mettons à jour chaque cercle.
Donc il pourrait y avoir un cercle il pourrait y avoir 20 cercles.
Il peut y avoir 100 cercles à un moment donné.
Nous faisons le tour de tous et ajouter un à chaque file d'attente et si nous prenons un coup d'oeil maintenant et rafraîchir il ne fonctionne pas tout à fait encore.
Et cela soulève un point vraiment intéressant sur la façon dont fonctionne la poussée.
Donc, si je ouvre la console, il me dit que je ne peux pas lire Prakriti teinte de l'esprit indéfini 24 qui est ici.
Donc, ce n'est pas en quelque sorte ce n'est pas la lecture de cette propriété Hugh de Phil couleur disant code Phil n'existe pas.
Alors faisons un cercle logarithmique constant.
Et vous verrez quel est le problème.
Si je l'ouvre, il est arrêté parce que nous avons eu une erreur.
Mais nous avons réellement ajouté orange la chaîne dans le tableau pas le nouveau cercle réel.
Et c'est parce que ce que nous poussons n'est pas seulement un nouveau cercle que nous faisons le nouveau cercle.
Et puis nous mettons la couleur de remplissage à orange.
Donc la dernière chose qui a été retournée était la corde orange.
Le résultat final est que nous ne faisons que pousser orange chaque fois.
Ce n'est pas ce que nous voulons.
Alors nous allons faire une nouvelle variable que nous appelerons notre nouveau cercle et ensuite nous ferons nouveau cercle couleur de remplissage de point séparément égale orange et puis nous pousserons dans Nouveau Cercle.
Donc plutôt que d'éditer ceci dehors je ne pense que c'est une erreur importante de voir.
Totalement pris au dépourvu pendant un moment là-bas, mais il est important de comprendre comment cela fonctionne où nous avons ces méthodes enchaînées les unes sur les autres où nous avions passé ce cercle, puis la couleur de remplissage de points égaux orange et nous avons juste ajouté que toute chose en Le tableau avec push.
Nous avons juste ajouté l'orange dedans.
Nous devons donc le réparer.
Donc j'espère que c'est le cas.
Et en fait, je sais, mais si nous sommes frais et jetez un coup d'oeil maintenant ajoutez dans de nouveaux cercles placés au hasard et ils tous les ennemis de l'Heugh animer si juste parfait.
Maintenant, mettons à jour ceci pour fonctionner avec la taille.
Donc, c'est exactement la même ligne que nous avons ici.
Je vais me débarrasser de notre journal pas constant.
Sauf que nous voulons des cercles.
JE.
D'ACCORD.
Donc, avant de vous montrer si cela fonctionne, passons en revue ce que nous avons fait.
Donc quand vous frappez n'importe quelle touche, nous ajoutons dans un cercle à un point aléatoire 2, nous faisons un point aléatoire pour faire un nouveau cercle avec ce rayon de 10 pixels de rayon aléatoire et permet effectivement de changer cela pour correspondre à ce que nous avons dans la solution qui est cinq cents Et alors nous vendons la carte de remplissage pour commencer comme orange qui changera éventuellement.
Et puis nous poussons cela dans un tableau appelé cercles.
Chaque fois qu'un nouveau cadre est appelé Chaque cadre d'animation, nous faisons une boucle à travers tous les cercles.
Et pour chacun, nous ajoutons un à l'hewe et nous multiplions la taille de l'échelle par le point neuf.
Donc nous sommes rétrécissement il juste par minuscule chaque cadre.
Mais il ya tellement de cadres qu'il rétrécit réellement assez rapidement et nous pouvons nous débarrasser de notre cercle animé maintenant qui commence à charger la page.
Nous ne voulons pas commencer par un écran noir.
Et puis quand vous frappez une clé, nous ajoutons un cercle.
Alors essayons-le.
Voilà.
Donc, c'est presque exactement la même chose.
Voici le son.
Une grande différence est que la couleur indique que chaque clé a une couleur assignée ici alors Q Est-ce bleu une moitié bleue plus foncée.
Il est gris.
Donc sur notre c'est un violet en ce moment, nous mettons tout le monde à commencer est orange et puis changer la teinte.
Nous allons donc devoir corriger cela, mais je veux dire attendre de le faire jusqu'à ce que nous ajoutons dans le son.
Nous avons terminé pour le moment.
Il y a une petite optimisation qui en fera la fin parce que nous n'en retirons jamais les cercles du cercle.
Donc, même si vous savez après 10 secondes que le cercle est allé même après trois secondes, nous ne le voyons pas.
Techniquement, c'est toujours dans ce tableau.
Ce n'est donc pas l'idéal.
Si nous avions dix mille cercles que nous avions créés et que nous n'en voyions aucun, nous ne voulons pas les boucler tous.
Donc, dans la dernière vidéo, je vais vous montrer comment nous pouvons supprimer un cercle quand nous savons que c'est parti ou quand nous savons que ce n'est plus possible.