Changement d’une animation avec du code côté client (VB)
par Christian Wenz
Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour ajouter des animations à un contrôle. L’animation peut également être modifiée à l’aide du code JavaScript côté client personnalisé.
Vue d’ensemble
Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour ajouter des animations à un contrôle. L’animation peut également être modifiée à l’aide du code JavaScript côté client personnalisé.
Étapes
Tout d’abord, incluez le ScriptManager dans la page ; puis, 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 à AnimationExtender la page, en fournissant un ID, l’attribut TargetControlID et le obligatoire runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />
Notez qu’il n’existe 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 de serveur de AnimationExtender, il n’existe pas encore de moyen simple d’affecter une animation au extendeur. Toutefois, l’extension 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 d’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 délimitants et correctement mis en forme) qui représente une animation déclenchée par le bouton, mais qui anime le panneau en le redimensionner et en le décolorant 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’extension actuelle 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) (cliquer pour afficher l’image en taille réelle)
