Animer en réponse à une interaction utilisateur

Date de publication : mai 2009

Par Christian Wenz
 Louis-Guillaume MORAND (Traduction) (Page perso de Louis-Guillaume MORAND)
 

Le contrôle Animation de l'AJAX Control Toolkit ASP.Net n'est pas seulement un contrôle, mais un Framework entier pour ajouter des animations à un contrôle. L'animation peut commencer automatiquement ou être déclenchée par une interaction utilisateur, par exemple en cliquant avec la souris.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Aperçu
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en Animating in Response To User Interaction


Aperçu

Le contrôle Animation de l'AJAX Control Toolkit ASP.Net n'est pas seulement un contrôle, mais un Framework entier pour ajouter des animations à un contrôle. L'animation peut commencer automatiquement ou être déclenchée par une interaction utilisateur, par exemple en cliquant avec la souris.


Étapes

Tout d'abord, ajouter le ScriptManager à la page ; alors seulement, la bibliothèque ASP.Net AJAX est chargée, rendant possible l'utilisation du Control Toolkit : 
<asp:ScriptManager ID="asm" runat="server" />
L'animation se voit appliqué à un panel 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 au panel, définissez une belle couleur de fond et définissez une largeur fixe pour le panneau : 
<style type="text/css">      
.panelClass 
{
	background-color: lime; 
	width: 300px;
} 
</style>
Alors, ajoutez un AnimationExtender sur la page, en fournissant un ID, l'attribut TargetControlID et l'attribut obligatoire runat="server": 
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
À l'intérieur du noeud <Animations>, il y a cinq façons de démarrer l'animation via une interaction utilisateur (l'élément manquant est <OnLoad> qui est exécutée une fois que la page est entièrement chargée) :

  • <OnClick> (la souris clique sur le contrôle)
  • <OnHoverOut> (la souris quitte le contrôle)
  • <OnHoverOver> (la souris passe sur un contrôle, stoppe l'animation <OnHoverOut>)
  • <OnMouseOut> (la souris quitte un contrôle)
  • <OnMouseOver> (la souris passe sur un contrôle, n'arrête pas l'animation <OnMouseOut>)
Dans ce scénario, <OnClick> est utilisé. Lorsque l'utilisateur clique sur le panel, il est redimensionné et disparait 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 souris déclenche l'animation



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

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. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web