1
00:00:00,370 --> 00:00:01,460
OK we zullen welkom terug.

2
00:00:01,620 --> 00:00:06,430
Dus in deze video gaan we nemen wat we al gedaan hebben en we gaan het iets te animeren.

3
00:00:06,720 --> 00:00:17,360
Dus uiteindelijk wat we willen dat er gebeurt, is dat voor elke toetsaanslag krijgen we een cirkel in een willekeurige locatie met een kleur en die kleur levend iets.

4
00:00:18,300 --> 00:00:21,120
En we krijgen ook de grootte animatie.

5
00:00:21,460 --> 00:00:26,980
Dus ik weet niet of je kon kiezen van de kleur veranderen, maar het is het is vrij sleights voor slechts het toevoegen van een klein beetje aan de tint.

6
00:00:27,330 --> 00:00:30,220
Maar één van hen zal doen voor ons om te beginnen.

7
00:00:30,210 --> 00:00:37,950
We gaan om daadwerkelijk te starten alleen het veranderen van de kleur van deze cirkels en we eigenlijk gaan eenvoudiger beginnen met alleen het veranderen van de kleur van een cirkel.

8
00:00:38,040 --> 00:00:40,660
Dus niet alle van hen die later zal komen.

9
00:00:40,680 --> 00:00:48,150
Dus als we naar Paperchase ga terug naar tutorials en je kijkt naar de animatie op de bodem.

10
00:00:48,150 --> 00:00:51,400
Eerste ding dat je kunt doen is een kijkje nemen op enkele van de voorbeelden.

11
00:00:51,540 --> 00:00:53,180
Hier is een voorbeeld.

12
00:00:53,730 --> 00:00:57,440
En je kunt zien dat het echt heel simpel eigenlijk om de animatie te doen.

13
00:00:57,440 --> 00:01:01,260
Wat we doen is dat we iets te definiëren in dit geval een rechthoek.

14
00:01:01,260 --> 00:01:11,610
In ons geval zal het een cirkel en dan is er dit op het frame en wat code die we zetten hier zal draaien op elk frame van de animatie.

15
00:01:11,610 --> 00:01:28,200
Dus in dit geval elk frame van deze animatie gaan we draaiende dat rechthoek drie graden of in dit geval en dat is wat we gaan elk frame voegen we de ene naar de tint van deze cirkel die we gedefinieerd hier gebruiken.

16
00:01:28,980 --> 00:01:31,580
Dus laten we proberen dit uit.

17
00:01:31,770 --> 00:01:35,290
Laten we ga je gang en maak een nieuwe cirkel niet in de toets ingedrukt.

18
00:01:35,310 --> 00:01:38,290
Dus dit zal gewoon er altijd zijn wanneer de pagina wordt geladen.

19
00:01:38,430 --> 00:01:55,870
Dus we noemen het VAR animeren cirkel staat voor nieuw pad dot cirkel en moet het zijn nieuwe punten en laten we deze cirkel bij 300 komma 300 en de straal.

20
00:01:56,010 --> 00:01:58,200
Laten we het groter 100.

21
00:01:58,560 --> 00:01:59,870
Gewoon zo.

22
00:02:00,150 --> 00:02:12,380
En dan zullen we geanimeerd en wat heet geanimeerde cirkel in plaats van animeren dot vulkleur en zet deze op rood zijn om te beginnen, net als dat.

23
00:02:12,540 --> 00:02:13,790
Grote.

24
00:02:13,890 --> 00:02:22,260
Dus het is niet van plan nog te worden geanimeerd, maar als je verfrissen krijgen we een grote cirkel en elke keer als ik een sleutel raakte krijgen we kleinere cirkels die willekeurig zijn.

25
00:02:22,260 --> 00:02:33,640
Nu moeten we aan onze animatie en het is echt simpel als we zagen functie op frame en we kunnen overgaan in of uit, behalve dit event argument.

26
00:02:33,660 --> 00:02:39,560
Als we wilden iets doen met elk frame als we wilden een aantal gegevens over die we eigenlijk niet nodig dat.

27
00:02:39,840 --> 00:02:48,050
En dan doen hier is om geanimeerde cirkel dot vullen kleur die u plus gelijk is aan één.

28
00:02:48,120 --> 00:02:50,750
En dit is rechtstreeks van dat voorbeeld.

29
00:02:50,820 --> 00:02:59,730
Dus elke keer animatie vraagt ​​om een ​​nieuw frame dat is niet aan ons, zodat we niet het bepalen van de framerate hoe vaak deze code wordt genoemd.

30
00:02:59,790 --> 00:03:08,160
Anytime is er een nieuw frame dat papier alleen zorgt voor we één toe te voegen aan de tint van haar geanimeerde cirkel.

31
00:03:08,160 --> 00:03:10,650
Laten we vernieuwen en daar gaan we.

32
00:03:10,650 --> 00:03:13,720
Dus echt heel eenvoudig om dat soort van een animatie te doen.

33
00:03:13,830 --> 00:03:21,250
We kunnen ook doen animaties hoewel waar veranderende positie van iets en dat is een beetje ingewikkelder.

34
00:03:21,270 --> 00:03:31,360
Deze gebeurt er nog complexer dit voorbeeld zijn, omdat ze niet alleen geanimeerde iets van het ene punt naar een ander punt en het is ook niet gelijkmatig versnellen.

35
00:03:31,410 --> 00:03:35,630
Dus het is een beetje ingewikkelder, maar nog steeds slechts een paar regels.

36
00:03:36,600 --> 00:03:39,830
Hier is een ander voorbeeld van bewegende dingen.

37
00:03:40,500 --> 00:03:42,610
Enkele andere animaties.

38
00:03:42,610 --> 00:03:56,280
Wat we gaan wel doen is gebruik maken van iets wat ze niet laten zien en de voorbeelden hier dat ik breng een beetje tijd graven in de docs wat we willen doen is gewoon schaal elk een naar beneden elk frame.

39
00:03:56,340 --> 00:04:00,360
Dus wat we doen is eigenlijk als ik op een toets maken we een cirkel.

40
00:04:00,390 --> 00:04:15,680
Laten we zeggen dat het begint als 300 met 300 of 300 straal mij niet kwalijk als ik geraakt dat personage elk frame of krimpt het een beetje door in principe schaal aan te passen punt negen negen negen punt acht.

41
00:04:15,720 --> 00:04:24,760
Ik vergeet het exacte aantal, maar we zijn er te vermenigvuldigen met een kleiner formaat elk frame en het gewoon krimpt en krimpt, zodat het verdwijnt.

42
00:04:25,110 --> 00:04:26,940
Dus laat ik je zien hoe dat werkt.

43
00:04:27,090 --> 00:04:36,910
Laten we teruggaan naar onze code gaan we de cirkel nog animeren en de binnenkant van op frame in plaats van alleen het toevoegen van de ene naar de tint.

44
00:04:37,110 --> 00:04:55,760
Wat we gaan doen is doen geanimeerde cirkel dot schaal die is een methode die ik vond en we kunnen vermenigvuldigen met iedere fractie dat we willen als we gewoon laat het op één het zal even groot blijven zodat we niet echt zien.

45
00:04:55,970 --> 00:05:08,600
Maar als we iets als punt negen doen en we vernieuwen Daar gaan we elk frame verandert Hewe door 1.

46
00:05:08,960 --> 00:05:14,560
En het schalen punt negen of 90 procent van wat het was in het vorige frame.

47
00:05:14,570 --> 00:05:30,540
Dus als we dat veranderen iets als Point 9 9 tot een langzamere overgang naar beneden en als we het te veranderen in iets als punt vijf het gaat heel erg snel krimpen.

48
00:05:30,680 --> 00:05:34,090
Dus elke frame van het krijgt half zo groot als het was in de vorige run.

49
00:05:34,280 --> 00:05:37,180
Dus ik denk dat wat ik ging met was Punt 9 om te beginnen.

50
00:05:37,370 --> 00:05:39,040
Dus zullen we het bij laten.

51
00:05:39,140 --> 00:05:46,530
En nu hebben we een enkele cirkel van kleur verandert en krimpen wat we willen gaan doen is wanneer ik die andere toetsen te raken.

52
00:05:46,730 --> 00:05:52,300
Je wilt die kringen om hetzelfde te doen en dat is een beetje ingewikkelder.

53
00:05:52,490 --> 00:06:01,410
Maar eerlijk gezegd de code hier zal blijven hetzelfde alles wat anders is dat we nodig hebben om dit te doen voor elke cirkel die op de pagina.

54
00:06:01,790 --> 00:06:17,380
En dit is waarschijnlijk de meest drastische verandering die ervoor zorgt dat wat er ook daadwerkelijk doen is een array van cirkels en elke keer als we een toets indrukt We zullen die kring in die nieuwe reeks toe te voegen, want op dit moment zijn we niet echt het bijhouden van alle de cirkels moeten we allemaal ergens opslaan.

55
00:06:17,420 --> 00:06:26,240
Dus dat op frame hier in deze functie kunnen we vervolgens terug te verwijzen naar elke cirkel die al bestaat en geanimeerd.

56
00:06:26,840 --> 00:06:28,210
Dus zullen we deze code houden.

57
00:06:28,610 --> 00:06:33,770
Maar wat we willen doen is lus door een array die niet bestaat we noemen het cirkels.

58
00:06:33,770 --> 00:06:42,230
Dus voor var i gelijk is aan nul Ayas minder dan Circle StarLink.

59
00:06:42,690 --> 00:06:47,420
Plus plus wat we willen doen is te doen kringen.

60
00:06:47,580 --> 00:06:50,260
Ik vul kleur hier doet.

61
00:06:50,260 --> 00:06:54,130
Dus we gewoon beginnen met de vulkleur net aan het begin.

62
00:06:54,140 --> 00:06:56,500
Dus ik zal gewoon deze lijn te kopiëren.

63
00:06:58,550 --> 00:07:01,050
Dus het is niet van plan nog te werken omdat cirkel bestaat niet.

64
00:07:01,070 --> 00:07:11,590
Maar het idee is dat op elk frame we lus door alle kringen in deze serie en we voegen één aan elke één tint elk frame.

65
00:07:12,470 --> 00:07:18,760
En je zou denken dat dat is vrij intens en het is het is een heleboel dingen gebeuren maar het papier duurt slechts zorgen.

66
00:07:18,890 --> 00:07:25,910
Maar we zullen ook het toevoegen in een klein optimalisatie aan het einde, dus ik zal je laten zien wat ik bedoel in een toekomstige video.

67
00:07:25,910 --> 00:07:27,780
Maar voor nu is dit wat we zullen doen.

68
00:07:28,340 --> 00:07:53,140
En alles wat we nu moeten doen is eigenlijk deze cirkel die we maken in de kringen reeks toe te voegen, zodat we dat array voor onze kringen kunt definiëren is een lege array te beginnen en vervolgens wanneer u op een toets op het toetsenbord naar beneden gaan we gewoon do cirkels duwen deze nieuwe cirkel in cirkel stop push deze nieuwe weg uit cirkel op deze willekeurige punt.

69
00:07:53,240 --> 00:07:58,180
Op dit moment hebben we een straal van 10 en opnieuw instellen van de kill vulkleur als oranje.

70
00:07:58,220 --> 00:08:03,660
Dus we gewoon duwen dat cirkel die we al in de array deze cirkel gehad.

71
00:08:04,040 --> 00:08:06,830
En dan zijn we het bijwerken van elke cirkel.

72
00:08:06,830 --> 00:08:09,950
Dus is er een cirkel zou kunnen zijn er misschien 20 kringen.

73
00:08:10,070 --> 00:08:12,270
Er kunnen 100 cirkels op een gegeven moment.

74
00:08:12,320 --> 00:08:21,670
We lus door ze allemaal en voeg een aan elke wachtrij en als we een kijkje nemen op dit moment te nemen en te vernieuwen het is nog niet helemaal werken.

75
00:08:21,770 --> 00:08:25,550
En dit brengt een heel interessant punt over hoe druk werkt.

76
00:08:25,550 --> 00:08:34,570
Dus als ik de console open het me vertelt kan ik niet lezen Prakriti tint van ongedefinieerde geest 24 die is hier.

77
00:08:35,150 --> 00:08:41,490
Dus het is niet een of andere manier is het niet te lezen dat Hugh eigendom van Phil kleur zegt Phil code bestaat niet.

78
00:08:41,540 --> 00:08:43,870
Dus laten we een constante log kringen.

79
00:08:44,330 --> 00:08:48,390
En je zult zien wat het probleem is.

80
00:08:49,100 --> 00:08:53,610
Als ik dit open te stellen het is gestopt omdat we een fout hadden.

81
00:08:53,780 --> 00:09:00,390
Maar we eigenlijk toegevoegd orange de string in de array niet de werkelijke nieuwe cirkel.

82
00:09:00,530 --> 00:09:06,710
En dat komt omdat wat we in te drukken is niet alleen een nieuwe cirkel we het maken van de nieuwe cirkel.

83
00:09:06,740 --> 00:09:09,470
En dan zijn we het instellen van de vulling kleur oranje zijn.

84
00:09:09,500 --> 00:09:13,010
Dus het laatste wat was teruggekeerd was de string oranje.

85
00:09:13,010 --> 00:09:16,780
Dus het eindresultaat is dat we nog maar net in te duwen oranje elke keer.

86
00:09:16,850 --> 00:09:18,530
Dat is niet wat we willen.

87
00:09:19,190 --> 00:09:35,920
Dus we zullen een nieuwe variabele we noemen het onze nieuwe kring en dan zullen we nieuwe cirkel doen dot vullen kleur afzonderlijk gelijk oranje en dan zullen we duwen in New Circle.

88
00:09:35,990 --> 00:09:40,480
Dus in plaats van deze te bewerken dat ik denk dat het een belangrijke fout om te zien.

89
00:09:40,760 --> 00:09:56,450
Totally gevangen me off guard voor een moment daar is, maar het is belangrijk om te begrijpen hoe dat werkt, waar we die mensen vastgeketend methoden op de top van elkaar waar we die kring was overleden en toen dot vulkleur gelijk oranje en we voegde eraan toe dat hele ding in de array met push.

90
00:09:56,560 --> 00:09:57,800
We waren net het toevoegen van oranje in.

91
00:09:57,830 --> 00:09:59,980
Dus moeten we om het te repareren.

92
00:10:00,110 --> 00:10:01,290
Dus hopelijk dit doet.

93
00:10:01,310 --> 00:10:15,290
En eigenlijk weet ik het doet, maar als we zijn fris en een kijkje nemen nu toe in nieuwe kringen willekeurig geplaatst en ze alle vijandelijke de Heugh animeren dus gewoon perfect.

94
00:10:15,290 --> 00:10:17,450
Laten we nu eens updaten om mee te werken met de grootte.

95
00:10:17,570 --> 00:10:21,550
Dus het is eigenlijk alleen deze exact dezelfde lijn die we hier hebben.

96
00:10:22,280 --> 00:10:23,860
Ik zal zich te ontdoen van onze voortdurende niet aanmelden.

97
00:10:23,930 --> 00:10:26,140
Behalve wij willen kringen.

98
00:10:26,160 --> 00:10:28,420
IK.

99
00:10:30,680 --> 00:10:31,370
OK.

100
00:10:31,730 --> 00:10:36,420
Dus voordat ik je laten zien of het werkt Laten we bekijken wat we deden.

101
00:10:36,440 --> 00:10:55,770
Dus als je een toets we in een kring toe te voegen op een willekeurig punt 2 hit maken we een willekeurig punt om een ​​nieuwe cirkel met dat willekeurige punt 10 pixel radius te maken en laat eigenlijk veranderen om overeenkomen met wat we hebben in de oplossing die vijfhonderd en dan zijn we de verkoop van de fill-kaart om te beginnen als oranje die uiteindelijk zal veranderen.

102
00:10:55,880 --> 00:10:58,840
En dan duwen we dat in een array genaamd kringen.

103
00:10:59,060 --> 00:11:07,200
Dan elke keer een nieuw frame heet Elke animatiekader we een lus door alle kringen.

104
00:11:07,520 --> 00:11:13,310
En voor een ieder voegen we de ene naar de Hewe en we de grootte van de schaal te vermenigvuldigen met punt negen.

105
00:11:13,430 --> 00:11:17,260
Dus we krimpen gewoon door klein beetje elk frame.

106
00:11:17,360 --> 00:11:26,540
Maar er zijn zo veel frames dat het eigenlijk krimpt vrij snel en we kunnen ontdoen van onze geanimeerde cirkel nu dat begint op pagina te laden.

107
00:11:26,540 --> 00:11:28,240
We willen niet beginnen met een zwart scherm.

108
00:11:28,250 --> 00:11:30,700
En dan wanneer je een sleutel raakte voegen we een cirkel.

109
00:11:30,710 --> 00:11:33,320
Dus laten we het proberen.

110
00:11:33,320 --> 00:11:37,110
Daar gaan we.

111
00:11:37,130 --> 00:11:40,920
Dus dit is bijna precies dezelfde manier.

112
00:11:40,980 --> 00:11:43,130
Hier is het geluid.

113
00:11:43,130 --> 00:11:54,000
Een groot verschil is dat de kleur zegt dat deze elke toets heeft een toegewezen kleur hier, dus Q Is dit blauw een donkerdere blauwe half.

114
00:11:54,110 --> 00:11:55,810
Is het grijs.

115
00:11:55,980 --> 00:12:03,070
Dus op ons is het een paarse nu hier zijn we het instellen van iedereen om te beginnen is oranje en dan het veranderen van de tint.

116
00:12:03,500 --> 00:12:08,500
Dus moeten we dat op te lossen, maar ik bedoel wachten om dat te doen totdat we voegen in geluid.

117
00:12:08,510 --> 00:12:10,990
Dus we zijn klaar voor nu.

118
00:12:11,210 --> 00:12:19,000
Er is een kleine optimalisatie dat het zal het einde want nu zijn we nooit te verwijderen die kringen van de cirkel array.

119
00:12:19,040 --> 00:12:25,490
Dus zelfs als je weet dat na 10 seconden die kring, zelfs na drie seconden is gegaan we zien het niet.

120
00:12:25,490 --> 00:12:27,330
Technisch gezien is het nog steeds in die array.

121
00:12:27,620 --> 00:12:29,540
Dus dat is niet ideaal.

122
00:12:29,540 --> 00:12:36,170
Als we tienduizend kringen die we hadden gemaakt en we geen van hen willen we niet worden looping over alle van hen.

123
00:12:36,170 --> 00:12:43,090
Dus in de laatste video Ik zal je laten zien hoe we een cirkel kunt verwijderen als we weten dat het is gegaan of wanneer we weten dat het niet langer haalbaar.