Modifier dynamiquement des styles css

Toute animation nécessite une modification dynamique des attributs graphiques des élements pris dans l'animation. Ces attributs graphiques étant définis en HTML/CSS, commençons par introduire deux approches de la modification dynamique des propriétés css

Une première approche couramment rencontrée pour modifier dynamiquement l'apparence d'éléments HTML consiste à construire et à utiliser un ensemble de classes de styles différents permettant de représenter les différents aspects graphiques que doivent prendre les éléments HTML pris dans l'animation. Une fois cet ensemble de classes créés, il ne reste plus qu'à modifier dynamiquement la classe de style associée aux éléments au cours du temps. Cette approche convient à des animations très simples.

Exemple: modification dynamique de la classe de style CSS associée à un élément HTML

Une deuxième approche consiste à modifier dynamiquement n'importe quelle propriété CSS dynamiquement. En jQuery, la méthode .css() permet de faire ces modifications dynamiquement. Cette méthode peut s'utiliser avec un paramètre lorsqu'il s'agit de lire la valeur d'un style donné, le paramètre est alors le nom de la propriété CSS dont on veut connaitre la valeur.

La méthode .css() peut également s'utiliser pour modifier une valeur d'une propriété CSS. Dans ce cas, la méthode .css() prend deux paramètres faits de la propriété à modifier et de la valeur à lui donner. Enfin, la méthode css peut également prendre en paramètres une liste alternant propriétés, valeurs pour modifier plusieurs valeurs de plusieurs propriétés.

Exemple: modification dynamique des attributs css d'éléments HTML , par exemple la taille, au-delà de la taille de l'élément {height:'+20px'}

Visibilité des éléments HTML

Un contrôle booléen de la visibilité consiste à faire apparaître/disparaître des éléments. C'est ce que permet la modification des propriétés display ou visibility .

Avec display , la modification de la visibilité modifie l'espace alloué à cet élément et à tous les descendants de cet élément dans le DOM. Lorsque l'élément est invisible il ne prend aucun espace.

Avec la propriété visibility , en revanche l'espace alloué à l'élément demeure même si l'élément est invisible. Cela peut être utile pour préserver invariante une mise en page. Cependant, ces cas sont plutôt rares et la modification de la propriété display est plus souvent utile.

La propriété CSS display peut prendre des valeurs parmis presque 20 valeurs possibles, cependant les valeurs les plus courantes sont:

`inline`	valeur par défaut, valable pour tout élément html. Permet de générer une boite englobante pour l'élément. Cette boite englobante est de type `inline` , ce qui signifie que sa largeur est la largeur utile à l'affichage de l'élément avec marges et bordures
`block`	genère une boite englobante de type `block` pour l'élément, i.e, occupe toute la largeur disponible pour sa hauteur utile.
`none`	ne genère aucune boite englobante pour l'élément qui devient, de ce fait, invisible. NB: Tous les descendants dans le DOM d'un élément avec `display:none` deviennent également invisibles.

Une première manière d'afficher/cacher des éléments HTML consiste donc à modifier cette propriété CSS.

Une autre approche consiste à utiliser des fonctions jQuery hide et show qui font ce travail.

Enfin, une dernière approche est d'utiliser la méthode toggle qui joue, en quelque sorte, les rôles des deux précédentes selon que l'élément auquel elle s'applique est déjà visible ou invisible.

Apparitions/disparitions progressives prédéfinies

Les effets de fondu sont généralement obtenus par mélange de couleurs progressif. En particulier, par mélange de la couleur du fond avec celle de l'élément cible du fondu qui permet de contrôler de l'opacité ou la transparence de l'élément pour l'afficher progressivement.

Deux méthodess jQuery peuvent être utilisées pour cela: fadeIn et fadeOut qui permettent respectivement d'augmenter et de diminuer l'opacité de l'élément auquel elles sont appliquées.

NB: Comme pour et une méthode plus générique fadeToggle existe pour raccourcir l'écriture conditionnelle de fadeIn/fadeOut.

Une autre manière d'afficher progressivement un élément consister à modifier sa taille en passant progressivement de la taille 0 par défaut à la taille finale de l'élément.

Les méthodes jQuery slideUp et slideDown permettent de modifier progressivement la hauteur de l'élément en commençant l'affichage par le bas dans le cas de slideUp et par le haut dans le cas de slideDown

NB: Comme pour et une méthode plus générique slideToggle existe pour raccourcir l'écriture conditionnelle de slideUp/slideDown.

Vitesse, durée, timers

Le contrôle de la vitesse d'apparition des éléments donne le rythme des animations. Le premier niveau de contrôle s'effectue en passant des durées en ms (milli-secondes = 10^-3 secondes) en paramètres des méthodes vues précédemment show, hide, fadeIn, fadeOut, slideIn, slideOut . Des mots clés slow , normal et fast sont également utilisables en jQuery pour passer des vitesses "standard": slow, normal, fast, correspondent respectivement à 600, 400, et 200 ms.

Parfois, certains traitements peuvent également être contrôlés par des timers pour être appelés de manière asynchrone. Dans la mesure où ces traitements peuvent avoir des effets graphiques, l'utilisation des timers peut être une manière de programmer des animations en Javascript.

Timers

Le résumé le plus court de l'utilisation des timers en Javascript est donné par le tableau suivant:

`var id = setTimeout(foo, delay);`	démarre un timer qui lancera la fonction `foo` après le temps `delay.` `setTimeout` retourne un identifiant unique qui permet de manipuler le timer, par exemple pour l'arrêter.
`var id = setInterval(foo, delay);`	démarre un timer qui répète l'appel à la fonction `foo` après le temps `delay` jusqu'à être arrêté.
`clearInterval(id);, clearTimeout(id);`	arrête le timer démarré respectivement par `setInterval`et `setTimeOut` et identifié par l'`id` passé en paramètre.

Le paramètre delay est donné en millisecondes (rappel: ms = 10^-3s).

Comme un programme Javascript est, a priori, monothread, les différents traitements asynchones (gestion des évènements, gestion des animations, timers) peuvent compromettre le respect des temps fixés par les timers comme l'explique l'article de John Resig.

La programmation asynchrone introduit une augmentation de complexité significative en même temps qu'elle ouvre de nouvelles possibilités. D'où l'importance de l'orchestration, ou composition des traitements et des effets dans le temps. Quelques méthodes et mécanismes jQuery lui sont particulièrement dédiés.

Orchestration en jQuery

“Staging, anticipation and timing are all integral to directing the eye.” J. Lasseter

Le chaînage

Lorsqu'une animation concerne le même élément ou ensemble d'éléments et qu'elle est faite d'une suite de petites animations qui doivent se dérouler séquentiellement, le chaînage des animations permet de réaliser l'animation souhaitée.

Exemple: $('#content').slideIn('slow').delay(2000).slideOut('slow')

La méthode `.animate`

La réalisation d'animations plus complexes et personnalisées peut se faire en utilisant la méthode animate .

Cette méthode prend comme arguments obligatoires:

une liste d'associations propriété:valeur

Cette méthode peut prendre en plus des arguments facultatifs:

une vitesse
une fonction qui définit le rythme de l'animation en terme d'accélération et de décéleration. Cette opération parfois appelée easing en Anglais est traitée très largement comme, par exemple ici ). Cependant, certaines stratégies simples comme "slow-in/slow-out" sont souvent suffisantes.
une fonction de rappel ou callback, appelée en fin d'animation

La méthode `.queue`

La méthode queue (api, tuto) de jQuery permet de gérer explicitement les files d'attente qui représentent des suites de comportements à effectuer par des éléments. Chaque élément du DOM a, par défaut, une file d'attente nommée fx . Cette file implicite sert, par exemple, à stocker les opérations chainées, ou les opérations enregistrées par l'appel à la méthode .animate .

Les opérations facilitées sur ces files d'attentes sont les suivantes:

`.queue()`	sans argument, cette méthode retourne la file d'attente associée à un élément. Avec une fonction comme argument, permet d'ajouter la fonction à la file d'attente de l'élément. Avec une file d'attente comme argument remplace le contenu de la file par celui de la file passée en paramètre.
`.dequeue()`	supprime une ou plusieurs fonction de la file.
`.pop()`	retourne la dernière fonction de la file (première entrée) et l'enlève de la file
`.push()`
`.shift()`
`.unshift()`	insère la fonction passée en paramètre au début de la file
`.slice(i,j)`	retourne la file tronquée du i^ème élément au j^ième