Changer une animation via du code côté client

Date de publication : 08 mai 2009

Par Christian Wenz
 Pascal ROZE (Traducteur) (Page perso) (Blog)
 

Le contrôle Animation de l'ASP.NET AJAX Control Toolkit n'est pas juste un contrôle but un framework à part entière pour ajouter des animations à un contrôle. L'animation peut également être changée en utilisant un code personnalisé côté client.

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

Traduction
Vue générale
Etapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original: en Changing an Animation Using Client-Side Code


Vue générale

Le contrôle Animation de l'ASP.NET AJAX Control Toolkit n'est pas juste un contrôle but un framework à part entière pour ajouter des animations à un contrôle. L'animation peut également être changée en utilisant un code personnalisé côté client.


Etapes

Tout d'abord, vous devez ajouter un ScriptManager dans la page. Ainsi, la librairie ASP.NET AJAX est chargée et il est possible d'utiliser le Control Toolkit: 

<asp:ScriptManager ID="asm" runat="server"/>
L'animation sera appliquée à un Panel qui ressemble à: 

<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 une taille fixe pour le Panel: 

<style type="text/css">      
	.panelClass {background-color: lime; width: 300px;} 
</style>
L'animation actuelle est lancée par un bouton HTML: 

<input type="button" id="Button1" runat="server" value="Launch Animation" />
Puis, ajoutez l'AnimationExtender dans la page, définissez un ID, l'attribut TargetControlID et l'obligatoire runat="server": 

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />
Notez qu'il n'y a pas de noeud <Animations> à l'intérieur du contrôle AnimationExtender. Un code Javascript personnalisé est utilisé pour fournir les animations qui seront utilisées avec le contrôle.

Comme avec l'API serveur de l'AnimationExtender, il n'y a pas de façon simple pour assigner une animation à l'extender. Cependant, l'extender expose différentes méthodes pour lire et écrire des animations enregistrées avec divers événements (OnClick, OnLoad, ...). Voici quelques exemples:

  • get_OnClick()
  • set_OnClick()
  • get_OnLoad()
  • set_OnLoad()
  • ...
Le format de retour des fonction get_*() et le format de l'argument pour les fonctions set_*() est une chaîne de caractères JSON, fournissant une représentation objet de ce que devrait être la balise XML. Actuellement, il n'est pas possible de passer un objet, mais il est possible de lire un objet à partir d'une animation donnée (méthodes get_OnXXXBehavior()).

Ci-dessous une chaîne de caractères JSON (sans les quotes délimitantes et proprement formatée) représentant une animation déclenchée par le bouton, redimensionnant le Panel et y appliquant un fondu en même temps: 

{      
	"AnimationName":"Sequence",      
	"AnimationChildren":[      
	{           
		"AnimationName":"EnableAction",           
		"Enabled":"false",           
		"AnimationChildren":[]      
	},      
	{           
		"AnimationName":"Parallel",           
		"AnimationChildren":[
		{                
			"AnimationName":"FadeOut",                
			"Duration":"1.5",                
			"Fps":"24",                
			"AnimationTarget":"Panel1",                
			"AnimationChildren":[]           
		},           
		{                
			"AnimationName":"Resize",                
			"Width":"1000",                
			"Height":"150",                
			"Unit":"px",                
			"AnimationTarget":"Panel1",                
			"AnimationChildren":[]           
		}]      
	}] 
}
Le code Javascript suivant assigne cette description JSON à l'animation OnClick de l'extender courant et la déclenche. 

<script type="text/javascript">      
	function pageLoad()      
	{           
		var ae = $find("ae");           
		var animation = 
			'{
				"AnimationName":"Sequence",
				"AnimationChildren":[
				{
					"AnimationName":"EnableAction",
					"Enabled":"false",
					"AnimationChildren":[]
				},
				{
					"AnimationName":"Parallel",
					"AnimationChildren":[
					{
						"AnimationName":"FadeOut",
						"Duration":"1.5",
						"Fps":"24",
						"AnimationTarget":"Panel1",
						"AnimationChildren":[]
					},
					{
						"AnimationName":"Resize",
						"Width":"1000",
						"Height":"150",
						"Unit":"px",
						"AnimationTarget":"Panel1",
						"AnimationChildren":[]
					}]
				}]
			}';           
		ae.set_OnClick(animation);           
		ae.OnClick();      
	} 
</script>
L'animation se déclenche immédiatement, sans un clic de souris (et avec très peu de code)


               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