-
Sok módja van annak, hogy valami animáltnak látszódjon,
-
az alapelv mégis mindig ugyan az:
-
Ha van egy köteg rajzod vagy képed
-
és mindegyik csak egy kicsit tér el a másiktól
-
és elég gyorsan pörgeted őket
-
mozgóképnek fog látszódni.
-
A régi időkben ezeket a rajzokat kézzel készítették
-
és NAGYON sokáig tartott egy három másodperces animáció elkészítése.
-
Szerencsénkre mi a jövőben élünk.
-
Nagyon könnyű kódolással egy egyszerű animációt elkészíteni.
-
Meg is mutatom, hogyan kell!
-
A jobb oldalon látsz egy édes kisautót szép sárga háttérben.
-
És igen, én magam terveztem ezt az autót, köszi!
-
Mindegy, itt állítottuk be ezt a szép hátteret
-
és az autónak nincsenek körvonalai, azaz noStroke() parancsot használunk.
-
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.
-
Ha ezt az értéket megváltoztatjuk,
-
akkor az autó előre-hátra mozogni fog.
-
Legyen 10
-
Itt beállítjuk az autó kitöltési színét és két négyszöget rajzolunk testnek.
-
Az első négyszög lesz az alja
-
a második a teteje.
-
Itt a kerekekkel ugyanezt csináljuk
-
Beállítjuk a kitöltő színt és rajzolunk két ellipszist:
-
egy az x+25-nél,
-
és egy az x+75-nél
-
Végre rátérünk az újdonságra.
-
Ezt a dolgot itt úgy hívják, hogy funkció definíció
-
Erről később még fogsz tanulni.
-
Most csak nézzünk rá és jegyezzük meg, hogy fest.
-
Ami a fontos, az a "draw" és ezek a zárójelek.
-
Ez a nyitó zárójel
-
Ez a záró.
-
Ezt az egész dolgot együtt rajzolási, vagy animációs ciklusnak hívjuk.
-
Minden, amit a zárójelek közé teszel ismétlődni fog, úgymond lefut újra meg újra nagyon gyorsan
-
Ezért hívjuk ciklusnak (angolul loop)
-
Minden, ami a zárójeleken kívül van csak egyszer fut le, a program kezdetén.
-
Első lépés tehát, hogy a rajzainkat betesszük a zárójelek közé
-
Így a képeket újra és újra rajzolja a program.
-
Ezt csináljuk meg. Ezt kijelölöm
-
és lehúzom a ciklusomba.
-
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
-
Már tudom, hogy a zárójelben van a kódom.
-
Minden ugyanolyan maradt, semmi nem változott.
-
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".
-
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".
-
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.
-
Semmi sem változott, ezért nem is fogsz animációt látni.
-
Csak ugyanazokat a négyszögeket és ellipsziseket fogja egymásra rajzolni.
-
Ne feledd, ha valamit animáltnak szeretnénk látni, időnként apróságokat változtatni kell rajta.
-
Szóval ha azt szeretném, hogy az autóm előre mozogjon,
-
az x értékét kell változtatnom, igaz?
-
Oké, akkor legyen 11.
-
De akkor minden alkalommal 11 lesz!
-
Hogy kellene megoldanom, hogy az x értéke változzon minden alkalommal, amikor a kód újra lefut?
-
Nézd ezt a bűvös trükköt:
-
Emlékszel, a var x egy új változót készít.
-
Ha a cikluson belül hagyjuk, minden egyes alkalommal készít egy új x nevű változót
-
Nekünk az kell, hogy a változót a cikluson kívül hozzuk létre. Így csak egyszer készül el.
-
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.
-
Tehát az lesz, hogy a változót kitesszük a cikluson kívülre, így csak egyszer "gyártódik" le
-
é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
-
azaz ezentúl mindig 11 lesz.
-
valahol a rajzolás ciklusban megváltoztatjuk az x értékét, mondjuk legyen az x az x előző értéke +1
-
Juhé! Működik!
-
Kivéve hogy.. valahogy furcsa. Ha szeretnéd tudni, azért ilyen, mert a hátteret elfelejtettük a cikluson belülre tenni.
-
Tehát lerajzolja az autót újra meg újra, de az összes eddigi autót is látod a mostani alatt.
-
Ezért ha ezt a sort ide húzom a ciklusom elejére,
-
és megnyomom az újraindítás gombot, látom az autómat...
-
Hurrá! Tökéletes!
-
És ha szeretnénk, hogy az autónk gyorsabban menjen, növelhetjük az x szorzóját,
-
ha 10, húha! Lement a képről! Állíthatom negatívra is, így x-10, és...
-
Itt jön! Legyen pozitív, upsz... ott megy!
-
Tehát ezekre kell emlékeznünk:
-
Ezt itt rajzolási ciklusnak hívjuk. Tedd bele a rajzolási kódodat és újra és újra megrajzolja.
-
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.
-
Azután a ciklusban megváltoztatjuk a változó értékét egy picit
-
általában hozzáadunk az eredeti számhoz, vagy elveszünk belőle egy számot
-
É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.
-
És kész!
