Exécuter plusieurs animations en même temps

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

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : 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 :

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

<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.

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

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 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.