150 likes | 250 Views
Web-grafika II (SVG) 7. gyakorlat. Kereszty Gábor. Animációk egyebek I. Ahol a <set> elemet hasz náljuk a nem szám értékű attr. megváltoztatására. v isibility: láthatóság (hidden, visible)
E N D
Web-grafika II (SVG)7. gyakorlat Kereszty Gábor
Animációk egyebek I Ahol a <set> 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 atranszformáló animációt. <rect … style=“visibility: hidden”><set attributeName=“visibility” attributeType=“CSS” to=“visible” begin=“4s”dur=“1s” fill=“freeze”/><animateTransform … begin=“5s” dur=“2s”/><animateColor … begin=“prev.end”… /> </rect>
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. <rect … ><animateid=“tegla” repeatCount=“4” dur=“5s” ... /> </rect> <circle …><animate begin=“tegla.repeat(2) + 2.5s” repeatDur=“7s”…/> </circle>
Scriptek Script elhelyezése az svg törzsön belül: <script type=“text/ecmascript”> <![CDATA[ function fvnev(paramlista){ … kód … }; … további függvények … //]]> </script> <elemonesemény=“fvnev(paramlista)”/>
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
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
Saját paraméter elérés <![CDATA[ function fvnev(evt){ var obj = evt.getTarget(); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]> </script> <circle …onclick=“fvnev(evt)”/> Ahol a getAttribute-tal lekérdezhetjük egy adott attr. értékét, a setAttribute-tal pedig új értéket adhatunk egynek…
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.
Elem keresés id alapján <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“kor”); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]> </script> <circle id=“kor” …/> <polygon … onclick=“fvnev()”/> Amikor a sokszögre kattintunk, a kör egy adott tulajdonságát tudjuk változtatni.
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.
Szöveg módosítása <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“szoveg”); var ujsz = svgDocument.createTextNode(“újszöveg”); obj.replaceChild(ujsz, obj.getFirstChild() ); }; //]]> </script> <textid=“szoveg” …>…eredeti szöveg…</text> Szöveget úgy tudunk módosítani, hogy lecseréljük annak „gyerekét”.
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.
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: <rectid=“tegla” …><animate … begin=“tegla.click” onbegin=“fvnev(param)” onend=“fvnev(param)”/> </rect>
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’) /
Egyéb – setInterval() var timer; function kezd(){ timer = setInterval(‘mozgat()’,5); }; function veg(){ clearInterval(timer); }; function mozgat(){ …kód… }; … <rectid=“tegla” …onclick=“kezd()”/> <circle id=“kor” … onclick=“veg()”/>