Delphi - Web effektek: BlendTrans Filter

Web effektek 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=2);" src="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 onclick="Hide(Image1, 2, 100) ... >
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();
        }
      } 

Web effektek cikksorozat