Animieren als Reaktion auf eine Benutzerinteraktion (VB)

von Christian Wenz

PDF herunterladen

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Die Animationen können automatisch gestartet oder durch Benutzerinteraktion ausgelöst werden, z.B. durch Klicken mit der Maus.

Überblick

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Die Animationen können automatisch gestartet oder durch Benutzerinteraktion ausgelöst werden, z.B. durch Klicken mit der Maus.

Schritte

Fügen Sie zunächst die ScriptManager in die Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass Sie das Control Toolkit verwenden können:

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

Die Animation wird auf einen Textbereich angewendet, der wie folgt aussieht:

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

Definieren Sie in der zugeordneten CSS-Klasse für den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für den Bereich fest:

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

Fügen Sie dann der AnimationExtender Seite hinzu, und geben Sie ein ID, das TargetControlID Attribut und den obligatorischen runat="server"an:

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

Innerhalb des <Animations> Knotens gibt es fünf Möglichkeiten, die Animation über die Benutzerinteraktion zu starten (das fehlende Element <OnLoad> wird ausgeführt, sobald die gesamte Seite vollständig geladen wurde):

• <OnClick> (Mausklick auf das Steuerelement)
• <OnHoverOut> (Maus verlässt das Steuerelement)
• <OnHoverOver> (Die Maus bewegt sich über ein Steuerelement, und beendet die <OnHoverOut> Animation)
• <OnMouseOut> (Maus verlässt ein Steuerelement)
• <OnMouseOver> (Die Maus bewegt sich über ein Steuerelement, ohne die <OnMouseOut> Animation zu beenden)

In diesem Szenario <OnClick> wird verwendet. Wenn der Benutzer auf den Bereich klickt, wird die Größe geändert und wird gleichzeitig ausgeblendet.

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

Mit einem Mausklick wird die Animation gestartet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter