1 00:00:00,370 --> 00:00:01,460 OK, my witamy z powrotem. 2 00:00:01,620 --> 00:00:06,430 Więc w tym filmie mamy zamiar wziąć to, co już zrobiliśmy i mamy zamiar ją ożywić nieznacznie. 3 00:00:06,720 --> 00:00:17,360 Więc w końcu to, co chcemy się zdarzyć, że za każdym naciśnięciem przycisku otrzymujemy koło w losowym miejscu w kolorze i że kolor ożywionej nieznacznie. 4 00:00:18,300 --> 00:00:21,120 I my również uzyskać animację rozmiar. 5 00:00:21,460 --> 00:00:26,980 Więc nie wiem, czy można wybrać się na zmianę koloru, ale jest to całkiem Sleights za jedyne dodając trochę do odcienia. 6 00:00:27,330 --> 00:00:30,220 Ale któryś z tych zrobi dla nas, aby rozpocząć. 7 00:00:30,210 --> 00:00:37,950 Mamy zamiar rozpocząć właściwie tylko zmianę koloru tych kręgach, a my rzeczywiście zacznie prostsze tylko przez zmianę koloru jednym okręgu. 8 00:00:38,040 --> 00:00:40,660 Więc nie wszystkie z nich, że przyjdzie później. 9 00:00:40,680 --> 00:00:48,150 Więc jeśli idziemy do Paperchase wrócić do tutoriali oraz obejrzysz animację na dole. 10 00:00:48,150 --> 00:00:51,400 Pierwszą rzeczą, którą można zrobić, to spojrzeć na niektóre z przykładów. 11 00:00:51,540 --> 00:00:53,180 Oto przykład. 12 00:00:53,730 --> 00:00:57,440 I widać, że to naprawdę bardzo proste, w rzeczywistości zrobić animację. 13 00:00:57,440 --> 00:01:01,260 Co możemy zrobić, to możemy zdefiniować coś w tym przypadku prostokąt. 14 00:01:01,260 --> 00:01:11,610 W naszym przypadku będzie to koło i wtedy to jest na ramie i bez względu na kod kładziemy tutaj będzie działać na każdej klatce animacji. 15 00:01:11,610 --> 00:01:28,200 Więc w tym przypadku każda klatka tej animacji jesteśmy obracanie tego prostokąta trzy stopnie lub w tym przypadku, który jest, co mamy zamiar wykorzystać każdą klatkę dodajemy jeden do barwy tego kręgu, że zdefiniowany tutaj. 16 00:01:28,980 --> 00:01:31,580 Więc spróbujmy to. 17 00:01:31,770 --> 00:01:35,290 Idziemy do przodu i zrobić nowy krąg nie wewnątrz wciśniętego przycisku. 18 00:01:35,310 --> 00:01:38,290 Więc to będzie po prostu być zawsze tam, kiedy strona się ładuje. 19 00:01:38,430 --> 00:01:55,870 Więc nazwijmy go var animowanie okręgu równa się nowa ścieżka dot koło i będzie musiał być nowe punkty i zróbmy ten krąg przy 300 przecinkiem 300 i promienia. 20 00:01:56,010 --> 00:01:58,200 Zróbmy to powiększenie 100. 21 00:01:58,560 --> 00:01:59,870 Właśnie tak. 22 00:02:00,150 --> 00:02:12,380 A potem zrobimy animowane i co się nazywa animowany okręgu zamiast animacji dot wypełnienia kolor i ustawić go na czerwono, aby rozpocząć tak po prostu. 23 00:02:12,540 --> 00:02:13,790 Wspaniały. 24 00:02:13,890 --> 00:02:22,260 Więc to nie będzie jeszcze animowane ale jeśli odświeżyć otrzymujemy jedno duże koło i za każdym razem trafić w klucz otrzymujemy mniejsze kręgi, które są losowo. 25 00:02:22,260 --> 00:02:33,640 Teraz musimy dodać do naszej animacji i to naprawdę proste, jak widzieliśmy funkcji na ramie i możemy przejść do lub z wyjątkiem tego argumentu zdarzenia. 26 00:02:33,660 --> 00:02:39,560 Jeśli chcemy zrobić coś z każdej klatki, jeśli chcieliśmy jakieś dane o tym, że w rzeczywistości nie potrzebujemy. 27 00:02:39,840 --> 00:02:48,050 A potem wszystko zrobić tutaj jest animowany okręgu dot kolor wypełnienia, który także jest równy jednemu. 28 00:02:48,120 --> 00:02:50,750 I jest bezpośrednio z tego przykładu. 29 00:02:50,820 --> 00:02:59,730 Więc za każdym razem żąda animacji nową ramkę, która nie zależy od nas, więc nie jesteś decydując liczbę klatek na sekundę, jak często ten kod jest tzw. 30 00:02:59,790 --> 00:03:08,160 W każdej chwili istnieje nowa ramka, która papieru prostu dba o dodajemy jedną z odcieniem jej animowanego okręgu. 31 00:03:08,160 --> 00:03:10,650 Załóżmy, odświeżyć i tam idziemy. 32 00:03:10,650 --> 00:03:13,720 Tak naprawdę bardzo proste do zrobienia tego rodzaju animacji. 33 00:03:13,830 --> 00:03:21,250 Możemy również zrobić animacje choć gdziekolwiek coś zmienia pozycję i że jest trochę bardziej skomplikowana. 34 00:03:21,270 --> 00:03:31,360 Ten okazuje się być jeszcze bardziej skomplikowany ten przykład, ponieważ nie są one po prostu animowane coś z jednego miejsca do innego miejsca i nie jest również przyspiesza równomiernie. 35 00:03:31,410 --> 00:03:35,630 Tak więc jest to trochę bardziej skomplikowane, ale wciąż tylko kilka linijek. 36 00:03:36,600 --> 00:03:39,830 Oto kolejny przykład przenoszenia rzeczy. 37 00:03:40,500 --> 00:03:42,610 Niektóre inne animacje. 38 00:03:42,610 --> 00:03:56,280 Co zamierzamy zrobić, choć jest użyć czegoś nie wykazują a tu przykłady, które mi spędzić trochę czasu na kopanie w docs, co chcemy zrobić, to po prostu skalować każdy dół każdą klatkę. 39 00:03:56,340 --> 00:04:00,360 Więc co możemy zrobić, to w zasadzie po naciśnięciu klawisza robimy krąg. 40 00:04:00,390 --> 00:04:15,680 Powiedzmy, że zaczyna się jak 300 przez 300 lub 300 promieniu wybaczcie, gdy uderzę tego znaku każdą klatkę lub kurczy mu trochę o zasadzie skalowania pkt dziewięć dziewięć punkt dziewięć osiem. 41 00:04:15,720 --> 00:04:24,760 Zapomniałem dokładnej liczby, ale jesteśmy pomnożenie jej przez mniejszym rozmiarze każdą klatkę i po prostu się kurczy i kurczy więc znika. 42 00:04:25,110 --> 00:04:26,940 Więc pokażę ci, jak to działa. 43 00:04:27,090 --> 00:04:36,910 Wróćmy do naszego kodu mamy koło wciąż animowanie i wewnątrz na ramie zamiast po prostu dodając jeden do odcienia. 44 00:04:37,110 --> 00:04:55,760 Co zrobimy to zrobić animowany okręgu skalę dot która to metoda, że ​​znalazłem i możemy pomnożyć przez każdą frakcją, że chcemy, jeśli po prostu zostawić go w jednym pozostanie ten sam rozmiar, więc nie będzie faktycznie zobaczyć. 45 00:04:55,970 --> 00:05:08,600 Ale jeśli robimy coś takiego punktu dziewiątego, a my idziemy tam odświeżyć każda ramka zmienia hewe o 1. 46 00:05:08,960 --> 00:05:14,560 I skaluje go po punkcie dziewięć lub 90 procent, co było w poprzedniej ramce. 47 00:05:14,570 --> 00:05:30,540 Jeśli więc zmieni się coś w pkt 9 9 być wolniejsze przejście w dół i jeśli go zmienić na coś takiego punktu pięciu to będzie bardzo, bardzo szybko kurczyć. 48 00:05:30,680 --> 00:05:34,090 Więc każda klatka robi się w połowie tak duża, jak to było w poprzednim okresie. 49 00:05:34,280 --> 00:05:37,180 Więc myślę, że to, co było poszedłem z punktu 9, aby rozpocząć. 50 00:05:37,370 --> 00:05:39,040 Będziemy więc pozostawić go na tym. 51 00:05:39,140 --> 00:05:46,530 A teraz mamy jeden okrąg zmienia kolor i kurczy się, co chcemy zrobić to kiedy uderzy także inne klucze. 52 00:05:46,730 --> 00:05:52,300 Chcesz te kręgi, aby zrobić to samo i to jest trochę bardziej skomplikowana. 53 00:05:52,490 --> 00:06:01,410 Ale szczerze mówiąc kod tutaj pozostanie taka sama to wszystko jest inaczej jest to, że musimy to zrobić dla każdego koła, które znajduje się na stronie. 54 00:06:01,790 --> 00:06:17,380 I to jest chyba najbardziej drastyczna zmiana, która uczyni co będzie faktycznie zrobić, to mieć układ kół i za każdym razem naciskać klawisz Dodamy, że koło w tej nowej tablicy, ponieważ w tej chwili nie jesteśmy rzeczywiście śledzenie wszystkich kręgi musimy zapisać wszystkie z nich w jakiś sposób. 55 00:06:17,420 --> 00:06:26,240 Tak, że na ramie tu, w tej funkcji możemy następnie odesłać do każdego okręgu, który już istnieje i animowanego. 56 00:06:26,840 --> 00:06:28,210 Więc będziemy trzymać tego kodu. 57 00:06:28,610 --> 00:06:33,770 Ale to, co chcemy zrobić, to pętla za pośrednictwem tablicy, która nie istnieje, więc po prostu nazwać to kręgi. 58 00:06:33,770 --> 00:06:42,230 Więc dla var i równa zeru Ayas mniej niż Koła Starlink. 59 00:06:42,690 --> 00:06:47,420 Plus Plus to, co chcemy zrobić, to zrobić kręgi. 60 00:06:47,580 --> 00:06:50,260 I kolor wypełnienia robi tutaj. 61 00:06:50,260 --> 00:06:54,130 Więc po prostu zacząć od koloru wypełnienia tylko na samym początku. 62 00:06:54,140 --> 00:06:56,500 Więc ja po prostu skopiować tę linię. 63 00:06:58,550 --> 00:07:01,050 Więc to nie zadziała, bo przecież koło nie istnieje. 64 00:07:01,070 --> 00:07:11,590 Ale chodzi o to, że w każdej klatce mamy pętli przez wszystkie kręgi w tej tablicy i dodasz do każdego odcienia każdej klatce. 65 00:07:12,470 --> 00:07:18,760 A może uważasz, że to dość intensywne i jest to dużo rzeczy dzieje, ale papier prostu troszczy się o niego. 66 00:07:18,890 --> 00:07:25,910 Ale będziemy także dodanie w małej optymalizacji pod koniec, więc pokażę wam, co to znaczy w przyszłym filmie. 67 00:07:25,910 --> 00:07:27,780 Ale teraz to co zrobimy. 68 00:07:28,340 --> 00:07:53,140 A wszystko, co musimy zrobić, to faktycznie dodać ten krąg, który robimy w tablicy kółka, dzięki czemu możemy zdefiniować tę tablicę dla naszych kręgach jest pustą tablicę, aby rozpocząć, a następnie po naciśnięciu przycisku na kluczu dół musimy po prostu czy okręgi up push to nowe koło w koło przystanku naciśnięciem tę nową drogę na zewnątrz okręgu w tym przypadkowym miejscu. 69 00:07:53,240 --> 00:07:58,180 Teraz możemy mieć promień 10 i resetowanie kolor wypełnienia kill jako pomarańczowy. 70 00:07:58,220 --> 00:08:03,660 Więc po prostu naciska tego kręgu, że mieliśmy już do tablicy tego okręgu. 71 00:08:04,040 --> 00:08:06,830 A potem mamy aktualizację każdym kole. 72 00:08:06,830 --> 00:08:09,950 Więc nie może być jednym okręgu może istnieć 20 okręgów. 73 00:08:10,070 --> 00:08:12,270 Nie może być 100 okręgi w danym momencie. 74 00:08:12,320 --> 00:08:21,670 Mamy pętli wszystkie z nich i dodasz do każdej kolejki i jeśli przyjrzymy teraz i odświeżyć go nie dość jeszcze pracować. 75 00:08:21,770 --> 00:08:25,550 A to prowadzi się naprawdę ciekawy punkt o tym, jak działa Push. 76 00:08:25,550 --> 00:08:34,570 Więc jeśli mogę otworzyć konsolę to mówi mi, że nie potrafi czytać Prakrti barwy nieokreślonej umysłu 24, który jest tutaj. 77 00:08:35,150 --> 00:08:41,490 Więc nie jest to jakoś nie czyta, że ​​własność Hugh Phil kolorze mówiąc Kod Phil nie istnieje. 78 00:08:41,540 --> 00:08:43,870 Więc zróbmy stałej kręgi dziennika. 79 00:08:44,330 --> 00:08:48,390 I zobaczysz, na czym polega problem. 80 00:08:49,100 --> 00:08:53,610 Jeśli otworzyć ten zatrzymał się to dlatego, że mieliśmy błąd. 81 00:08:53,780 --> 00:09:00,390 Ale tak naprawdę dodaje pomarańczowe ciąg do tablicy nie rzeczywista nowy krąg. 82 00:09:00,530 --> 00:09:06,710 A to dlatego, że to, co mamy do pchania się nie tylko nowy krąg robimy nowy krąg. 83 00:09:06,740 --> 00:09:09,470 A potem ustawiamy kolor wypełnienia być pomarańczowy. 84 00:09:09,500 --> 00:09:13,010 Więc ostatnią rzeczą, która została zwrócona była pomarańczowa ciąg. 85 00:09:13,010 --> 00:09:16,780 Tak więc końcowy wynik jest to, że jesteśmy po prostu naciska na pomarańczowo każdym razem. 86 00:09:16,850 --> 00:09:18,530 Co nie jest to, co chcemy. 87 00:09:19,190 --> 00:09:35,920 Więc zrobimy nową zmienną będziemy nazywać nasz nowy krąg, a potem zrobimy nowy krąg kropki kolor wypełnienia oddzielnie równa pomarańczowy i wtedy będziemy naciskać w nowy krąg. 88 00:09:35,990 --> 00:09:40,480 Więc zamiast edytować to uwagę I sądzę, że jest to ważny błąd zobaczyć. 89 00:09:40,760 --> 00:09:56,450 Całkowicie złapał mnie z tropu bo tam na chwilę, ale ważne jest, aby zrozumieć, jak to działa, gdzie mamy te tych łańcuchach metod na jeden na drugim, gdzie minęliśmy tego kręgu, a następnie kropkę kolor wypełnienia wynosi pomarańczowy i po prostu dodać, że całość w tablica z naciśnięciem. 90 00:09:56,560 --> 00:09:57,800 Byliśmy po prostu dodając pomarańczę się. 91 00:09:57,830 --> 00:09:59,980 Więc musimy to naprawić. 92 00:10:00,110 --> 00:10:01,290 Więc mam nadzieję, że to robi. 93 00:10:01,310 --> 00:10:15,290 I właściwie wiem to robi, ale jeśli są świeże i spójrz teraz dodawać nowych okręgów losowo umieszczone i wszyscy wróg Heugh animowania więc po prostu doskonały. 94 00:10:15,290 --> 00:10:17,450 Teraz aktualizować to do pracy z rozmiarem. 95 00:10:17,570 --> 00:10:21,550 Więc jest to właściwie tylko to dokładnie ten sam wiersz, który tutaj mamy. 96 00:10:22,280 --> 00:10:23,860 Będę pozbyć naszej stałej nie zalogować. 97 00:10:23,930 --> 00:10:26,140 Poza chcemy kręgi. 98 00:10:26,160 --> 00:10:28,420 JA. 99 00:10:30,680 --> 00:10:31,370 OK. 100 00:10:31,730 --> 00:10:36,420 Więc zanim pokażę ci, czy to działa niech po prostu sprawdzić, co zrobiliśmy. 101 00:10:36,440 --> 00:10:55,770 Więc kiedy trafisz dowolnego klawisza możemy dodać w okręgu w losowo wybranym punkcie 2 wykonujemy losowy punkt, aby utworzyć nowe koło z tej przypadkowej pkt 10 promieniu pikseli i pozwala właściwie to zmienić, aby dopasować to, co mamy w roztworze, który jest pięćset a potem sprzedają karty wypełnienia zacząć jak pomarańczowy, który zmieni ostatecznie. 102 00:10:55,880 --> 00:10:58,840 A potem wcisnąć, że do tablicy o nazwie kręgów. 103 00:10:59,060 --> 00:11:07,200 Wtedy za każdym razem nowa ramka nazywa każdej klatce animacji jesteśmy pętli przez wszystkie kręgi. 104 00:11:07,520 --> 00:11:13,310 I dla każdego z nich dodajemy jeden do hewe i jesteśmy pomnożenie wielkości skali od punktu dziewięć. 105 00:11:13,430 --> 00:11:17,260 Więc jesteśmy kurczy się go po prostu odrobinę każdej klatce. 106 00:11:17,360 --> 00:11:26,540 Ale istnieje tak wiele ramek, że rzeczywiście kurczy dość szybko i możemy pozbyć naszego animowanego kręgu że teraz zaczyna się na stronie obciążenia. 107 00:11:26,540 --> 00:11:28,240 Nie chcemy, aby rozpocząć z czarnym ekranem. 108 00:11:28,250 --> 00:11:30,700 A potem, kiedy trafisz klucz dodamy koło. 109 00:11:30,710 --> 00:11:33,320 Warto więc spróbować. 110 00:11:33,320 --> 00:11:37,110 No to jedziemy. 111 00:11:37,130 --> 00:11:40,920 Jest to więc niemal dokładnie w ten sam sposób. 112 00:11:40,980 --> 00:11:43,130 Oto dźwięk. 113 00:11:43,130 --> 00:11:54,000 Jedna wielka różnica polega na tym, że kolor mówi to każdy klucz ma przypisany kolor tutaj tak P Czy ten niebieski ciemniejszy niebieski pół. 114 00:11:54,110 --> 00:11:55,810 Czy to szary. 115 00:11:55,980 --> 00:12:03,070 Więc na naszym jest to fioletowy teraz tu jesteśmy ustawienie wszyscy zaczynają się na pomarańczowo, a następnie zmieniając odcień. 116 00:12:03,500 --> 00:12:08,500 Więc musimy to naprawić, ale mam na myśli to zrobić czekać, aż dodamy dźwięk. 117 00:12:08,510 --> 00:12:10,990 Tak skończymy teraz. 118 00:12:11,210 --> 00:12:19,000 Jest mała optymalizacja, że ​​będzie to koniec, bo teraz mamy nie usuwając te kręgi z tablicy okręgu. 119 00:12:19,040 --> 00:12:25,490 Więc nawet jeśli wiesz, że po 10 sekundach koła wbiegł nawet po trzech sekundach nie widzę. 120 00:12:25,490 --> 00:12:27,330 Technicznie jest to wciąż w tej tablicy. 121 00:12:27,620 --> 00:12:29,540 Więc to nie jest idealny. 122 00:12:29,540 --> 00:12:36,170 Gdybyśmy mieli dziesięć tysięcy kręgi, które stworzył i nie widzimy żadnego z nich nie chcemy być zapętlenie nad każdym z nich. 123 00:12:36,170 --> 00:12:43,090 Tak więc w ostatnim filmie pokażę wam jak możemy zdjąć koło, gdy wiemy, że go nie ma lub gdy wiemy, że nie jest już możliwe.