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

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

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

2 Animációk Ahol: –aN : tulajdonság, amit változtatni szeretnék (szám típus) –aT : CSS (pl. style) vagy XML („külső” attribútum) –from / to / by : kezdeti- / végérték / növekmény –begin / end : kezdés / leállás ( h:m:s | m:s | érték+[h|min|s|ms] ) –dur : futási idő –fill : remove / freeze – kezdőállapot visszaállítása / végállapot megtartása

3 Feladatok Rajzolj egy 6 egység szélességű vonalat a (20,20) és (180,80) pontok között. Készíts egy animációt, ami 2mp-cel a betöltés után indul, és 3mp alatt megduplázza a vonal vastagságát. Rajzolj a (20,20) pontba egy 100*100-as piros négyzetet. Készíts animációt, mely 5mp alatt a felére csökkenti a négyzet szélességét Old meg egy újabb animációval, hogy a négyzet függőleges szimmetriatengelye ne mozduljon el.

4 Animációk hangolása Animációk hangolása Az animációkat elnevezhetjük (id), majd később hivatkozhatunk rá, pl. más animáció kezdésének beállításánál: begin=“animnév.begin + idő”

5 Feladatok Egészítsd ki az előző ábrát egy 20 egység sugarú, (100,100) középpontú körrel. Készíts egy animációt, ami 3mp alatt 50 egységre növeli a kör sugarát, és akkor indul, amikor a négyzet animációja végetért. Alakítsd át úgy a négyzet animációját, hogy a betöltés után 3 és fél mp-cel leálljon.

6 Szinek animációja Ahol: –aN : szín típusú attribútumra hivatkozik –from / to : kezdeti- / végérték (szín típusú) –begin / end : kezdés / leállás ( h:m:s | m:s | érték+[h|min|s|ms] ) –dur : futási idő –fill : remove / freeze – kezdőállapot visszaállítása / végállapot megtartása

7 Feladatok Készíts egy lila ellipszist 70, 40 sugárral a (100,100) pont köré. Betöltés után 2mp- cel induljon el egy 4mp-es animáció, mely az ellipszis szinét világoszöldre változtatja.

8 Transzformációk animációja Ahol: –type : a transzformáció típusa (scale, rotate, …) –add : replace/sum – több animáció összekapcsolásához, mindnél át kell állítani ‘sum’-ra

9 Feladatok Egészítsd ki az előző rajzot egy animációval, mely a színváltás közben 90°-kal elforgatja az ellipszist, annak középpontja körül. Egy újabb animációval told el az alakzatot lefelé 50 egységgel.

10 Mozgás görbe mentén Az első esetben egy egyenes mentén mozgatunk, minden azonos csoportba eső elemet. A második esetben görbe mentén mozgatjuk (görbe), az eddig megszokott módon megadott alakzatot. Itt beállíthatjuk az alakzat elfordulásának szögét fokban (rot), amit „auto”-ra állítva követi a görbe ívét.

11 Mozgás görbe mentén Egy előre megadott görbe mentén az mpath kulcsszó segítségével tudunk mozgatni.

12 Feladatok Hozz létre egy 10*10-es négyzetet. Mozgasd egy egyenes mentén. A négyzetet egy Bézier-görbe (M10 80Q70 20 180 160) mentén mozgasd, próbáld ki a rotate attribútumot különböző értékekkel. Rajzold meg külön a görbét és alkalmazd az animációnál.

13 Animációk ismétlése repeatCount: hányszor ismétlődjön repeatDur: meddig működjön Feladat: Az előző animációt –futtasd le kétszer –működtesd 10mp-ig