Az eddigi fejezetekben olyan képeket hoztunk létre, amelyek statikus ábrákat tartalmaztak. A következő fejezetekben azzal fogunk megismerkedni, hogy milyen módon lehet egy rajzot mozgásra bírni, hogyan reagálhat egy kép a felhasználó tevékenységére. Animációkat készíthetünk az SVG beépített elemei segítségével, ill. lehetőség van arra is, hogy a dokumentumban scripteket helyezzünk el. Ebben a fejezetben a beépített elemek lehetőségeiről lesz szó.
Egy animációt az animálandó elem belsejében kell elhelyezni. Ehhez arra van szükség, hogy az elemnek legyen nyitó és lezáró kódeleme is. Eddig minden elem üres volt, azaz csak attribútumai voltak, gyermekelemei pedig nem. Most szét kell bontani az elemet egy nyitó és egy lezáró részre. Ehhez nincs más dolgunk, mint a nyitó kódelemből eltávolítani a "/" jelet és egy új záróelemet készíteni az alakzathoz. Az alábbi példa egy ilyen átalakítást tartalmaz. Ha nem szeretnénk animációkat készíteni, akkor a két kód teljesen egyenértékűnek számít. Ha animálni szeretnénk, akkor viszont csak a második használata jöhet szóba.
| 1. | <elem attr1="ertek1" attr2="ertek2"/> |
| 2. | <elem attr1="ertek1" attr2="ertek2"> </elem> |
Az animációt leíró elemet az alakzat nyitó és a lezáró kódeleme közé kell elhelyezni. Egy alakzaton többféle animációt végrehajthatunk, ilyenkor egyszerűen több gyermekelemet kell egymás mellett elhelyezni.
A legtöbb tulajdonság egyetlen számértékkel rendelkezik. Ezeket a tulajdonságokat a <animate> elemmel lehet animálni. Az összetett elemek animálásához használható speciális elemekről később lesz szó. Most ismerkedjünk meg az <animate> használatával:
| <animate | attributeName= | "" | |
| attributeType= | "" | ||
| from= | "" | ||
| by= | "" | ||
| to= | "" | ||
| begin= | "" | > | |
| dur= | "" | ||
| end= | "" | ||
| fill= | "" | /> |
Nézzük, mit jelentenek az attribútumok!
| attributeName | Az animálandó attribútum neve. Erre az attribútumra fog végrehajtódni az animáció. Az attribútumnak nem kell feltétlenül szerepelnie az elemben, de mindenképpen szükséges, hogy szerepelhessen. |
| attributeType | Ebben a mezőben az animálandó attribútum típusát kell megadni. Alapértelmezett értéke auto, ezen kívül még CSS és XML értékeket vehet fel. Ha CSS értéket adunk, akkor az animálandó tulajdonságot a CSS tulajdonságok közt fogja keresni az értelmező, XML érték esetén pedig az XML attribútumok között. Ha az auto beállításnál maradunk, akkor először a CSS tulajdonságok, majd az XML attribútumok között fogja megkeresni az attributeName-ben megadott jellemzőt. |
| from | Az animálandó tulajdonság kezdőértéke |
| by | A változás mértéke |
| to | Az animálandó tulajdonság animáció utáni értéke |
| begin | Az animáció kezdete |
| dur | Az animáció időtartama |
| end | Az animáció vége |
| fill | Ez az attribútum az animáció utáni állapot meghatározására való. Ha azt szeretnénk, hogy a kezdőállapotba kerüljön vissza az elem, akkor a remove értéket kell beállítani, ha pedig a végállapotban szeretnénk megtartani az elemet, akkor a freeze beállítást kell alkalmazni. az alapértelmezett érték a remove. |
Látszólag az attribútumlistában túl sok tulajdonság van megadva az időtartammal és a változás mértékével kapcsolatosan. Mindkét esetben van kezdő- és végérték, ill. a különbség is megadható. Ez azonban nem jelent ellentmondást.
Amikor megadjuk egy animáció időbeli jellemzőit, akkor mindenképpen be kell állítani az időtartamát, különben nem fog működni az animáció. Ezen kívül ha nem adunk meg kezdő időpontot, akkor a kép betöltődésekor azonnal elindul az animáció. Ha megadjuk a befejeződés időpontját is, akkor az animáció addig tart, amíg ezt az időpontot el nem éri, vagy a kezdőpillanat után el nem telik az az idő, ameddig az animáció tart. Vagyis a kétféle módon megadott befejeződés közül a korábbi lesz az érvényes.
Az időtartamok megadására többféle lehetőségünk van. Fontos tudni, hogy minden egyes dokumentum betöltésekor elindul egy óra, amely a dokumentum bezárásáig működik. Ennek segítségével adható meg az animációk kezdete, vége és időtartama. Az időmegadás formátuma többféle lehet:
13/1. feladat:
Hozz létre egy 200×100-as koordinátarendszert. Rajzolj egy 6 egység szélességű kék vonalat a (20,20) és a (180,80) pontok között. Készíts egy olyan animációt, ami 1 másodperccel a betöltés után indul és 2 másodperc alatt a vonal vastagságát 12 egységnyire növeli.
13/2. feladat:
Készíts egy 200×200-as koordinátarendszert. Helyezz el benne egy 100×100-as piros négyzetet a (20,20) pontba. Készíts egy olyan animációt, ami a négyzet szélességét felére csökkenti 5 másodperc alatt. Az animáció az oldal betöltése után egy másodperccel induljon.
13/3. feladat:
Egészítsd ki az előző animációt úgy, hogy a téglalap függőleges szimmetriatengelye mindvégig ugyanott maradjon.
A feladat megoldásához kétféle animációra van szükség. Egyszerre, párhuzamosan módosul két attribútum értéke. Ezt úgy érhetjük el, hogy ugyanazon elemen belül helyezünk el két <animate> elemet. Ezek módosító hatása párhuzamosan érvényesül. A 13/3. feladatban, a középvonal helyben tartásához két tulajdonságot kell befolyásolni. A szélesség módosítása mellett a bal felső pont x koordinátáját is kell módosítani. A két animáció "összefésülését" könnyen meg lehet oldani. Elegendő kiszámolni a megfelelő végértéket és gondoskodni kell róla, hogy az animációk pontosan ugyanakkor játszódjanak le.
Színek módosításához az <animateColor> elemet kell használni.
| <animateColor | attributeName= | ""> | |
| attributeType= | "CSS" | ||
| from= | "" | ||
| to= | "" | ||
| begin= | "" | ||
| dur= | "" | ||
| end= | "" | ||
| fill= | "" | /> |
Az elem használata azonos az eddig megismertekkel, de a by attribútumnak nincs értelme. Egyetlen különbség, hogy itt mindig CSS típusú tulajdonság változik, ezért az attributeType értéke minden esetben CSS.
13/4. feladat:
Készíts egy 200×200-as koordinátarendszert. Helyezz el egy 70 ill. 40 féltengelyű lila ellipszist a középpontjában. Készíts egy olyan animációt, ami az oldal betöltődése után 1 másodperccel indul és 3 másodperc alatt az ellipszis színét világoszöldre változtatja.
Mivel a színekhez hasonlóan a transzformációk sem egyetlen számmal leírhatók, az animálásukhoz is egy speciális elemre van szükség. Ez az elem az <animateTransform>, ami néhány attribútumában eltér a korábban megismertektől, kiegészül ugyanis a type attribútummal:
| <animateTransform | attributeName= | "transform" | |
| type= | "" | ||
| attributeType= | "XML" | ||
| from= | "" | ||
| to= | "" | ||
| begin= | "" | ||
| dur= | "" | ||
| end= | "" | ||
| fill= | "" | /> |
Mint a leírásból is látszik, jelen esetben az attributeType értéke XML, mert minden esetben XML tulajdonságot változtatunk. Ezen kívül szintén helyzettől függetlenül a módosítandó attribútum neve is mindig transform, hiszen minden transzformációt a transform attribútummal lehet leírni. A type attribútumban azt kell megadni, hogy melyik transzformációt szeretnénk módosítani. Ez eltolásnál a translate, forgatásnál a rotate, stb. Mindig azt a kulcsszót kell használni, amit az alakzatban is megadnánk, ha transzformálni szeretnénk.
13/5. feladat:
Egészítsd ki az előző feladatban elkészített rajzot egy olyan animációval, amely ugyanabban az időpontban játszódik le, mint amelyikben a színváltás, és elforgatja az ellipszist a középpontja körül 90 fokkal.
Ebben a példában is jól látszik, hogy egyáltalán nem kell az alakzat attribútumai között szerepelnie annak, amelyiket módosítani szeretnénk.
Ha transzformációkról van szó, akkor általában nem egyetlen forgatást vagy nyírást alkalmazunk egy alakzatra, ezért az animáláskor is lehetséges többnek a módosítása. Ha két transzformáció animálására van szükség, akkor az additive attribútumra is szükség van. Ennek alapértelmezett értéke a replace, ami azt eredményezi, hogy ha több <animateTransform> elem van megadva, akkor csak a legutolsót veszi figyelembe. Általában erre a beállításra semmi szükség nincs. Helyette a sum értéket kell megadni minden olyan animációban, amelynek a hatását egyszerre szeretnénk látni.
13/6. feladat:
Módosítsd az előző feladatot úgy hogy a koordinátarendszered 200×300-as legyen és legyen benne még egy animáció, ami 100 egységgel lefelé tolja el az alakzatot.
Animációk segítségével tetszőleges mozgást is leírhatunk. Erre az <animateMotion> elem szolgál.
| <animateMotion | from= | "" | |
| to= | "" | ||
| path= | "" | ||
| begin= | "" | ||
| dur= | "" | ||
| end= | "" | ||
| fill= | "" | /> | |
| rotate= | "" | /> |
Az elem időzítés szempontjából úgy működik, mint a többi animáció készítésére szolgáló elem. A mozgatás kétféle módon történhet. Egyrészt mozgathatjuk az alakzatot egyenes vonalon. Ilyenkor a from és a to attribútumokat kell használni a vonal végpontjainak megadásához. A path attribútumot nem kell megadni. Az attribútumok két számot kapnak értékül, vesszővel elválasztva. A megadott koordináták az alakzat koordinátarendszerében értendők. Ezzel a módszerrel olyan hatást lehet elérni, mint az <animateTransform> elem használatakor.
13/7. feladat:
Helyezz el egy 200×200-as rajzlapon egy 10×10 egységnyi zöld négyzetet. Erre a négyzetre alkalmazz egy animációt, ami elmozgatja a (180,80) pontba. Az animáció az oldal betöltése után 1 másodperccel induljon és 4 másodperc alatt játszódjon le.
Az egyenes vonalú mozgás mellett bármilyen görbe mentén is mozgathatjuk az alakzatokat. Ilyenkor a form és a to helyett a path attribútumban kell megadni a mozgás adatait. Ide bármilyen görbe leírása kerülhet. A leíráshoz minden olyan eszközt használhatunk, amit a "Görbék" fejezetben megismertünk. Hasonlóan azt előző változathoz, a görbe megadásához itt is az alakzat koordinátarendszerét kell használni.
13/8. feladat:
A rajzlap méretét állítsd 200×200-ra, és helyezz el rajta egy 10×10-es zöld négyzetet a (10,80) pontba. Animációval mozgasd a négyzetet egy olyan másodfokú Bézier-görbe mentén, amelynek a végpontja a (180,160) pont, vezérlőpontja pedig a (70,20) pontban van. Az ábrára rajzold ki a görbét is. Az animáció az oldal betöltése után 1 másodperccel induljon és 4 másodperc alatt játszódjon le.
A feladat megoldásakor a görbét kétszer kellett leírni, kis módosítást végrehajtva a kezdőponton. Ezt a dupla leírást leegyszerűsíthetjük. Első lépésként el kell készíteni a görbét, az eddig megszokott módon. A <path> elemben fel kell venni egy id attribútumot, amelyben elnevezzük a görbét. Az <animateMotion> elemből elhagyjuk a görbe leírását, helyette egy gyermekelemet helyezünk el benne. Az beágyazott elem az <mpath>, melynek egyetlen attribútumával hivatkozhtaunk a görbére, az alábbi módon:
<mpath xlink:href="#gorbe_neve"/>
Ha ezt a módszert használjuk, és ki szeretnénk rajzolni a mozgás útvonalát is, akkor a görbét eltolással kell a megfelelő helyre tenni.
13/9. feladat:
Módosítsd úgy az előző feladatot, hogy a mozgás útvonalát görbeként elnevezed, majd az elnevezett útvonalat használod fel az animáció készítésekor.
Az <animateMotion> elem leírásában szerepelt egy attribútum, amelynek a szerepéről eddig nem esett szó. A rotate attribútum segítségével megadhatjuk, hogy az alakzat a mozgás vonalához képes hogyan viselkedjen. Az attribúum kétféle értéket vehet fel. Ha egy számértéket adunk meg, akkor az alakzat egy ekkora szöggel kerül elforgatásra az animáció kezdetekor, majd a mozgást az így kapott alakzat végzi. Az attribútum felveheti az auto értéket is. Ebben az esetben az alakzat illeszkedik a görbére oly módon, hogy az eredeti x tengely iránya minden pillanatban változik úgy, hogy egybeessen a görbe érintőjével. A forgatás minden esetben az alakzat koordinátarendszerének középpontja körül történik. Ha az origótól eltérő helyen van szükségünk az alakzatra, akkor célszerű az áthelyezést transzformációk segítségével megoldani.
13/10. feladat:
Módosítsd úgy az előző feladatot, hogy a mozgás során a négyzet illeszkedjen a görbére.