Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.

Hasonló előadás


Az előadások a következő témára: "Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor."— Előadás másolata:

1 Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor

2 Animációk egyebek I Ahol a elemet használjuk a nem szám értékű attr. megváltoztatására. visibility: láthatóság (hidden, visible) A prev kulcsszóval is tudunk hivatkozni a megelőző animációra, ebben az esetben nem kell elneveznünk a transzformáló animációt.

3 Animációk egyebek II Ahol az első animáció 4-szer fut le, a második pedig 7mp-ig ismétlődik. A második akkor indul, amikor az első a 3. lefutásának közepén tart.

4 Scriptek Script elhelyezése az svg törzsön belül:

5 Fő események click – kattintás mousedown – egérgomb lenyomása mouseup – egérgomb felengedése mouseover – egérrel felette állunk mouseout – egérrel lejövünk róla mousemove – egér mozgatása load – dokumentum betöltve keydown – billentyűlenyomás keyup - billentyűfelengedés

6 Fő / általános paraméter Ez a paraméter az ‘evt’, ami a bekövetkezett eseményhez tartozó tulajdonságokat tartalmazza. Metódusai: getTarget() – az objektum getClientX, getClientY – az egér x és y koordinátája

7 Saját paraméter elérés Ahol a getAttribute-tal lekérdezhetjük egy adott attr. értékét, a setAttribute-tal pedig új értéket adhatunk egynek…

8 Feladatok Készíts egy 50*50-es zöld téglalapot, aminek a szélessége a 100-ra nő, ha ráállunk az egérrel, és visszaáll az eredetire, ha lejövünk róla. Egészítsd ki az előző feladatot úgy, hogy a téglalap magassága a másfélszeresére növekedjen, amikor rákattintunk.

9 Elem keresés id alapján Amikor a sokszögre kattintunk, a kör egy adott tulajdonságát tudjuk változtatni.

10 Feladatok Készíts egy sárga kört, aminek a sugara 10 egység. Készíts két “vezérlőgombot”. Az egyikre kattintva a kör sugara változzon a kétszeresére, a másik állítsa vissza az eredeti sugarat.

11 Szöveg módosítása Szöveget úgy tudunk módosítani, hogy lecseréljük annak „gyerekét”. …eredeti szöveg…

12 Feladatok Készíts egy lila és egy fekete négyzetet. Készíts egy olyan scriptet, ami kiírja annak a téglalapnak a színét, amelyik felett állsz.

13 Animáció & script Animáció elejéhez és végéhez is lehet scriptet kapcsolni, valamint az indítás és leállítás megoldható egy-egy esemény kiváltásával, pl:

14 Feladatok Készíts egy 40 egység sugarú piros kört, aminek a mérete megduplázódik, majd visszacsökken eredeti mértére, ha rákattintunk. Készíts egy olyan függvényt, ami a „Vege” üzenetet jeleníti meg, és hívd meg ezt a fv-t az animáció végén. / text-visibility vagy alert(‘Vege’) /

15 Egyéb – setInterval() var timer; function kezd(){ timer = setInterval(‘mozgat()’,5); }; function veg(){ clearInterval(timer); }; function mozgat(){ …kód… }; …


Letölteni ppt "Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor."

Hasonló előadás


Google Hirdetések