IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Ajout d'animation à un contrôle

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. Ce tutoriel montre comment créer une telle animation.
Voir une démo
Téléchargez le code de ce tutoriel

Article lu   fois.

Les deux auteurs

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

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

Étapes

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é :

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

L'animation de notre scénario sera appliquée à un panneau de texte qui ressemble à ceci :

 
Sélectionnez
<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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<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.

Image non disponible
Le volet en train de disparaître

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.