Ajout d'animation à un contrôle

| Christian Wenz | Philippe Vialatte (Traduction) |

Le contrôle Animation d'ASP.NET AJAX Control Toolkit n'est pas seulement un contrôle, mais un Framework complet pour ajouter des animations à un contrôle. Ce tutoriel montre comment créer une telle animation.
Voir une démo
Téléchargez le code de ce tutoriel

- Titre : Ajout d'animation à un contrôle

- Auteurs : Christian Wenz, Philippe Vialatte (Traduction)

- Parution : 3 mai 2009

- Mise à jour : 3 mai 2009

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Étapes

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Adding Animation to a Control

Étapes

La première étape est, comme d'habitude, d'inclure le ScriptManager dans la page, de sorte que la bibliothèque ASP.NET AJAX soit chargée, et que le Control Toolkit puisse être utilisé :

<asp:ScriptManager ID="asm" runat="server" />

L'animation de notre scénario sera appliquée à un panneau de texte qui ressemble à ceci :

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
</asp:Panel>

La classe CSS associée au panneau définit une couleur d'arrière-plan et une largeur :

<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>

Ensuite, nous avons besoin d'un contrôle AnimationExtender. Après avoir fourni un ID et l'habituel runat="server", l'attribut TargetControlID doit être configuré pour le contrôle à animer, dans notre cas, le panneau :

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

L'ensemble de l'animation est déclarative, et utilise une syntaxe XML, qui n'est actuellement pas malheureusement pas entièrement prise en charge par l'IntelliSense de Visual Studio. Le noeud racine est <Animations>; dans ce noeud, plusieurs événements sont autorisés, permettant de déterminer quand la ou les animations doivent avoir lieu:

- OnClick (clic de souris)

- OnHoverOut (lorsque la souris quitte un contrôle)

- OnHoverOver (lorsque la souris passe sur un contrôle, arrêtant l'animation OnHoverOut)

- OnLoad (lorsque la page est chargée)

- OnMouseOut (quand la souris quitte un contrôle)

- OnMouseOver (lorsque la souris passe sur un contrôle, sans arrêter l'animation OnMouseOut)

Le Framework est livré avec un ensemble d'animations, chacune représentée par son propre élément XML. En voici une sélection :

- <Color> (Changement de couleur)

- <FadeIn> (Fais apparaître progressivement le contrôle)

- <FadeOut> (Fais disparaître progressivement le contrôle)

- <Property> (Changement de la propriété d'un contrôle)

- <Pulse> (Pulsation)

- <Resize> (Changement de la taille)

- <Scale> (Changement proportionnel de la taille)

Dans cet exemple, le panneau doit disparaître. L'animation doit durer une seconde et demie (attribut Duration) et afficher vingt-quatre frames (étapes de l'animation) par seconde (attribut Fps). Voici l'ensemble des balises pour le contrôle AnimationExtender :

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<FadeOut Duration="1.5" Fps="24" />
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>

Lorsque vous exécutez ce script, le panneau est affiché, puis disparaît en une seconde et demie.

Le volet en train de disparaître