Condividi tramite

Aggiunta di animazione a un controllo (VB)

  • Articolo

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

Panoramica

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.

Passaggi

Il primo passaggio è il solito includere nella ScriptManager pagina in modo che venga caricata la libreria ASP.NET AJAX e che sia possibile usare 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 .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 attualmente 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 il mouse 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 il mouse su un controllo, non arresta l'animazione OnMouseOut )

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> (pulsating)
  • <Resize> (modifica delle dimensioni)
  • <Scale> (modifica proporzionale delle dimensioni)

In questo esempio il pannello si dissolverà. 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 si dissolve in uno e mezzo secondi.

Il pannello si dissolve

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

IndietroAvanti