Amit a scriptaculousról tudni érdemes 2

scriptaculousAz első részben megismerkedhettünk a scriptaculous efektjeivel általánosságban. Ez a rész az efektek finomhangolását az átmenet szabályozását és a várkozási sor manipulálását mutatja be.

Efekt finomhangolások

Az efekteket pár finomhangoló eszköz segítségével további érdekes tulajdonságokkal ruházhatjuk fel.

delay
Normál esetben minden effekt azonnal elindul ahogy azt létrehozzuk. A delay opcióval tudunk ezen módosítani. Alapértelmezett értéke 0.0 másodperc.
queue
Lehetséges értékei: parallel, front, end, with-last (erről kicsit később)
duration
Alapértelmezett értéke 1.0 másodperc, ennyi ideje van az efektnek lefutnia.
fps
Ennyi lépést tesz meg másodpercenként a kívánt effectben a látvány átalakításához. Az ember kb 25 fps alatt fogja darabosnak látni a hatást, felette már folytonosnak tűnik az átalakulás.
sync
Akkor használatos ha különböző efekteket szeretnénk az Effect.Parallels segítségével.
transition
Ha az efekt az elejétől a végéig ugyanolyan sevességgel hajtódik végre akkor nem fog túl elegánsan kinézni. Ezért alapból a transition opció azt csinálja, hogy az effekteket lassan indítja, aztán felgyorsítjam és a végére újra lelassítja.
from és to
Normál esetben egy efekt egy kezdőponttól halad a végpont felé, pl egy elhalványulás esetén az opacity tulajdonság 0-tól 1-ig. Ha ezt a tuljdonságot akarjuk módosítani, pl, hogy az elem ne tűnjön el teljesen akkor a from és to opciókat kell állítgatnunk.

Callbackok

A különböző efektekhez a következő callback függvényeket lehet csatolni.

beforeStart
mielőtt az effekt elindul
beforeSetup / afterSetup
az effekt első rendelelése előtti / utáni fázis
beforeUpdate / afterUpdate
minden egyes frame előtt / után
beforeFinish / afterFinish
az efekt befejezése előtt / után

Ha mondjuk azt szeretnénk, hogy az elemünk ne csak láthatatlanná váljon egy blindup után, hanem ténylegesen eltávolításra kerüljön a dom-ból, akkor a következőképpen járjunk el.

removeAfterBlindUp : function(elem){  //elem eltávolítása a DOMból Blindup után
   new Effect.BlindUp(elem,{
      afterFinish: function(){
         Element.remove(elem);
         }
      });
   }//removeAfterBlindUp

Transition azaz átmenet

Kicsit fentebb említettük, hogy ez egy olyan tuljdonság ami segítségével finomhangolhatjuk az efektjeinket. Az átmenet, transition tulajdonság azt szabályozza, hogy a kezdő állapotból a végpontba való átmenet hogyan történjen.

flicker
az efekt utolsó 25%-ából véletlenszerűen választ
full
egyből az efekt végpontjára ugrik
linear
a kezdő frametől az utolsóig egyenletesen halad. Kinézete egy kicsit természetellenes.
none
marad az első frame-en, nem hajtja végre az efektet
pulse
az efekt többször fut végig, alapértelmezés szerint 5 alkalommal
sinoidal
ez az alapértelmezett, az efekt eleje és vége lassú, a közepe gyors
spring
az efekt kicsit túlmegy a végponton aztán visszatér. Mozgatásnál szép.
reverse
visszafelé futatja az efektet az utolsó frametől az elsőig

Itt van mindegyikre egy példa. A Góranga felirat vissza fog állni az eredeti helyzetbe, ha ez megtörtént akkor lehet kipróbálni a következő gombot.

new Effect.MoveBy('trans', 0, 180 , {duration: 1.5,
   transition: Effect.Transitions.flicker});
Góranga

Queue azaz sorbaállítás

Fentebb már szó volt róla, hogy ha egyszerre több efektet akarunk futtatni, akkor gondoskodnunk kell arról, hohgy azok megfelelő sorrendben fussanak le. A queue opciónak 3 paramétert adhatunk meg.

position
azt szabályozza, hogy az efekt hová kerül a várakozó sorban

parallel
az efekt akkor kezdődik amikor a soronkövetkező lépéshez érünk (default)
front
az efekt a várakozási sor elejére kerül
end
az efekt a várakozási lista végére kerül
with-last
az utolsó várakozó efektel egyidőben fog végrehajtódni
scope
akkor használatos amikor egyszerre több elemen akarunk több efektet végrehajtani.

new Effect.MoveBy('para2', -15, 100, {position: 'end',
   scope: 'q1'});
new Effect.Scale('para2', 175, {position: 'end',
   scope: 'q1'});

new Effect.MoveBy('para3', 15, -100, {position: 'end',
   scope: 'q2'});
new Effect.Scale('para3', 125, {position: 'end',
   scope: 'q2'});
Góranga

Góranga

limit
Néha előfordulhat, hhogy a user túlbuzgó és 26-szor rákattint egy gombra. Ekkor a várakozási sorba bekerül 26-szor annyi efekt ahányat egy gombnyomásra szerettünk volna lefutatni. Ha ezt szeretnénk korlátozni, akkor kell használnunk a limit paramétert.

new Effect.SlideDown('menu', {queue: {position:'end',
   scope: 'menuxscope', limit:2} }); // első
new Effect.Highlight('menu', {queue: {position:'end',
   scope: 'menuxscope', limit:2} }); // második
new Effect.SlideUp('menu', {queue: {position: 'end',
   scope: 'menuxscope', limit:2} });  // harmadik

Az első és a második esemény bele fog kerülni a várakozási sorba, míg a harmadik nem, hanem csendben eldobásra kerül.

A queue használatával érdemes vigyázni, mert pl ha megpróbáljuk összekapcsolni ezzel az Effect.MoveBy és az Effect.Pulsate metódusokat ugyanarra a dom elemre, akkor azt fogjuk tapasztalni, hogy a két függvény össze fog azon veszni, hogy ki melyik dom jellemzőt módosítsa ugyanabban az időpontban.

Ezzel befejeződött az efekteket bemutató rész. A következő részben a scriptaculous drag and drop moduljával próbálunk meg közelebbi kapcsolatba kerülni.

6 thoughts on “Amit a scriptaculousról tudni érdemes 2

  1. az első példában van egy hiba: ha a teljes lefutás (és a visszaállás) előtt kérsz másik effektet, akkor nem az eredeti pozícióba áll vissza a felirat, hanem az eredeti végpont (px) + második lefutás (px)-be.
    tudom, hogy nem életszerű live oldalon több effektet felhasználni, de ennek a problémának a megoldási is érdekelne 😉 (meg a bátateszter meszél belőlem)

  2. ati: miért nem lenne életszerű több effekt? Nagyon is az. Maga a megoldás is ott van lejjebb, queue és nevesített scope-ok használatával lehet játszani, hogy mi legyen ha normál esetben ütköznek az effektek. Ha ez nem elég, és mondjuk effekt megszakításra van szükség (mint a kérdésedben) akkor meg valami ilyesmi kell:

    var varakozok = Effect.Queues.get('scopeNeve');
    varakozok.each(function(e){
      e.cancel();
      });
    
  3. Szia!
    🙂

    Látom, már legalább 9 cikked van a scriptaculousról.
    Nem lehetne esetleg egy ilyen részletest a prototype-ról is?
    🙂

    Keresek egy egyszerű, gyors, handheldeken, telefonok böngészőjében is működő keretrendszert. Úgy TŰNIK, a proto ilyen. Viszont legalább ilyen részletes leírás nincs róla magyar nyelven.
    🙁

    Megtennéd, hogy kibővíted a prototype-os cikkeket?
    🙂

    Nagy Hála lenne érte!
    :))))))))))))

    Gábor

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.