1 / 13

Web-grafika II (SVG) 6. gyakorlat

Web-grafika II (SVG) 6. gyakorlat. Kereszty Gábor. Animációk. < alakzat attr =“ … ” > <animate attributeName=“ aN ” attributeType=“ aT ” from=“ from ” to=“ to ” by=“ by ” begin=“ x s” end =“ y s” dur=“ z s” fill=“ freeze ”/> </alakzat>. Ahol :

kaden-ballard
Télécharger la présentation

Web-grafika II (SVG) 6. gyakorlat

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related