Web-grafika II (SVG) 6. gyakorlat

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

2. Animációk <alakzat attr=“…”><animate attributeName=“aN” attributeType=“aT” from=“from” to=“to” by=“by” begin=“xs” end=“ys” dur=“zs” fill=“freeze”/> </alakzat> 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 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ő” <animate id=“anim1” …/> <animate begin=“anim1.end + 1s” …/>

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 <animateColor attributeName=“aN” from=“from” to=“to” begin=“xs”dur=“zs” fill=“freeze”/>

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 <animateTransform attributeName=“aN” attributeType=“aT” from=“from” to=“to” type=“t” additive=“add” begin=“xs” dur=“zs” fill=“freeze”/>

9. Feladatok • Egészítsd ki az előző rajzot egy animációval, mely a színváltás közben 90°-kalelforgatja 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. <animateMotion from=“x1,y1” to=“x2,y2” dur=“zs” fill=“freeze”/> <animateMotionpath=“görbe” rotate=“rot” dur=“zs” fill=“freeze”/>

11. Mozgás görbe mentén Egy előre megadott görbe mentén az mpath kulcsszó segítségével tudunk mozgatni. <path id=“vezér” d=“görbe” style=“stílus”/> <alakzat …><animateMotion rotate=“rot” dur=“zs” fill=“freeze”> <mpath xlink:href=“vezér”/></animateMotion> </alakzat>

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