Amit a scriptaculousról tudni érdemes 2

Az 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});

flickerfulllinearpulsesinoidalspringreverse

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
Katt és lásd!

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.