Changement d’une animation avec du code côté client (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. L’animation peut également être modifiée à l’aide d’un code JavaScript côté client personnalisé.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. L’animation peut également être modifiée à l’aide d’un code JavaScript côté client personnalisé.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; ensuite, le ASP.NET bibliothèque AJAX est chargé, ce qui permet d’utiliser control Toolkit :

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

L’animation 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>

Dans la classe CSS associée pour le panneau, définissez une couleur d’arrière-plan agréable et définissez également une largeur fixe pour le panneau :

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

L’animation réelle est lancée par un bouton HTML :

<input type="button" id="Button1" runat="server" value="Launch Animation" />

Ensuite, ajoutez le AnimationExtender à la page, en fournissant un ID, l’attribut TargetControlID et l’obligatoire runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />

Notez qu’il n’y a aucun <Animations> nœud dans le AnimationExtender contrôle. Le code JavaScript personnalisé est utilisé pour fournir les animations à utiliser avec le contrôle.

Comme avec l’API serveur de AnimationExtender, il n’existe pas encore de moyen simple d’affecter une animation à l’extendeur. Toutefois, l’extendeur expose plusieurs méthodes pour lire et écrire des animations inscrites avec les différents événements (OnClick, OnLoad, etc.). Voici quelques exemples :

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

Le format de la valeur de retour des get_*() fonctions et le format de l’argument pour les set_*() fonctions est une chaîne JSON, qui fournit une représentation objet de ce que serait le balisage XML. Actuellement, il n’existe aucun moyen de passer un objet dans, mais il est possible de lire un objet à partir d’une animation donnée (get_OnXXXBehavior() méthodes).

Voici une chaîne JSON (sans guillemets de délimitation et correctement mis en forme) qui représente une animation déclenchée par le bouton, mais qui anime le panneau en le redimensionnant et en l’effançant 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 affecte ce descripteur JSON à l’animation OnClick de l’extendeur actuel et l’exécute :

<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 s’exécute immédiatement, sans clic de souris (et avec très peu de balisage) (cliquez pour afficher l’image en taille réelle)

PrécédentSuivant