OK we zullen welkom terug.
Dus in deze video gaan we nemen wat we al gedaan hebben en we gaan het iets te animeren.
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.
En we krijgen ook de grootte animatie.
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.
Maar één van hen zal doen voor ons om te beginnen.
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.
Dus niet alle van hen die later zal komen.
Dus als we naar Paperchase ga terug naar tutorials en je kijkt naar de animatie op de bodem.
Eerste ding dat je kunt doen is een kijkje nemen op enkele van de voorbeelden.
Hier is een voorbeeld.
En je kunt zien dat het echt heel simpel eigenlijk om de animatie te doen.
Wat we doen is dat we iets te definiëren in dit geval een rechthoek.
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.
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.
Dus laten we proberen dit uit.
Laten we ga je gang en maak een nieuwe cirkel niet in de toets ingedrukt.
Dus dit zal gewoon er altijd zijn wanneer de pagina wordt geladen.
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.
Laten we het groter 100.
Gewoon zo.
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.
Grote.
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.
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.
Als we wilden iets doen met elk frame als we wilden een aantal gegevens over die we eigenlijk niet nodig dat.
En dan doen hier is om geanimeerde cirkel dot vullen kleur die u plus gelijk is aan één.
En dit is rechtstreeks van dat voorbeeld.
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.
Anytime is er een nieuw frame dat papier alleen zorgt voor we één toe te voegen aan de tint van haar geanimeerde cirkel.
Laten we vernieuwen en daar gaan we.
Dus echt heel eenvoudig om dat soort van een animatie te doen.
We kunnen ook doen animaties hoewel waar veranderende positie van iets en dat is een beetje ingewikkelder.
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.
Dus het is een beetje ingewikkelder, maar nog steeds slechts een paar regels.
Hier is een ander voorbeeld van bewegende dingen.
Enkele andere animaties.
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.
Dus wat we doen is eigenlijk als ik op een toets maken we een cirkel.
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.
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.
Dus laat ik je zien hoe dat werkt.
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.
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.
Maar als we iets als punt negen doen en we vernieuwen Daar gaan we elk frame verandert Hewe door 1.
En het schalen punt negen of 90 procent van wat het was in het vorige frame.
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.
Dus elke frame van het krijgt half zo groot als het was in de vorige run.
Dus ik denk dat wat ik ging met was Punt 9 om te beginnen.
Dus zullen we het bij laten.
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.
Je wilt die kringen om hetzelfde te doen en dat is een beetje ingewikkelder.
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.
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.
Dus dat op frame hier in deze functie kunnen we vervolgens terug te verwijzen naar elke cirkel die al bestaat en geanimeerd.
Dus zullen we deze code houden.
Maar wat we willen doen is lus door een array die niet bestaat we noemen het cirkels.
Dus voor var i gelijk is aan nul Ayas minder dan Circle StarLink.
Plus plus wat we willen doen is te doen kringen.
Ik vul kleur hier doet.
Dus we gewoon beginnen met de vulkleur net aan het begin.
Dus ik zal gewoon deze lijn te kopiëren.
Dus het is niet van plan nog te werken omdat cirkel bestaat niet.
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.
En je zou denken dat dat is vrij intens en het is het is een heleboel dingen gebeuren maar het papier duurt slechts zorgen.
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.
Maar voor nu is dit wat we zullen doen.
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.
Op dit moment hebben we een straal van 10 en opnieuw instellen van de kill vulkleur als oranje.
Dus we gewoon duwen dat cirkel die we al in de array deze cirkel gehad.
En dan zijn we het bijwerken van elke cirkel.
Dus is er een cirkel zou kunnen zijn er misschien 20 kringen.
Er kunnen 100 cirkels op een gegeven moment.
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.
En dit brengt een heel interessant punt over hoe druk werkt.
Dus als ik de console open het me vertelt kan ik niet lezen Prakriti tint van ongedefinieerde geest 24 die is hier.
Dus het is niet een of andere manier is het niet te lezen dat Hugh eigendom van Phil kleur zegt Phil code bestaat niet.
Dus laten we een constante log kringen.
En je zult zien wat het probleem is.
Als ik dit open te stellen het is gestopt omdat we een fout hadden.
Maar we eigenlijk toegevoegd orange de string in de array niet de werkelijke nieuwe cirkel.
En dat komt omdat wat we in te drukken is niet alleen een nieuwe cirkel we het maken van de nieuwe cirkel.
En dan zijn we het instellen van de vulling kleur oranje zijn.
Dus het laatste wat was teruggekeerd was de string oranje.
Dus het eindresultaat is dat we nog maar net in te duwen oranje elke keer.
Dat is niet wat we willen.
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.
Dus in plaats van deze te bewerken dat ik denk dat het een belangrijke fout om te zien.
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.
We waren net het toevoegen van oranje in.
Dus moeten we om het te repareren.
Dus hopelijk dit doet.
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.
Laten we nu eens updaten om mee te werken met de grootte.
Dus het is eigenlijk alleen deze exact dezelfde lijn die we hier hebben.
Ik zal zich te ontdoen van onze voortdurende niet aanmelden.
Behalve wij willen kringen.
IK.
OK.
Dus voordat ik je laten zien of het werkt Laten we bekijken wat we deden.
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.
En dan duwen we dat in een array genaamd kringen.
Dan elke keer een nieuw frame heet Elke animatiekader we een lus door alle kringen.
En voor een ieder voegen we de ene naar de Hewe en we de grootte van de schaal te vermenigvuldigen met punt negen.
Dus we krimpen gewoon door klein beetje elk frame.
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.
We willen niet beginnen met een zwart scherm.
En dan wanneer je een sleutel raakte voegen we een cirkel.
Dus laten we het proberen.
Daar gaan we.
Dus dit is bijna precies dezelfde manier.
Hier is het geluid.
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.
Is het grijs.
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.
Dus moeten we dat op te lossen, maar ik bedoel wachten om dat te doen totdat we voegen in geluid.
Dus we zijn klaar voor nu.
Er is een kleine optimalisatie dat het zal het einde want nu zijn we nooit te verwijderen die kringen van de cirkel array.
Dus zelfs als je weet dat na 10 seconden die kring, zelfs na drie seconden is gegaan we zien het niet.
Technisch gezien is het nog steeds in die array.
Dus dat is niet ideaal.
Als we tienduizend kringen die we hadden gemaakt en we geen van hen willen we niet worden looping over alle van hen.
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.