Ajout d'animation à un contrôle

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

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.