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!