C# - Hullámzó objektumok a Weblapon

forráskód letöltése
Az Internet Explorer 4. verziójától kezdve érhető el az a funkció, mellyel tetszőleges objektumok alakját befolyásolhatjuk oly módon, hogy az hullámzó hatást keltsen. Ehhez egy speciális filtert használhatunk fel, melynek paramétereiben kell megadnunk a hullámforma konkrét tulajdonságait. A cikkünkben bemutatjuk, hogy mit kell tennünk annak érdekében, hogy az adott stílussal rendelkező objektum mozgásában is hullámzást idézzen, mintha csak egy szélben lobogó zászló lenne.
Mellékelt példa megnyitása előtt szükséges egy WaveFilterTest 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 példa alkalmazásban a weblapon elhelyeztünk egy DIV objektumot, benne pedig egy Label, és egy Image kontrolt. A DIV objektum a benne található objektumokkal együtt hullámozni fog, hála a bevezetőben említett filternek.
Lehetőségünk van arra, hogy a filtert az objektum attribútumaként adjuk meg, akkor a következőket kell tennünk:
<ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.Wave(sProperties)" ...>
A filter tulajdonságai dinamikusan, script-kódból is állíthatók, ekkor szintaxisa a következő:
object.style.filter =
"progid:DXImageTransform.Microsoft.Wave(sProperties)";
A sProperties listában kell megadni a filter jellemzőit, egymástól azokat vesszővel elválasztva. Ezek a következők:
  • Add: megadható, hogy a filter kép átlapolja az eredeti képet, vagy sem (árnyékhatás).
  • Enabled: állítható, hogy engedélyezett-e a filter, vagy sem.
  • LightStrenght: negadható egy számmal a fényintenzitásbeli eltérés a hullámfelület egyes részei közt.
  • Freq: a hullámok száma, mely megjelenik a formában.
  • Strenght: a forma vízszintes irányú torzulásának, elnyúlásának mértéke adható meg.
  • Phase: megadható a hullámot jelző szinusz-függvény fáziseltolása.
A filtert megadva és paraméterezve elérhetjük, hogy az objektum hullámos formában jelenjen meg. Azonban ahhoz, hogy az objektum mozgásában is imitálja a hullámzást, a PHASE property értékét folyamatosan változtatnunk kell. Ehhez írnunk kell egy megfelelő ütemező függvényt, amelyben folyamatosan növeljük a property értékét. Erre legalkalmasabb a window objektum setInterval függvénye, melyben megadjuk, hogy milyen műveletet végezzünk el, és milyen időközönként.
Ezt az initFlash függvényben indítjuk el:
function initFlash()
{
  setInterval("doWave()", 50);
}
A műveletet végző doWave függvény a következőképpen néz ki:
var phase = 0;
function doWave()
{
  if (phase == 100)
  {
    phase = 0;
  }   document.all["filterdiv"].filters.item("DXImageTransform.Microsoft.Wave").phase = phase;
  phase += 5;  
}
A lap betöltődésekor indul a művelet, mivel azt a <body> onload attribútumában helyeztük el.
<body ...onload=”initFlash()”>
A DIV kontrol filters kollekciójában kell kijelölni a Wave filtert, majd a Phase property-jének értékét folyamatosan növelni. Ezt egészen addig tesszük, amíg az érték kisebb, mint 100. Ekkor nullázzuk a property-t, majd kezdjük elölről.