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