Scriptaculous Effect.Tween: come funziona

Fra tutte le librerie “web 2.0″ disponibili, scriptaculous è sicuramente quella più mal documentata! Sul sito ufficiale, spesso lento, la documentazione è parziale, mal fatta e di difficile consultazione. Con gli ultimi rilasci, poi, alcune nuove funzionalità sono completamente mancanti, proprio come il nuovo core effect Tween (Effect.Tween). Quest’ultimo, in modo simile al Tween di Flash, permette di manipolare transizioni personalizzate. La sua SYNOPSIS base è la seguente:

1
Effect.Tween(object, from, to);

Questo nuovo effetto permette quindi di eseguire un tween (transizione) tra due valori, impostare proprietà o chiamare metodi di un oggetto (inclusi gli elementi del DOM HTML). Supporta anche funzioni di callback che avranno il contesto dell’oggetto su cui si esegue la transizione.

Vediamo qualche esempio:

a) Esegue un Tween sulla proprietà mp dell’oggetto mo.

1
2
3
var mo = { mp: 0 }
//
new Effect.Tween (mo, 30, 80, 'mp');

b) Esegue un Tween sull’elemento ‘foo’ del DOM HTML

1
<div id="foo"></div>
1
new EffectTween ('foo'', 0, 100, 'innerHTML');

c) Impostare i parametri standard supportati da scriptaculous:

1
new Effect.Tween('foo', 10, 100, { duration: 10 }, 'innerHTML');

d) Uso delle funzioni di callback:

1
2
3
4
new Effect.Tween('foo', 10, 100, { duration: 10.0 }, function(p) {
        this.innerHTML = 'Countdown: '+p
    }
);

e) Tipo di transizione:

1
new Effect.Tween('foo', 10, 100, { duration: 10, transition:Effect.Transitions.sinoidal }, 'innerHTML');

f) Impostazioni degli eventi standard:

1
new Effect.Tween('foo', 10, 100, { duration: 2, afterFinish: function() { alert("Game Over"); } }, function(p) { this.innerHTML = 'Countdown: '+p } );

Per provare questi esempi potete usare il seguente codice completo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
    //
    Event.observe(window, 'load', main);
    //
    function main() {
        new Effect.Tween('foo', 10, 100, { duration: 2, afterFinish: function() { alert("Game Over"); } }, function(p) { this.innerHTML = 'Countdown: '+p } );
    }
</script>
</head>

<body>
<div id="foo"></div>
</body>
</html>

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL