WEBVTT 00:00:01.109 --> 00:00:03.193 Sok módja van annak, hogy valami animáltnak látszódjon, 00:00:03.193 --> 00:00:05.241 az alapelv mégis mindig ugyan az: 00:00:05.241 --> 00:00:07.132 Ha van egy köteg rajzod vagy képed 00:00:07.132 --> 00:00:09.726 és mindegyik csak egy kicsit tér el a másiktól 00:00:09.726 --> 00:00:11.462 és elég gyorsan pörgeted őket 00:00:11.462 --> 00:00:13.267 mozgóképnek fog látszódni. 00:00:13.267 --> 00:00:16.167 A régi időkben ezeket a rajzokat kézzel készítették 00:00:16.167 --> 00:00:19.696 és NAGYON sokáig tartott egy három másodperces animáció elkészítése. 00:00:19.696 --> 00:00:22.877 Szerencsénkre mi a jövőben élünk. 00:00:22.877 --> 00:00:26.130 Nagyon könnyű kódolással egy egyszerű animációt elkészíteni. 00:00:26.130 --> 00:00:27.998 Meg is mutatom, hogyan kell! 00:00:27.998 --> 00:00:31.468 A jobb oldalon látsz egy édes kisautót szép sárga háttérben. 00:00:31.468 --> 00:00:34.965 És igen, én magam terveztem ezt az autót, köszi! 00:00:34.965 --> 00:00:38.575 Mindegy, itt állítottuk be ezt a szép hátteret 00:00:38.575 --> 00:00:42.531 és az autónak nincsenek körvonalai, azaz noStroke() parancsot használunk. 00:00:42.531 --> 00:00:47.471 Azután készítünk egy új változót (x) az autó pozíciójának, és adunk neki egy értéket, ez 10 lesz. 00:00:47.471 --> 00:00:49.456 Ha ezt az értéket megváltoztatjuk, 00:00:49.456 --> 00:00:52.105 akkor az autó előre-hátra mozogni fog. 00:00:52.105 --> 00:00:53.531 Legyen 10 00:00:53.531 --> 00:00:57.594 Itt beállítjuk az autó kitöltési színét és két négyszöget rajzolunk testnek. 00:00:57.594 --> 00:01:00.063 Az első négyszög lesz az alja 00:01:00.063 --> 00:01:02.483 a második a teteje. 00:01:02.483 --> 00:01:05.027 Itt a kerekekkel ugyanezt csináljuk 00:01:05.027 --> 00:01:06.979 Beállítjuk a kitöltő színt és rajzolunk két ellipszist: 00:01:06.979 --> 00:01:08.648 egy az x+25-nél, 00:01:08.648 --> 00:01:10.191 és egy az x+75-nél 00:01:10.191 --> 00:01:12.828 Végre rátérünk az újdonságra. 00:01:12.828 --> 00:01:15.169 Ezt a dolgot itt úgy hívják, hogy funkció definíció 00:01:15.169 --> 00:01:16.691 Erről később még fogsz tanulni. 00:01:16.691 --> 00:01:19.566 Most csak nézzünk rá és jegyezzük meg, hogy fest. 00:01:19.566 --> 00:01:24.292 Ami a fontos, az a "draw" és ezek a zárójelek. 00:01:24.292 --> 00:01:25.190 Ez a nyitó zárójel 00:01:25.190 --> 00:01:26.750 Ez a záró. 00:01:26.750 --> 00:01:30.530 Ezt az egész dolgot együtt rajzolási, vagy animációs ciklusnak hívjuk. 00:01:30.530 --> 00:01:35.295 Minden, amit a zárójelek közé teszel ismétlődni fog, úgymond lefut újra meg újra nagyon gyorsan 00:01:35.295 --> 00:01:36.702 Ezért hívjuk ciklusnak (angolul loop) 00:01:36.702 --> 00:01:41.792 Minden, ami a zárójeleken kívül van csak egyszer fut le, a program kezdetén. 00:01:41.792 --> 00:01:45.529 Első lépés tehát, hogy a rajzainkat betesszük a zárójelek közé 00:01:45.529 --> 00:01:47.833 Így a képeket újra és újra rajzolja a program. 00:01:47.833 --> 00:01:51.661 Ezt csináljuk meg. Ezt kijelölöm 00:01:51.661 --> 00:01:54.261 és lehúzom a ciklusomba. 00:01:54.261 --> 00:02:02.471 Hogy jól látszódjon, hogy ez a kód a zárójelben van, egy behúzással beljebb viszem, kijelölöm és megnyomom a tab gombot 00:02:02.471 --> 00:02:05.746 Már tudom, hogy a zárójelben van a kódom. 00:02:05.746 --> 00:02:10.208 Minden ugyanolyan maradt, semmi nem változott. 00:02:10.208 --> 00:02:17.788 Amikor először fut le a kód, a gép azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist". 00:02:17.788 --> 00:02:24.289 Aztán visszamegy az elejére és azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist". 00:02:24.289 --> 00:02:28.213 Aztán azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist". Teljesen ugyanazt. 00:02:28.213 --> 00:02:31.151 Semmi sem változott, ezért nem is fogsz animációt látni. 00:02:31.151 --> 00:02:34.660 Csak ugyanazokat a négyszögeket és ellipsziseket fogja egymásra rajzolni. 00:02:34.660 --> 00:02:40.395 Ne feledd, ha valamit animáltnak szeretnénk látni, időnként apróságokat változtatni kell rajta. 00:02:40.395 --> 00:02:42.761 Szóval ha azt szeretném, hogy az autóm előre mozogjon, 00:02:42.761 --> 00:02:45.361 az x értékét kell változtatnom, igaz? 00:02:45.361 --> 00:02:48.052 Oké, akkor legyen 11. 00:02:48.052 --> 00:02:51.117 De akkor minden alkalommal 11 lesz! 00:02:51.117 --> 00:02:57.564 Hogy kellene megoldanom, hogy az x értéke változzon minden alkalommal, amikor a kód újra lefut? 00:02:57.564 --> 00:02:59.707 Nézd ezt a bűvös trükköt: 00:02:59.707 --> 00:03:02.789 Emlékszel, a var x egy új változót készít. 00:03:02.789 --> 00:03:08.061 Ha a cikluson belül hagyjuk, minden egyes alkalommal készít egy új x nevű változót 00:03:08.061 --> 00:03:13.467 Nekünk az kell, hogy a változót a cikluson kívül hozzuk létre. Így csak egyszer készül el. 00:03:13.467 --> 00:03:22.770 Minden alkalommal, mikor a kód lefut, és látja a gép, hogy az x már létezik és azt az értékét fogja használni, amelyet mi adunk neki. 00:03:22.770 --> 00:03:31.295 Tehát az lesz, hogy a változót kitesszük a cikluson kívülre, így csak egyszer "gyártódik" le 00:03:31.295 --> 00:03:38.291 és minden alkalommal mikor az x-szel találkozik, ugyanazt az egy változót fogja használni és az értéke is az lesz, amit utoljára adtunk, azaz 11 00:03:38.291 --> 00:03:41.757 azaz ezentúl mindig 11 lesz. 00:03:41.757 --> 00:03:52.984 valahol a rajzolás ciklusban megváltoztatjuk az x értékét, mondjuk legyen az x az x előző értéke +1 00:03:52.984 --> 00:03:54.931 Juhé! Működik! 00:03:54.931 --> 00:04:02.823 Kivéve hogy.. valahogy furcsa. Ha szeretnéd tudni, azért ilyen, mert a hátteret elfelejtettük a cikluson belülre tenni. 00:04:02.823 --> 00:04:07.147 Tehát lerajzolja az autót újra meg újra, de az összes eddigi autót is látod a mostani alatt. 00:04:07.147 --> 00:04:12.190 Ezért ha ezt a sort ide húzom a ciklusom elejére, 00:04:12.190 --> 00:04:15.984 és megnyomom az újraindítás gombot, látom az autómat... 00:04:15.984 --> 00:04:18.269 Hurrá! Tökéletes! 00:04:18.269 --> 00:04:22.386 És ha szeretnénk, hogy az autónk gyorsabban menjen, növelhetjük az x szorzóját, 00:04:22.386 --> 00:04:28.862 ha 10, húha! Lement a képről! Állíthatom negatívra is, így x-10, és... 00:04:28.862 --> 00:04:34.552 Itt jön! Legyen pozitív, upsz... ott megy! 00:04:34.552 --> 00:04:36.550 Tehát ezekre kell emlékeznünk: 00:04:36.550 --> 00:04:43.513 Ezt itt rajzolási ciklusnak hívjuk. Tedd bele a rajzolási kódodat és újra és újra megrajzolja. 00:04:43.513 --> 00:04:52.015 Azután a változóidat a cikluson kívül definiáld, ez nagyon fontos, így tudjuk ugyanazt a változót újra és újra használni. 00:04:52.015 --> 00:04:55.854 Azután a ciklusban megváltoztatjuk a változó értékét egy picit 00:04:55.854 --> 00:05:02.315 általában hozzáadunk az eredeti számhoz, vagy elveszünk belőle egy számot 00:05:02.315 --> 00:05:07.934 És végül a változókat használjuk a rajzolási kódon belül, így a rajzunk változni fog időről időre. 00:05:08.479 --> 00:05:10.010 És kész!