Animációk 2.

Ebben a fejezetben az animációk újabb tulajdonságaival ismerkedhetsz meg. Ezek a jellemzők általában mindegyik típus esetén alkalmazhatóak, ezért kerültek egy külön fejezetbe.


Animációk ismétlése

Ha egyszerűen elkészítünk egy animációt, az lejátszódik, majd a döntésünktől függően az alakzat visszaáll az eredeti helyzetébe, vagy a végállapotban marad. Ezen kívül háromféle lehetőségünk van:

Ezek beállítására a repeatCount és a repeatDur attribútum használható. A repeatCount-ban megadhatjuk, hogy hányszor játszódjon le az animáció. Értékül valamilyen számot kell megadni. A repeatDur segítségével az időtartama állítható be. Ennek az attribútumnak az értéke valamilyen időtartam, melynek a formátuma megegyezik az egyéb időpontmegadásoknál látottakkal. Mindkét attribútumot az <animate> - vagy bármely másik animációt leíró - elemben kell felvenni. Ha azt szeretnénk, hogy az animáció az oldal elhagyásáig működjön, akkor valamelyik attribútum értékeként az indefinite kulcsszót kell megadni.

14/1. feladat:

A 13/2. feladatban elkészített animációt egészítsd ki úgy, hogy 7 másodpercen keresztül ismétlődjön.

14/2. feladat:

Az előző feladatot alakítsd át úgy, hogy az animáció végtelen ideig ismétlődjön.


Animációk összehangolása

Az eddigi összes példában az animációk indítása pontosan megadott időpillanatban történt. Ezen kívül lehetőség van arra is, hogy egy animáció egy másik kezdete vagy vége után induljon közvetlenül, vagy meghatározott idővel követve azt. Ehhez két dolgot kell elkészíteni. Először is el kell nevezni azt az animációt, amelyiknek a jellemzőit fel szeretnénk használni az időzítéshez. Ezt az id attribútummal lehet megtenni. Ezután az elnevezett animáció kezdetére ill. végére úgy lehet hivatkozni, hogy a név után teszünk egy pontot, majd a begin vagy end kulcsszavak valamelyikét. Ezzel az animáció elejére vagy végére hivatkozunk úgy, hogy az elindítandó animáció begin attribútumának értékéül adjuk. Ehhez az időponthoz képest megadható még valamilyen eltolás is, a már megismert időformátumokban. Egyetlen dolgot nem tehetünk meg két animáció összehangolásakor, nem adható meg eltolásként negatív időérték, mert ez a böngészőtől azt követelné meg, hogy előre lássa egy-egy esemény bekövetkeztét. Az összehangolás lehetőségeinek a kihasználásához nincs szükség arra, hogy az animációkat ugyanazon az alakzaton hajtsuk végre, mindösszesen egy dokumentumban kell elhelyezkedniük.

14/3. feladat:

Készíts egy 200×200-as rajzlap közepére egy 50 egység sugarú lila kört. Készíts el két animációt a dokumentumodban. Az első az oldal betöltése után 2 másodperccel induljon és 3 másodperc alatt növelje meg a kör sugarát 80-ra. Ennek a vége után 1 másodpereccel pedig induljon el egy olyan animáció, ami a kiinduló állapotot állítja vissza, szintén 3 másodperc alatt.

Ha egy alakzaton több animációt is végrehajtunk, akkor lehetőség van arra, hogy egy animációt a leírásban előtte elhelyezett animációhoz képest is lehet időzíteni. Ilyenkor nincs szükség elnevezésre, az animáció neve helyett a prev szócskát kell használni. Mivel ez a módszer nem sokkal egyszerűbb, mint az előző, használatát nem javaslom. Ennek oka az, hogy ha esetleg módosítanánk az animációt, akkor előfordulhat, hogy két egymásra hivatkozó animáció közé kerül egy harmadik, ami elrontja a sorrendet. Ezzel szemben az elnevezett animációknál ez a veszély nem jelentkezik. Természetesen kellő körültekintéssel ez a módszer is alkalmazható.


Nem egyenletesen változó animációk

Az eddig megismert animációknál minden esetben a kiinduló állapotból egyenletesen jutott el a végállapotba az alakzat. Ennél sokkal változatosabb módokat is lehet készíteni egy animáció végrehajtására. Három újabb attribútumot van lehetőségünk elhelyezni az animációk készítésére szolgáló elemekben. A values attribútum megadására mindenképpen szükség van. Ebben kell felsorolni, hogy milyen értékeken keresztül menjen végbe az animáció. Az értékek közé pontosvesszőt kell tenni, de az utolsó után nem szabad. Ha mást nem állítunk be, akkor a rendelkezésre álló időtartamot úgy osztja el a megjelenítő, hogy minden változásra ugyanannyi idő jusson. Ezt nem befolyásolja, hogy mekkora változásnak kell végbemennie egy egység alatt. Vagyis ha n értéket adunk meg és k másodperc áll rendelkezésre a végrehajtáshoz, akkor minden egyes változásra k/(n-1) másodperc jut. Ha volt beállítva from vagy to érték, akkor azok nem lesznek figyelembe véve.

14/4. feladat:

Készíts egy 400×400-as rajzlapot. A (100,100) pontba készíts egy 20 egység sugarú világoszöld kört. Készíts egy animációt, ami 6 másodperc alatt játszódik le, és a kör sugarát a következő értékeken keresztül változtatja: 20, 40, 20, 60, 20, 80 és 20. Az animáció az oldal betöltése után 2 másodperccel induljon.

Ha azt is be szeretnénk állítani, hogy az animáció mely időpontban vegye fel a megadott értékeket, akkor egy keyTimes nevű attribútumot is el kell helyeznünk. Ebben annyi 0 és 1 közötti értéket kell megadni, ahány elemből állt az előző lista. A számértékek azt jelzik, hogy a teljes időtartamot 1-nek véve, ezen belül mikor érje el az animáció a megadott értéket. A számokat most is pontosvesszővel kell elválasztani.

Az alábbi ábra egy ilyen hozzárendelést mutat be. Az attribútumok értékei a következők:
values="20; 60; 30; 40; 60" és keyTimes="0; 0.25; 0.4; 0.8; 1"

Ha az alapbeállításokat használjuk, akkor az egyes értékek között az átmenet egyenletes lesz. Ez azt jelenti, hogy például a 0.6 időpontban - ahogyan az ábráról is leolvasható - a felvett érték 35 lesz.

14/5. feladat:

Az előző ábrán készíts el egy újabb kört, ami az előzővel megegyezik, de a középpontja a (300,100) pontban van. Az animáció is ugyanolyan legyen, de egészítsd ki azzal, hogy az egyes értékeket rendre a 0, 0.1, 0.6, 0.7, 0.8, 0.9 és 1 időpontokban vegye fel a kör sugara. Hasonlítsd össze a két animációt.

Ha nem egyenletes átmenetet szeretnénk a pontok között, akkor a calcMode attribútumot kell beállítani. Ennek három értéke lehet:

linear Két pont között lineáris az átmenet. Az animateMotion elem kivételével mindig ez az alapbeállítás, így nem kell külön megadni.
discrete Nincs változás két pont között, hanem a megadott időpontban a következő érték kerül beállításra.
paced A teljes intervallumon egyenletes a változás, egy időegység alatt ugyanannyi változás következik be. Az animateMotion esetében ez az alapértelmezett.

Ha a discrete beállítást használjuk, akkor az előző időpont-érték párokat használatával az alábbi ábra szerint alakul az animálandó jellemző értéke. Az ábráról leolvasható, hogy a 0.6 időponthoz a 30 érték tartozik.

A beállítások között a legérdekesebb a paced. Ha ezt állítjuk be, akkor a keyTimes attribútum értékei nem lesznek figyelembe véve. Az összes változás egyenletesen oszlik el az intervallumon. Az eddigi példában összesen 100 egységnyi változás megy végbe az animáció során. Ezt egyenletesen kell elosztani a 0-1 intervallumon, azaz pl. 0.1 időegységre 10 egységnyi változás jut. Ezt mutatja az alábbi ábra is. Leolvasható, hogy jelen esetben a 0.6 időpontban felvett érték 40 lesz.

14/6. feladat:

Az eddig elkészített két kör alá másold le a másodikat, a (100,300) és a (300,300) pontokba. Az egyiknél próbáld ki, milyen eredményre vezet, ha a calcMode-nak a discrete értéket adod, a másiknál pedig a paced értéket állítsd be. Figyeld meg a különböző beállítások eredményét.