C# - Web effektek: BlendTrans Filter

Filter 3. rész

forráskód letöltése
Sorozatunk most következő részében a BlendTrans filter használatával ismerkedhetünk meg. Ennek felhasználásával lehetőségünk nyílik arra, hogy egy képet, vagy egy tetszőleges HTML objektumot áttetszővé tegyünk egy általunk megadott mértékben.
Ha a web lapunk egy objektumához szeretnénk ilyen szűrőt felhasználni, akkor nem kell mást tennünk, mint egy speciális stílust megadni:
<img style="filter:progid:DXImageTransform.Microsoft.BlendTrans(Duration=1);" src="/Filter03/1.gif"/>
Majd szűrő megadása után elindítanunk az effekt lejátszását.
Nézzük most milyen tulajdonságokkal rendelkezik a BlendTrans nevű szűrő.
Duration
Osztály: DXImageTransform.Microsoft.BlendTrans
Duration
Az effekt lejátszásának idejét a Duration property-ben adhatjuk meg. Pl.: Duration = 2.5 esetén az effekt 2.5 másodperc alatt játszódik le.
Enabled
Osztály: DXImageTransform.Microsoft.BlendTrans
Enabled
Ha az Enabled igaz, akkor az effekt engedélyezett, ellenkező esetben nem lesz hatása.
Percent
Osztály: DXImageTransform.Microsoft.BlendTrans
Percent
Az effekt futásának pozíciója határozható meg, vagy állítható be százalékos formában. Nulla értéknél indul az effekt és száz százaléknál lesz befejezve.
Status
Osztály: DXImageTransform.Microsoft.BlendTrans
Status
Az effekt aktuális állapotát a Status property-n keresztül olvashatjuk ki. Ennek értéke az alábbiak egyike lehet:
Érték Leírás
0 az effekt le van állítva
1 az effekt alkalmazásra készen áll
2 az effekt lejátszás alatt áll
Nézzük miként alkalmazható a gyakorlatban ez az effekt, melynek lejátszását valamilyen eseményhez kell kötnünk. Ez lehet mondjuk a web lap letöltődése (OnLoad), de akár egy kattintás is valamely objektumon. Az egyszerűség kedvéért két nyomógombot helyeztünk el a web lapon, melyek segítségével megjeleníthetjük, illetve eltüntethetjük a HTML objektumokat a BlendTrans filter segítségével. A lejátszás idejét és a folyamat százalékát két DrowDownControl-ból választhatjuk ki. A két nyomógombhoz két kis javascript-et készítünk, mely elvégzi az effekt lejátszását. Amikor tehát az egyik gombra kattintunk, akkor kerül meghívásra a script.
<INPUT type="button" onclick="Hide(Image1, DropDownList2, DropDownList1)" ... >
A script-ben hozzárendeljük a paraméterként kapott HTML objektumhoz a szükséges filtert. Majd elindítjuk az effekt lejátszását.
 function Hide(obj, dur, perc) {
   obj.style.filter="blendTrans(duration="+dur.value+";percent="+perc.value+")";
   if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 2)) {
     obj.filters.blendTrans.Apply();
     obj.style.visibility="hidden";
     obj.filters.blendTrans.Play();
   }
 }
Az eltüntetés és a megjelenítés funkciója között csak annyi a különbség, hogy a Visibility tulajdonságot hol Hidden, hol pedig Visible értékre kell állítanunk. Ezzel adhatjuk meg, hogy a látható objektum eltűnjön, illetve a nem látható objektum megjelenjen.
 function Show(obj, dur, perc) {
   obj.style.filter="blendTrans(duration="+dur.value+";percent="+perc.value+")";
   if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 2)) {
     obj.filters.blendTrans.Apply();
     obj.style.visibility="visible";
     obj.filters.blendTrans.Play();
   }
 }

Filter cikksorozat