Exécuter plusieurs animations en même temps

Date de publication : 03 mai 2009 , Date de mise à jour : 03 mai 2009

Par Christian Wenz
 Philippe Vialatte (Traduction) (ma page DVP) (Blog)
 

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. Il permet d'exécuter plusieurs animations en parallèle.
Voir une démo
Téléchargez le code de ce tutoriel

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

Traduction
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en  Executing Several Animations at The Same Time


Étapes

Tout d'abord, incluez le contrôle ScriptManager dans la page, ce qui permet de charger la bibliothèque ASP.NET AJAX, et d'utiliser le Control Toolkit : 

<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 belle couleur de fond, et une largeur fixe pour le panneau : 

<style type="text/css">      
	.panelClass {background-color: lime; width: 300px;} 
</style>
Ensuite, ajoutez un contrôle AnimationExtender à la page, en lui donnant un ID, l'attribut TargetControlID, et le runat="server" obligatoire : 

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
Dans le noeud <Animations>, utiliser <OnLoad> permet de lancer une animation une fois que la page a été entièrement chargée. En règle générale, <OnLoad> accepte une seule animation. Le Framework Animation vous permet de joindre plusieurs animations en une seule en utilisant les éléments <Parallel>. Toutes les animations dans un élément <Parallel> sont exécutées au même moment.

Voici un ensemble de balises possible pour le contrôle AnimationExtender, qui va en même temps redimensionner le panneau, et le faire disparaître : 

<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 est affiché, puis redimensionné (sa largeur est plus quee triplée, tandis que sa hauteur est divisée par deux), et disparaît en même temps.

Le panneau est redimensionné, tout en disparaissant (y compris son contenu, grâce au moteur de rendu du navigateur)


               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