1 00:00:00,370 --> 00:00:01,460 OK, nous serons heureux de revenir. 2 00:00:01,620 --> 00:00:06,430 Donc, dans cette vidéo, nous allons prendre ce que nous avons déjà fait et nous allons animer un peu. 3 00:00:06,720 --> 00:00:17,360 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. 4 00:00:18,300 --> 00:00:21,120 Et nous obtenons également l'animation de taille. 5 00:00:21,460 --> 00:00:26,980 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. 6 00:00:27,330 --> 00:00:30,220 Mais l'un ou l'autre de nous fera commencer. 7 00:00:30,210 --> 00:00:37,950 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. 8 00:00:38,040 --> 00:00:40,660 Donc, pas tous ceux qui viendront plus tard. 9 00:00:40,680 --> 00:00:48,150 Donc, si nous allons à Paperchase revenir à des tutoriels et vous regardez l'animation au fond. 10 00:00:48,150 --> 00:00:51,400 La première chose que vous pouvez faire est de jeter un oeil à certains des exemples. 11 00:00:51,540 --> 00:00:53,180 Voici un exemple. 12 00:00:53,730 --> 00:00:57,440 Et vous pouvez voir que c'est vraiment vraiment simple de faire l'animation. 13 00:00:57,440 --> 00:01:01,260 Ce que nous faisons, c'est que nous définissons quelque chose dans ce cas un rectangle. 14 00:01:01,260 --> 00:01:11,610 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. 15 00:01:11,610 --> 00:01:28,200 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. 16 00:01:28,980 --> 00:01:31,580 Alors essayons ça. 17 00:01:31,770 --> 00:01:35,290 Allons de l'avant et faire un nouveau cercle pas à l'intérieur de la clé vers le bas. 18 00:01:35,310 --> 00:01:38,290 Donc, ce sera toujours là quand la page est chargée. 19 00:01:38,430 --> 00:01:55,870 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. 20 00:01:56,010 --> 00:01:58,200 Faisons-le plus grand 100. 21 00:01:58,560 --> 00:01:59,870 Juste comme ça. 22 00:02:00,150 --> 00:02:12,380 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. 23 00:02:12,540 --> 00:02:13,790 Génial. 24 00:02:13,890 --> 00:02:22,260 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. 25 00:02:22,260 --> 00:02:33,640 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. 26 00:02:33,660 --> 00:02:39,560 Si nous voulions faire quelque chose avec chaque image si nous voulions des données à ce sujet, nous n'en avons pas vraiment besoin. 27 00:02:39,840 --> 00:02:48,050 Et puis tous les faire ici est à la couleur animée de remplissage de point de cercle que vous plus égale un. 28 00:02:48,120 --> 00:02:50,750 Et c'est directement de cet exemple. 29 00:02:50,820 --> 00:02:59,730 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é. 30 00:02:59,790 --> 00:03:08,160 Chaque fois qu'il ya un nouveau cadre dont le papier prend juste soin de nous ajoutons un à la teinte de son cercle animé. 31 00:03:08,160 --> 00:03:10,650 Allons rafraîchir et nous y allons. 32 00:03:10,650 --> 00:03:13,720 Donc vraiment vraiment simple de faire ce genre d'animation. 33 00:03:13,830 --> 00:03:21,250 Nous pouvons aussi faire des animations bien que partout où changer la position de quelque chose et c'est un peu plus compliqué. 34 00:03:21,270 --> 00:03:31,360 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. 35 00:03:31,410 --> 00:03:35,630 Donc, c'est un peu plus complexe, mais encore quelques lignes. 36 00:03:36,600 --> 00:03:39,830 Voici un autre exemple de déplacement des choses. 37 00:03:40,500 --> 00:03:42,610 Quelques autres animations. 38 00:03:42,610 --> 00:03:56,280 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. 39 00:03:56,340 --> 00:04:00,360 Donc, ce que nous faisons est essentiellement lorsque j'appuie sur une touche, nous faisons un cercle. 40 00:04:00,390 --> 00:04:15,680 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. 41 00:04:15,720 --> 00:04:24,760 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. 42 00:04:25,110 --> 00:04:26,940 Alors je vais vous montrer comment ça marche. 43 00:04:27,090 --> 00:04:36,910 Revenons à notre code, nous avons le cercle toujours animé et à l'intérieur du cadre plutôt que d'ajouter un à la teinte. 44 00:04:37,110 --> 00:04:55,760 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. 45 00:04:55,970 --> 00:05:08,600 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. 46 00:05:08,960 --> 00:05:14,560 Et il échelles par le point neuf ou 90 pour cent de ce qu'il était dans le cadre précédent. 47 00:05:14,570 --> 00:05:30,540 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. 48 00:05:30,680 --> 00:05:34,090 Donc, chaque cadre, il obtient la moitié de gros comme il était dans la course précédente. 49 00:05:34,280 --> 00:05:37,180 Donc, je pense que je suis parti avec le point 9 pour commencer. 50 00:05:37,370 --> 00:05:39,040 Nous allons donc en rester là. 51 00:05:39,140 --> 00:05:46,530 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. 52 00:05:46,730 --> 00:05:52,300 Vous voulez que ces cercles fassent la même chose et c'est un peu plus compliqué. 53 00:05:52,490 --> 00:06:01,410 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. 54 00:06:01,790 --> 00:06:17,380 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. 55 00:06:17,420 --> 00:06:26,240 Ainsi, sur le cadre ici, dans cette fonction, nous pouvons alors référer à chaque cercle qui existe déjà et animé. 56 00:06:26,840 --> 00:06:28,210 Nous garderons donc ce code. 57 00:06:28,610 --> 00:06:33,770 Mais ce que nous voulons faire est de boucler un tableau qui n'existe pas et nous allons simplement l'appeler cercles. 58 00:06:33,770 --> 00:06:42,230 Donc, pour var i est égal à zéro Ayas inférieur à Circle StarLink. 59 00:06:42,690 --> 00:06:47,420 Plus plus ce que nous voulons faire est de faire des cercles. 60 00:06:47,580 --> 00:06:50,260 Je remplis couleur fait ici. 61 00:06:50,260 --> 00:06:54,130 Nous commencerons donc par la couleur de remplissage juste au début. 62 00:06:54,140 --> 00:06:56,500 Je vais donc copier cette ligne. 63 00:06:58,550 --> 00:07:01,050 Donc, ça ne fonctionnera pas car Circle n'existe pas. 64 00:07:01,070 --> 00:07:11,590 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. 65 00:07:12,470 --> 00:07:18,760 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. 66 00:07:18,890 --> 00:07:25,910 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. 67 00:07:25,910 --> 00:07:27,780 Mais pour l'instant, c'est ce que nous allons faire. 68 00:07:28,340 --> 00:07:53,140 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. 69 00:07:53,240 --> 00:07:58,180 Actuellement, nous avons un rayon de 10 et réinitialiser la couleur de remplissage de tuer comme orange. 70 00:07:58,220 --> 00:08:03,660 Donc nous poussons juste ce cercle que nous avions déjà dans le tableau de ce cercle. 71 00:08:04,040 --> 00:08:06,830 Et puis nous mettons à jour chaque cercle. 72 00:08:06,830 --> 00:08:09,950 Donc il pourrait y avoir un cercle il pourrait y avoir 20 cercles. 73 00:08:10,070 --> 00:08:12,270 Il peut y avoir 100 cercles à un moment donné. 74 00:08:12,320 --> 00:08:21,670 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. 75 00:08:21,770 --> 00:08:25,550 Et cela soulève un point vraiment intéressant sur la façon dont fonctionne la poussée. 76 00:08:25,550 --> 00:08:34,570 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. 77 00:08:35,150 --> 00:08:41,490 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. 78 00:08:41,540 --> 00:08:43,870 Alors faisons un cercle logarithmique constant. 79 00:08:44,330 --> 00:08:48,390 Et vous verrez quel est le problème. 80 00:08:49,100 --> 00:08:53,610 Si je l'ouvre, il est arrêté parce que nous avons eu une erreur. 81 00:08:53,780 --> 00:09:00,390 Mais nous avons réellement ajouté orange la chaîne dans le tableau pas le nouveau cercle réel. 82 00:09:00,530 --> 00:09:06,710 Et c'est parce que ce que nous poussons n'est pas seulement un nouveau cercle que nous faisons le nouveau cercle. 83 00:09:06,740 --> 00:09:09,470 Et puis nous mettons la couleur de remplissage à orange. 84 00:09:09,500 --> 00:09:13,010 Donc la dernière chose qui a été retournée était la corde orange. 85 00:09:13,010 --> 00:09:16,780 Le résultat final est que nous ne faisons que pousser orange chaque fois. 86 00:09:16,850 --> 00:09:18,530 Ce n'est pas ce que nous voulons. 87 00:09:19,190 --> 00:09:35,920 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. 88 00:09:35,990 --> 00:09:40,480 Donc plutôt que d'éditer ceci dehors je ne pense que c'est une erreur importante de voir. 89 00:09:40,760 --> 00:09:56,450 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. 90 00:09:56,560 --> 00:09:57,800 Nous avons juste ajouté l'orange dedans. 91 00:09:57,830 --> 00:09:59,980 Nous devons donc le réparer. 92 00:10:00,110 --> 00:10:01,290 Donc j'espère que c'est le cas. 93 00:10:01,310 --> 00:10:15,290 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. 94 00:10:15,290 --> 00:10:17,450 Maintenant, mettons à jour ceci pour fonctionner avec la taille. 95 00:10:17,570 --> 00:10:21,550 Donc, c'est exactement la même ligne que nous avons ici. 96 00:10:22,280 --> 00:10:23,860 Je vais me débarrasser de notre journal pas constant. 97 00:10:23,930 --> 00:10:26,140 Sauf que nous voulons des cercles. 98 00:10:26,160 --> 00:10:28,420 JE. 99 00:10:30,680 --> 00:10:31,370 D'ACCORD. 100 00:10:31,730 --> 00:10:36,420 Donc, avant de vous montrer si cela fonctionne, passons en revue ce que nous avons fait. 101 00:10:36,440 --> 00:10:55,770 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. 102 00:10:55,880 --> 00:10:58,840 Et puis nous poussons cela dans un tableau appelé cercles. 103 00:10:59,060 --> 00:11:07,200 Chaque fois qu'un nouveau cadre est appelé Chaque cadre d'animation, nous faisons une boucle à travers tous les cercles. 104 00:11:07,520 --> 00:11:13,310 Et pour chacun, nous ajoutons un à l'hewe et nous multiplions la taille de l'échelle par le point neuf. 105 00:11:13,430 --> 00:11:17,260 Donc nous sommes rétrécissement il juste par minuscule chaque cadre. 106 00:11:17,360 --> 00:11:26,540 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. 107 00:11:26,540 --> 00:11:28,240 Nous ne voulons pas commencer par un écran noir. 108 00:11:28,250 --> 00:11:30,700 Et puis quand vous frappez une clé, nous ajoutons un cercle. 109 00:11:30,710 --> 00:11:33,320 Alors essayons-le. 110 00:11:33,320 --> 00:11:37,110 Voilà. 111 00:11:37,130 --> 00:11:40,920 Donc, c'est presque exactement la même chose. 112 00:11:40,980 --> 00:11:43,130 Voici le son. 113 00:11:43,130 --> 00:11:54,000 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. 114 00:11:54,110 --> 00:11:55,810 Il est gris. 115 00:11:55,980 --> 00:12:03,070 Donc sur notre c'est un violet en ce moment, nous mettons tout le monde à commencer est orange et puis changer la teinte. 116 00:12:03,500 --> 00:12:08,500 Nous allons donc devoir corriger cela, mais je veux dire attendre de le faire jusqu'à ce que nous ajoutons dans le son. 117 00:12:08,510 --> 00:12:10,990 Nous avons terminé pour le moment. 118 00:12:11,210 --> 00:12:19,000 Il y a une petite optimisation qui en fera la fin parce que nous n'en retirons jamais les cercles du cercle. 119 00:12:19,040 --> 00:12:25,490 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. 120 00:12:25,490 --> 00:12:27,330 Techniquement, c'est toujours dans ce tableau. 121 00:12:27,620 --> 00:12:29,540 Ce n'est donc pas l'idéal. 122 00:12:29,540 --> 00:12:36,170 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. 123 00:12:36,170 --> 00:12:43,090 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.