Aggiunta di animazioni a un controllo (VB)

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. Questa esercitazione illustra come configurare un'animazione di questo tipo.

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. Questa esercitazione illustra come configurare un'animazione di questo tipo.

Gradi

Il primo passaggio, come di consueto, consiste nell'includere ScriptManager nella pagina in modo che venga caricata la libreria ASP.NET AJAX e che sia possibile usare il Control Toolkit:

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

L'animazione in questo scenario 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>

La classe CSS associata per il pannello definisce un colore di sfondo e una larghezza:

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

Successivamente, è necessario il AnimationExtender. Dopo aver fornito un ID e il solito runat="server", l'attributo TargetControlID deve essere impostato sul controllo per animare nel nostro caso, il pannello:

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

L'intera animazione viene applicata in modo dichiarativo, usando una sintassi XML, purtroppo non completamente supportata da IntelliSense di Visual Studio. Il nodo radice si trova <Animations>; all'interno di questo nodo, sono consentiti diversi eventi che determinano quando vengono eseguite le animazioni:

• OnClick (clic del mouse)
• OnHoverOut (quando il mouse lascia un controllo)
• OnHoverOver (quando il mouse passa su un controllo, arrestando l'animazione OnHoverOut)
• OnLoad (quando la pagina è stata caricata)
• OnMouseOut (quando il mouse lascia un controllo)
• OnMouseOver (quando il mouse passa su un controllo, l'animazione OnMouseOut non si arresta)

Il framework include un set di animazioni, ognuna rappresentata dal proprio elemento XML. Ecco una selezione:

• <Color> (modifica di un colore)
• <FadeIn> (dissolvenza in)
• <FadeOut> (dissolvenza)
• <Property> (modifica della proprietà di un controllo)
• <Pulse> (pulsante)
• <Resize> (modifica delle dimensioni)
• <Scale> (cambiando proporzionalmente la dimensione)

In questo esempio, il pannello svanirà. L'animazione richiederà 1,5 secondi (Duration attributo), visualizzando 24 fotogrammi (passaggi di animazione) al secondo (Fps attributo). Ecco il markup completo per il AnimationExtender controllo:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Quando si esegue questo script, il pannello viene visualizzato e sfumato in un secondo e mezzo.

Il pannello si dissolve (fare clic per visualizzare l'immagine a dimensione intera)