Exécuter plusieurs animations en même temps

| 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. Il permet d'exécuter plusieurs animations en parallèle.
Voir une démo
Téléchargez le code de ce tutoriel

- Titre : Exécuter plusieurs animations en même temps

- 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 : Executing Several Animations at The Same Time

Étapes

Tout d'abord, incluez le contrôle ScriptManager dans la page, ce qui permet de charger la bibliothèque ASP.NET AJAX, et d'utiliser le Control Toolkit :

<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 belle couleur de fond, et une largeur fixe pour le panneau :

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

Ensuite, ajoutez un contrôle AnimationExtender à la page, en lui donnant un ID, l'attribut TargetControlID, et le runat="server" obligatoire :

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

Dans le noeud <Animations>, utiliser <OnLoad> permet de lancer une animation une fois que la page a été entièrement chargée. En règle générale, <OnLoad> accepte une seule animation. Le Framework Animation vous permet de joindre plusieurs animations en une seule en utilisant les éléments <Parallel>. Toutes les animations dans un élément <Parallel> sont exécutées au même moment.

Voici un ensemble de balises possible pour le contrôle AnimationExtender, qui va en même temps redimensionner le panneau, et le faire disparaître :

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>

Et en effet : lorsque vous exécutez ce script, le panneau est affiché, puis redimensionné (sa largeur est plus quee triplée, tandis que sa hauteur est divisée par deux), et disparaît en même temps.

Le panneau est redimensionné, tout en disparaissant (y compris son contenu, grâce au moteur de rendu du navigateur)