|
|
Kocka 4 animáció.
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Mozilla végett: Programunkat, natúr html fájlban készítjük el, DOCTYPE meghatározás nélkül
Azon div szakaszt, melyben a kockakép mozog, utólagosan állítjuk be arra a méretre, melyet az adott mozgó objektum bejár.
Ha nem készítünk div szakaszt, akkor a mozgó objektum, a dokumentumunk szövegterületén mozog.
Teszteljük le úgy is, hogy a <div class="animaciodiv"> </div> szakaszt, töröljük programunkból.
A html fájl megírása
<body>
<img src="peldakep.jpg" width="15px" height="15px" id="kocka4" class="kocka" />
<div class="animaciodiv"> </div>
<script language="JavaScript" type="text/javascript" src="elérési_útvonal.js"> </script>
</body>
A CSS fájl megírása
.animaciodiv { width: 270px; height: 170px; margin-left: 45px; border: 2px solid black;}
.kocka {position: absolute; margin-top: 5px; margin-left: 50px; }
JavaScript (js fájl) program megírása
var x=10; y=50;
var c=1;
// az Update() függvény Meghívása. (Egy másodperces időzítés = 1000)
window.setTimeout ("Update(); " , 10) ;
var idelem = document.getElementById("kocka4") ;
function Update () {
c++;
idelem.style.marginTop=x ;
idelem.style.marginLeft=y;
if ( c < 145 ) x= x+1;
else if ( c >= 145 && c <= 395 ) y= y+1;
else if ( c >= 396 && c <= 540 ) x= x-1;
else if ( c >= 541 && c <= 790 ) y= y-1;
else {c=0 ; x=10; y=50;}
//A function programunkban is, el kell helyezni, az időzítő funkciót
window.setTimeout("Update(); " , 10) ;
}
A JavaScript program ismertetője.
- A js. programunkban, kezdetben, elhelyezünk 3, azaz három változót, a következő elnevezésekkel: x, y, és c
- Majd ezekhez egy tetszőleges értéket rendelünk. Jelen esetben: x=10; y=50; c=1;
- Meghívjuk az Update(); beépített JavaScript függvényt, és beállítjuk annak ismétlődését. Jelen esetben: 10;
- Létrehozunk egy újabb, tetszőleges elnevezésű változót. Jelen esetben, idelem (var idelem). Ezt követően, meghatározzuk, hogy a programunk, melyik, az itt beírt id azonosítóval rendelkező objektumra (jelölőcímkére) vonatkozik.
- Készítünk egy feladat meghatározást, azaz funkciót: function Update ()
- Hullámos zárójelek között ( { } ), elkészítjük azon feladatokat, azaz funkciókat, melyek az adott id azonosítóval rendelkező objektum tulajdonságait meghatározzák.
- A következő lépésben, c értékét fokozatosan növeljük 1-el ( c++ ). Ettől kezdve, a c értéke, a végtelenségig növekszik 1-el, azaz egyel. Ezt, nyomon követve, feltételeket határozhatunk meg.
- Mielőtt feltételeket szabunk, határozzuk meg azt is, hogy mire és melyik az itt meghatározott objektumra (jelölőcímkére) vonatkoznak feltételeink. Jelen esetben, az idelem-re elnevezett változóra
- Mivel az adott objektumot mozgatni szeretnénk, a feltételek függőleges irányúak top (x) és vízszintes irányúak left (y)
- Ha ezekkel megvagyunk, csak a feltételeket kell meghatároznunk.
- Minden egyes feltételnél a c értéke az irányadó. Ez határozza meg, hól az x, hól az y értékét.
- Első feltételünk, if ( c < 145 ) x= x+1;
Jelentése: amíg c értéke, kisebb mint 145, addig az x értékét minden alkalommal 1-el, azaz egyel növeljük, ezáltal a Top értéke folyamatosan növekszik egyel - Második feltétalünk: else if ( c >= 145 && c <= 395 ) y= y+1;
Ha c értéke nagyobb vagy egyenlő mint 145, és kisebb vagy egyenlő, mint 395, akkor y értékét fokozatosan növeljük, egyel. - Harmadik feltételünk: else if ( c >= 396 && c <= 540 ) x= x-1;
Ha c értéke nagyobb vagy egyenlő mint 396, és kisebb vagy egyenlő, mint 540, akkor x értékét fokozatosan csökkentsük, egyel. - Negyedik feltételünk: else if ( c >= 541 && c <= 790 ) y= y-1;
Ha c értéke nagyobb vagy egyenlő mint 541, és kisebb vagy egyenlő, mint 790, akkor y értékét fokozatosan csökkentsük, egyel.
- Végezetül itt meg is állhatnánk, de, van két lehetőségünk.
- Első: Ha végleg megállítjuk az objektum mozgását, akkor állítsuk be a végleges pozíció állapotot.
Például : else { x=10; y=50;}. - Második: Ha újra akarjuk indítani az eredeti állapotnak megfelelően, akkor a c értékét le kell nullázni.
Példa: else {c=0 ; x=10; y=50;}. - Programunk ujraindításához, azaz frissítéséhez, újból elhelyezzük a window.setTimeout("Update(); " , 10) ; uztasítást