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
ésto
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});
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órangaGó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.
Effekt két “f”. Magyarul is. 🙂
tom: Köszi. Majd legközelebb nem felejtem el 🙂
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)
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:
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
@Gábor Fogom de nem mostanában…