1 / 15

Web-grafika II (SVG) 7. gyakorlat

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)

neka
Download Presentation

Web-grafika II (SVG) 7. 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)7. gyakorlat Kereszty Gábor

  2. 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>

  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. <rect … ><animateid=“tegla” repeatCount=“4” dur=“5s” ... /> </rect> <circle …><animate begin=“tegla.repeat(2) + 2.5s” repeatDur=“7s”…/> </circle>

  4. 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)”/>

  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 <![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…

  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 <![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.

  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 <![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”.

  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: <rectid=“tegla” …><animate … begin=“tegla.click” onbegin=“fvnev(param)” onend=“fvnev(param)”/> </rect>

  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… }; … <rectid=“tegla” …onclick=“kezd()”/> <circle id=“kor” … onclick=“veg()”/>

More Related