Esecuzione di più animazioni contemporaneamente (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. Consente di eseguire diverse animazioni in modo parallelo.

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. Consente di eseguire diverse animazioni in modo parallelo.

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 <OnLoad> per eseguire le animazioni dopo il caricamento completo della pagina. In genere, <OnLoad> accetta solo un'animazione. Il framework di animazione consente di unire diverse animazioni in un'unica animazione usando l'elemento <Parallel> . Tutte le animazioni all'interno <Parallel> vengono eseguite contemporaneamente.

Ecco il markup possibile per il AnimationExtender controllo, dissolvendo e ridimensionando il pannello contemporaneamente:

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

E in effetti: quando si esegue questo script, il pannello viene visualizzato, quindi ridimensiona (più che triplicarne la larghezza e dimezzarne l'altezza) e si dissolve allo stesso tempo.

Il pannello si dissolve e ridimensiona (incluso il contenuto, grazie al motore di rendering del browser) (Fare clic per visualizzare l'immagine a dimensione intera)