Animazione in risposta all'interazione dell'utente (VB)

  • Articolo

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. Le animazioni possono essere avviate automaticamente o possono essere attivate dall'interazione dell'utente, ad esempio facendo clic con il mouse.

Panoramica

Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Le animazioni possono essere avviate automaticamente o possono essere attivate dall'interazione dell'utente, ad esempio facendo clic con il mouse.

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>

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

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

All'interno del <Animations> nodo sono disponibili cinque modi per avviare l'animazione tramite l'interazione utente (l'elemento mancante viene <OnLoad> eseguito dopo il caricamento completo dell'intera pagina):

  • <OnClick> (fare clic sul pulsante del mouse sul controllo)
  • <OnHoverOut> (il mouse lascia il controllo)
  • <OnHoverOver> (il mouse passa il mouse su un controllo, arresta l'animazione <OnHoverOut> )
  • <OnMouseOut> (il mouse lascia un controllo)
  • <OnMouseOver> (il mouse passa il mouse su un controllo, non arresta l'animazione <OnMouseOut> )

In questo scenario <OnClick> viene usato. Quando l'utente fa clic sul pannello, viene ridimensionato e si scolorisce contemporaneamente.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Un clic del mouse avvia l'animazione

Un clic del mouse avvia l'animazione (fare clic per visualizzare l'immagine full-size)

IndietroAvanti