Modifica di un'animazione tramite codice lato client (VB)

di Christian Wenz

Scarica il PDF

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. L'animazione può anche essere modificata usando codice JavaScript lato client personalizzato.

Panoramica

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. L'animazione può anche essere modificata usando codice JavaScript lato client personalizzato.

Passaggi

Prima di tutto, includere nella ScriptManager pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile l'uso di Control Toolkit:

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

L'animazione verrà applicata a un pannello di testo simile al seguente:

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

Nella classe CSS associata per il pannello definire un bel colore di sfondo e impostare anche una larghezza fissa per il pannello:

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

L'animazione effettiva viene avviata da un pulsante HTML:

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

Aggiungere quindi alla AnimationExtender pagina , fornendo un ID, l'attributo e l'obbligatorio TargetControlIDrunat="server":

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

Si noti che non è presente alcun <Animations> nodo all'interno del AnimationExtender controllo . Il codice JavaScript personalizzato viene usato per fornire le animazioni da usare con il controllo .

Come per l'API server di AnimationExtender, non esiste ancora un modo semplice per assegnare un'animazione all'extender. Tuttavia, l'extender espone diversi metodi per leggere e scrivere animazioni registrate con i vari eventi (OnClick, OnLoade così via). Di seguito sono riportati alcuni esempi:

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

Il formato del valore restituito delle get_*() funzioni e del formato dell'argomento per le set_*() funzioni è una stringa JSON, fornendo una rappresentazione dell'oggetto del markup XML. Attualmente non esiste alcun modo per passare un oggetto, ma è possibile leggere un oggetto da una determinata animazione (get_OnXXXBehavior() metodi).

Ecco una stringa JSON (senza le virgolette delimitate e formattate in modo corretto) che rappresenta un'animazione attivata dal pulsante, ma animando il pannello ridimensionandolo e dissolvendolo contemporaneamente:

{
 "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":[]
 }]
 }]
}

Il codice JavaScript seguente assegna questo codice JSON descritto all'animazione dell'extender OnClick corrente ed esegue l'estensione:

<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'animazione viene eseguita immediatamente, senza un clic del mouse (e con un markup molto piccolo) (Fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti