IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les effets visuels de script.aculo.us

précédentsommairesuivant

Les effets de synchronisation▲

Il n'existe pas de référence à des effets de synchronisation dans la librairie script.aculo.us ni dans la documentation officielle. Cependant, j'ai choisi de réunir dans cette rubrique une série d'effets provenant soit des effets noyaux soit de la classe Effect.Base.
Il s'agit d'une collection d'effets dont le rôle est de coordonner les autres effets entre eux.
Les effets que nous allons voir dans cette rubrique sont les suivants : Transitions, Parallel, multiple, Queue / Queues / ScopedQueue (que j'ai réunis, car ils participent à la même fonctionnalité) et Methods.

L'effet Transitions▲

L'effet Transitions n'est en réalité qu'une collection de formules mathématiques qui vont permettre de modifier le comportement d'un effet dans le temps.
En interne, un effet n'est pas une simple incrémentation linéaire de valeurs. Dans les exemples proposés précédemment, la transition par défaut (sinoidal) a été appliquée et vous pouvez constater que l'effet accélère au début et ralenti à la fin.

Il existe neuf types de transitions :

Transition

Description

Modélisation mathématique

linear

Incrémentation linéaire des valeurs de l'effet.

i

sinoidal

Accélération progressive de l'animation.

-cos(i?/2)+0.5

reverse

Effet inversé.

1-i

flicker

Effet de tremblement accentué sur la fin de l'animation.

max(((-cos(i?)/4)+0.75)+rand()/4, 1)

wobble

Effet de secousses.

-cos(10i?)/2+0.5

pulse

L'effet est accéléré 5 fois et répété 5 fois.

-cos((pos*((pulses||5)-0.5)*2)*?)/2+0.5
pulses est le nombre de pulsations (5 par défaut)

spring

Effet de stabilisation sur la position finale.

1-cos(4.5i*?)*e(-6i)

none

L'effet reste à sa position initiale.

0

full

L'effet va à sa position finale immédiatement.

1

Voir un exemple

Code de l'exemple
Sélectionnez
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Transitions</title><style type="text/css">
<!--
#conteneur1{
background-color : blue;
width: 150px;
height: 100px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet Scale</h2>
<h3 style="margin: 10px 0 10px 50px;"><span id="conteneur">Elément à agrandir / réduire</span></h3>
<div>
    <input type="button" value="Agrandir" onclick="new Effect.Scale('conteneur', 200,
     {transition: Effect.Transitions[$('transition').value]});" />
    <input type="button" value="Diminuer" onclick="new Effect.Scale('conteneur', 50,
     {transition: Effect.Transitions[$('transition').value]});" />
</div>
<h2>Test de l'effet Move</h2>
<div id="conteneur1"></div>
<div>
    <input type="button" value="Tester" onclick="new Effect.Move('conteneur1',
     {x: 200, y: 0, mode: 'relative', transition: Effect.Transitions[$('transition').value]});" />
    <input type="button" value="Retour" onclick="$('conteneur1').style.left=''" />
</div>
<div>
    Choisissez une transition : 
    <select id="transition">
        <option value="linear">linear</option>
        <option value="sinoidal">sinoidal</option>
        <option value="reverse">reverse</option>
        <option value="flicker">flicker</option>
        <option value="wobble">wobble</option>
        <option value="pulse">pulse</option>
        <option value="spring">spring</option>
        <option value="none">none</option>
        <option value="full">full</option>
    </select>
    puis testez un effet.
</div>
<div>
    <input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet Parallel▲

Cet effet est utilisé pour lancer plusieurs effets.

Syntaxe
Sélectionnez
new Effect.Parallel([tableau effets][, options]);

Avec :

  • tableau effets : un tableau contenant les différents effets à lancer, dans leur syntaxe usuelle.

Option spécifique

Description

Défaut

sync

Valeur booléenne, permet de lancer les effets simultanément. À indiquer dans les options de chaque effet.

true

Si l'option sync est false, l'effet en question sera lancé dès son invocation, ce qui peut causer un léger décalage.

Voir un exemple

Code de l'exemple
Sélectionnez
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Parallel</title><style type="text/css">
<!--
#conteneur{
background-color : blue;
width: 150px;
height: 100px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet Parallel</h2>
<div id="conteneur"></div>
<div>
    <input type="button" value="Tester" onclick="new Effect.Parallel([
        new Effect.Move('conteneur', {sync: true, x: 400, y: 0, mode: 'relative' }), 
        new Effect.Opacity('conteneur', {sync: true, from: 1, to: 0 }),
        new Effect.Morph('conteneur', {style: {width: '0px', height: '0px'}, sync: true})
    ], {duration: 1.5});" />
    <input type="button" value="Retour"
     onclick="$('conteneur').setStyle({top: '', left: '', opacity: 1, width: '', height: ''});" />
</div>
<div>
    <input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet multiple▲

Cet effet permet d'appliquer un effet à une collection d'éléments.

Syntaxe
Sélectionnez
Effect.multiple('id_element', Effet[, options]);    // Voir note ci-dessous.
Effect.multiple(['id_1', 'id_2', ...], Effet[, options]);
Effect.multiple(fonction, Effet[, options]);

Avec :

  • 'id_element' : Si vous précisez un id d'élément, l'effet s'appliquera à l'ensemble des childNodes cet élément.
  • ['id_1', 'id_2'…] : Si vous précisez un tableau d'id, l'effet s'appliquera à l'ensemble des éléments correspondants.
  • fonction : Si vous précisez une fonction (typiquement $$ de Prototype), l'effet s'appliquera à l'ensemble des éléments retournés par cette fonction.
  • Effet : l'effet à appliquer aux éléments sélectionnés.

Attention : lorsque vous précisez juste un id, multiple récupèrera une collection d'éléments via la méthode DOM childNodes (méthode retournant l'ensemble des nœuds enfants d'un élément du DOM). Du fait de la différence d'interprétation du DOM par les navigateurs, cette syntaxe est particulièrement déconseillée, car elle retournera quasiment systématiquement des erreurs liées à la présence de nœuds vides dans la collection.

Une astuce pour parer à ce désagrément : dans le code source du fichier effects.js, vous pouvez repérer la fonction multiple et modifier l'appel à la méthode childNodes par childElements() de Prototype. Toutefois, avec cette astuce, vous ne récupèrerez pas les nœuds texte !

Option spécifique

Description

Défaut

speed

Le délai avant le démarrage de chaque effet.

0.1

Voir un exemple

Code de l'exemple
Sélectionnez
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet multiple</title><style type="text/css">
<!--
.conteneur{
background-color : blue;
width: 100px;
height: 20px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet multiple</h2>
<h3>Test sur l'effet Move :</h3>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div>
    <input type="button" value="Tester" onclick="new Effect.multiple($$('.conteneur'),
        Effect.Move, {x: 400, y: 0, mode: 'relative' });" />
    <input type="button" value="Retour" onclick="new Effect.multiple($$('.conteneur'),
        Effect.Move, {x: 0, mode: 'absolute', duration: 0.5, speed: 0.0  });" />
</div>
<div>
    <h3>Test sur l'effet Opacity :</h3>
    <ul id="groupe">
        <li>Premier</li>
        <li>Deuxième</li>
        <li>Troisième</li>
        <li>Quatrième</li>
    </ul>
    <input type="button" value="Tester" onclick="new Effect.multiple($('groupe').select('li'),
        Effect.Opacity, {from: 1.0, to: 0.0 });" />
    <input type="button" value="Retour" onclick="new Effect.multiple($('groupe').select('li'),
        Effect.Opacity, {from: 0.0, to: 1.0, duration: 0.5, speed: 0.0 });" />
</div>
<div>
    <input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Le paramètre queue▲

Le paramètre queue englobe en fait trois effets distincts : Queue, Queues et ScopedQueue.
Ces effets ne sont pas très utiles en soi, nous allons donc voir en détail leur comportement dans l'utilisation du paramètre queue. Celui-ci permet de gérer des piles d'effets de façon relativement complexe.

Syntaxe
Sélectionnez
queue: {position: 'position', scope: 'file', limit: nombre}

À placer dans les paramètres de l'effet.

Paramètre

Description

position

front : place l'effet au début de la file.
end : place l'effet à la fin de la file.
with-last : fera démarrer l'effet en même temps que le dernier de la file.

scope

Par défaut 'global', permet de définir différentes files d'effets.

limit

Le nombre maximal d'effets dans la file donnée. Ceux en surnombre seront ignorés.

Voir un exemple

Code de l'exemple
Sélectionnez
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Queue</title>
<style type="text/css">
<!--
#conteneur{
background-color : #0000FF;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function deplacement(){
new Effect.Move('conteneur',
 {x: 400, mode: 'relative', queue: {position: 'front', scope: 'deplace'}});
new Effect.Move('conteneur',
 {y: 400, mode: 'relative', duration: 2, queue: {position: 'end', scope: 'deplace'}});
new Effect.Move('conteneur',
 {x: -400, y: -400, mode: 'relative', queue: {position: 'end', scope: 'deplace'}});
new Effect.Morph('conteneur',
 {style: {width: '300px', backgroundColor: '#000000'}, queue: {position: 'front', scope: 'change'}});
new Effect.Parallel([
    new Effect.Morph('conteneur', {style: {width: '200px'}, sync: true}),
    new Effect.Opacity('conteneur', {from: 1, to: 0.5, sync: true})],
    {duration: 2, queue: {position: 'end', scope: 'change'}});
new Effect.Morph('conteneur',
 {style: {backgroundColor: '#0000FF'}, queue: {position: 'end', scope: 'change'}});
new Effect.Opacity('conteneur',
 {from: 0.5, to: 1.0, queue: {position: 'with-last', scope: 'change'}});
}
-->
</script>
</head>

<body>
<div class="exemple">
    <h3>Apparition d'une div.</h3>
    <div id="conteneur"></div>
    <input type="button" value="Animer" onclick="deplacement();" />
</div>
<div>
    <input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Raccourcis▲

script.aculo.us propose aussi un ensemble de raccourcis pour la plupart des effets.

Syntaxe
Sélectionnez
$('element').effet({options});

Avec :

  • $('element') : l'élément étendu (au sens de Prototype) sur lequel appliquer l'effet.
  • effet : nom de l'effet à appliquer.
  • {options} : le hash des options obligatoires et facultatives à appliquer.

Effet

Exemple

visualEffect

$('element').visualEffect(Effet, {options});

morph

$('element').morph({propriete1: valeur1, propriete2: valeur2…}, {options});

fade

$('element').fade({options});

appear

$('element').appear({options});

grow

$('element').grow({options});

shrink

$('element').shrink({options});

fold

$('element').fold({options});

blindUp

$('element').blindUp({options});

blindDown

$('element').blindDown({options});

slideUp

$('element').slideUp({options});

slideDown

$('element').slideDown({options});

pulsate

$('element').pulsate({options});

shake

$('element').shake({options});

puff

$('element').puff({options});

squish

$('element').squish({options});

switchOff

$('element').switchOff({options});

dropOut

$('element').dropOut({options});

highlight

$('element').highlight({options});

Vous remarquerez que les noms des effets ne prennent dans ce cas pas de majuscule initiale.

Étant donnée la nature de cette syntaxe dont le but est de simplifier les appels des effets, nous nous abstiendrons de donner un exemple.

précédentsommairesuivant