Modifica di un'animazione tramite codice lato client (C#)

di Christian Wenz

Scarica il PDF

Il controllo Animazione 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 Animazione 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 usare 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 l'oggetto alla pagina, specificando un attributo e l'attributo AnimationExtenderTargetControlID obbligatorio runat="server":ID

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

Si noti che non esiste 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 un modo semplice per assegnare un'animazione all'estensione ancora. 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 il formato dell'argomento per le set_*() funzioni è una stringa JSON, fornendo una rappresentazione dell'oggetto del markup XML. Attualmente, non è possibile passare un oggetto in, ma è possibile leggere un oggetto da una determinata animazione (get_OnXXXBehavior() metodi).

Ecco una stringa JSON (senza virgolette delimitanti e formattate in modo corretto) che rappresenta un'animazione attivata dal pulsante, ma animando il pannello ridimensionandolo e sfocandolo 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 descrittore JSON all'animazione dell'estensione OnClick corrente ed esegue il codice:

<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 full-size)

IndietroAvanti