Partager via

Exécution de plusieurs animations en même temps (VB)

  • Article

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il permet d’exécuter plusieurs animations de manière parallèle.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il permet d’exécuter plusieurs animations de manière parallèle.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; ensuite, le ASP.NET bibliothèque AJAX est chargé, ce qui permet d’utiliser control Toolkit :

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

L’animation 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>

Dans la classe CSS associée pour le panneau, définissez une couleur d’arrière-plan agréable et définissez également une largeur fixe pour le panneau :

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

Ensuite, ajoutez le AnimationExtender à la page, en fournissant un ID, l’attribut TargetControlID et l’obligatoire runat="server":

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

Dans le <Animations> nœud, utilisez <OnLoad> pour exécuter les animations une fois la page entièrement chargée. En règle générale, <OnLoad> n’accepte qu’une seule animation. L’infrastructure Animation vous permet de joindre plusieurs animations en une seule à l’aide de l’élément <Parallel> . Toutes les animations dans <Parallel> sont exécutées en même temps.

Voici le balisage possible pour le AnimationExtender contrôle, qui disparaît et redimensionne le panneau en même temps :

<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 s’affiche, puis se redimensionne (plus que tripler sa largeur et réduire de moitié sa hauteur) et s’efface en même temps.

Le panneau est en train de disparaître et de redimensionner (y compris son contenu, grâce au moteur de rendu du navigateur)

Le panneau est en train de disparaître et de redimensionner (y compris son contenu, grâce au moteur de rendu du navigateur) (cliquer pour afficher l’image en taille réelle)

PrécédentSuivant