Esecuzione di animazioni tramite codice Client-Side (C#)

di Christian Wenz

Scaricare 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'esecuzione dell'animazione può anche essere attivata usando codice JavaScript lato client personalizzato.

Informazioni generali

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

Gradi

Prima di tutto, includere ScriptManager nella pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile l'uso del 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 colore di sfondo bello e impostare anche una larghezza fissa per il pannello:

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

Aggiungere quindi l'oggetto AnimationExtender alla pagina, specificando un ID, l'attributo TargetControlID e l'obbligatorio runat="server":

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

All'interno del <Animations> nodo usare <OnClick> per eseguire le animazioni quando l'utente fa clic sul pannello. Aggiungere due animazioni da eseguire in parallelo:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Ai fini della dimostrazione, questa animazione (e qualsiasi altra animazione creata con Control Toolkit) viene eseguita usando il codice JavaScript, una volta eseguita la pagina. Prima di tutto dobbiamo accedere al AnimationExtender controllo. La libreria ASP.NET AJAX fornisce la $find() funzione per questa attività:

var ae = $find("ae");

Il AnimationExtender controllo espone un'API avanzata, inclusi i metodi con nomi identici ai gestori eventi usati nel markup XML: OnClick(), OnLoad()e così via. Ad esempio, una chiamata del OnClick() metodo esegue l'animazione all'interno dell'elemento <OnClick> del AnimationExtender controllo :

ae.OnClick();

Ecco il codice JavaScript sul lato client completo che emula il clic sul pannello dopo che la pagina è stata completamente caricata si noti che il nome della pageLoad() funzione viene usato da ASP.NET AJAX dopo il caricamento della pagina e di tutte le librerie JavaScript incluse.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

L'animazione viene eseguita immediatamente, senza un clic del mouse (fare clic per visualizzare l'immagine a dimensione intera)