Een animatie activeren in een andere controle (VB)

door Christian Wenz

PDF downloaden

Het animatiebesturingselement in de ASP.NET AJAX Control Toolkit is niet slechts een besturingselement, maar een volledig framework om animaties toe te voegen aan een control. Over het algemeen wordt het starten van een animatie geactiveerd door gebruikersinteractie met hetzelfde besturingselement. Het is echter ook mogelijk om met één besturingselement te communiceren en vervolgens een ander besturingselement te animatien.

Overzicht

Het animatiebesturingselement in de ASP.NET AJAX Control Toolkit is niet slechts een besturingselement, maar een volledig framework om animaties toe te voegen aan een control. Over het algemeen wordt het starten van een animatie geactiveerd door gebruikersinteractie met hetzelfde besturingselement. Het is echter ook mogelijk om met één besturingselement te communiceren en vervolgens een ander besturingselement te animatien.

Steps

Plaats eerst de ScriptManager in de pagina; vervolgens wordt de ASP.NET AJAX-bibliotheek geladen, waarmee de Toolkit voor besturingselementen gebruikt kan worden.

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

De animatie wordt toegepast op een tekstpaneel dat er als volgt uitziet:

<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>

Definieer in de bijbehorende CSS-klasse voor het deelvenster een mooie achtergrondkleur en stel ook een vaste breedte in voor het paneel:

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

Als u de animatie van het deelvenster wilt starten, wordt er een HTML-knop gebruikt. Houd er rekening mee dat <input type="button" /> de voorkeur heeft boven <asp:Button />, omdat we geen postback willen wanneer de gebruiker op die knop klikt.

<input type="button" id="Button1" runat="server" Value="Launch Animation" />

Voeg vervolgens AnimationExtender toe aan de pagina, met een ID, het TargetControlID-attribuut en de verplichte runat="server". Het is belangrijk om TargetControlID in te stellen op de ID van de knop (het element dat de animatie activeert), niet op de ID van het deelvenster (het element dat wordt geanimeerd)

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

Plaats animaties in het <Animations> knooppunt zoals gebruikelijk. Als u wilt dat ze het deelvenster wijzigen, niet de knop, stelt u het AnimationTarget kenmerk in voor elk animatie-element binnen AnimationExtender. De waarde voor AnimationTarget is natuurlijk de ID van het paneel. Op die manier gebeuren de animaties samen met het deelvenster, niet met de knop die ze activeert. Dit is de AnimationExtender markering voor dit scenario:

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

Let op de speciale volgorde waarin de afzonderlijke animaties worden weergegeven. Allereerst wordt de knop gedeactiveerd zodra de animatie wordt uitgevoerd. Omdat het element geen AnimationTarget kenmerk <EnableAction> bevat, wordt deze animatie toegepast op het oorspronkelijke besturingselement: de knop. De volgende twee animatiestappen worden parallel uitgevoerd <Parallel> element. Beide hebben hun AnimationTarget kenmerken ingesteld op "Panel1", waardoor het paneel wordt geanimeerd, niet de knop.

Met een muisklik op de knop wordt de deelvensteranimatie gestart (klik om de afbeelding op volledige grootte weer te geven)