Partager via

Animation en réponse à une interaction utilisateur (VB)

  • Article

par Christian Wenz

Télécharger le PDF

Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour ajouter des animations à un contrôle. Les animations peuvent démarrer automatiquement ou être déclenchées par l’interaction de l’utilisateur, par exemple en cliquant avec la souris.

Vue d’ensemble

Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour ajouter des animations à un contrôle. Les animations peuvent démarrer automatiquement ou être déclenchées par l’interaction de l’utilisateur, par exemple en cliquant avec la souris.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; puis, 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 à AnimationExtender la page, en fournissant un ID, l’attribut TargetControlID et le obligatoire runat="server":

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

Dans le <Animations> nœud, il existe cinq façons de démarrer l’animation via l’interaction utilisateur (l’élément manquant est <OnLoad> exécuté une fois que l’ensemble de la page a été entièrement chargé) :

  • <OnClick> (cliquez sur le contrôle)
  • <OnHoverOut> (la souris quitte le contrôle)
  • <OnHoverOver> (la souris pointe sur un contrôle, arrêtant l’animation <OnHoverOut> )
  • <OnMouseOut> (la souris laisse un contrôle)
  • <OnMouseOver> (la souris pointe sur un contrôle, sans arrêter l’animation <OnMouseOut> )

Dans ce scénario, <OnClick> est utilisé. Lorsque l’utilisateur clique sur le panneau, celui-ci est redimensionné et s’efface en même temps.

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

Un clic de souris démarre l’animation

Un clic de souris démarre l’animation (Cliquer pour afficher l’image en taille réelle)

PrécédentSuivant