C# - Összetett animáció végrehajtása

Animáció Weblapokon 3. rész

forráskód letöltése
A sorozat előző számaiban egyszerű animációs műveleteket végeztünk el az illető objektumoknak átadott kontrolokon, vagy azok valamilyen property-jén. Cikkünkben megismerkedhetünk annak módjával, hogy miként generálhatunk összetettebb mozzanatokat a különböző animációs megoldások ötvözésével, vagyis hogyan hangolhatjuk össze az egyes animációs lépéseket valamilyen változatos mozgásforma megalkotása céljából.
A mellékelt példa megnyitása előtt szükséges egy AnimateMotion03 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát, és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A sorozat ezen utolsó számában elkészítettünk egy példát, melyben az animációs objektumok számára átadott DIV kontrol mozgása emlékeztet a tűzijáték fellőtt és lefelé zuhanó fénycsóváinak mozgására. A mozgás a holtpontig folyamatosan lassuló, majd a holtpont után folyamatosan gyorsuló egészen addig, míg a kontrol elkezd méretében és színében is megváltozni. A mozgássorozat végén a kontrol eltűnik.
A teljes animációban részt vevő objektumok egy <t:PAR> elembe ágyazva jelennek meg a weblap HTML kódjában. Erre azért van szükség, hogy a mozgás teljes egészében megismételhető legyen.
A kontrol mozgatása és színváltoztatása három műveletcsoport eredménye, melyeket sorban egymás után hajtunk végre meghatározott sebességgel, a kívánt hatás elérése érdekében.
A DIV kontrolt a sorozat első részében megismert ANIMATEMOTION objektum deklarációjának nyitó és záró tagja közé ágyazzuk, így gondoskodva arról, hogy elsőként a folyamatosan gyorsuló mozgás hajtódjon végre.
<t:PAR id="par1">
  <t:ANIMATEMOTION id="anim1" begin="0" dur="2.7" targetElement="infobox" calcMode="spline" path="M 200 500 C 212.5 200 225 6 287.5 0 325 2 337.5 37 350 125" keyTimes="0;.55;1" keySplines="0 0.7 0.5 0.9;0.8 0.2 0.7 0.2">
    <DIV id="infobox" ... class="time">
    </DIV>
  </t:ANIMATEMOTION>
  ...
A DIV kontrol deklarációjában a CLASS attribútumban meg kell adni a HTML kódba beszerkesztett „time” nevű stílust, hogy a TIME behavior jellemzőit elérhessük.
A mozgásban jelenleg ott tartunk, hogy a kontrol elérte a holtpont állapotot, és éppen egy folyamatosan gyorsuló szakaszban mozog. Ezt követően kétszer egymás után megnöveljük a kontrol méreteit és színét, mely úgy hat, mintha a „fénycsóvák” szétszóródnának.
A két mozgásforma teljesen azonos, azzal a különbséggel, hogy a kontrol mérete és színe kicsit eltérő mértékben változik meg. Ebben a következő lépéseket tesszük. Elsőként kétszer méretet módosítunk az ANIMATE objektum segítségével:
  <t:ANIMATE id="anim2" begin="2.3" dur=".2" calcmode="spline" targetElement="infobox" attributeName="style.height" values="5;50" keyTimes="0;1" keySplines="0 0.6 0.7 1" />
  <t:ANIMATE id="anim3" begin="2.3" dur=".2" calcmode="spline" targetElement="infobox" attributeName="style.width" values="5;50" keyTimes="0;1" keySplines="0 0.6 0.7 1" />
Majd a kontrol háttérszínét változtatjuk meg az ANIMATECOLOR objektum segítségével.
  <t:ANIMATECOLOR id="anim4" begin="2.3" dur=".2" calcmode="spline" targetElement="infobox" attributeName="style.background-color" values="yellow;orange" keyTimes="0;1" keySplines="0 0.6 0.7 1" />
A weblapon található nyomógombbal újratölthetjük a weblapunkat, vagyis újraindíthatjuk a mozgást.

Animáció Weblapokon cikksorozat