Animieren in Reaktion auf 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 Benutzerinteraktionen ausgelöst werden, z. B. durch Klicken mit der Maus.

Übersicht

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 Benutzerinteraktionen ausgelöst werden, z. B. durch Klicken mit der Maus.

Schritte

Fügen Sie zunächst das ScriptManager in die Seite ein. Anschließend wird die ASP.NET AJAX-Bibliothek geladen, um das Steuerelement-Toolkit nutzen zu 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 das Panel eine schöne Hintergrundfarbe und legen Sie außerdem eine feste Breite für das Panel fest:

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

Fügen Sie dann AnimationExtender zur Seite hinzu, wobei ein ID, das TargetControlID-Attribut und das obligatorische runat="server" anzugeben sind.

<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 wird <OnLoad> ausgeführt, sobald die gesamte Seite vollständig geladen wurde):

• <OnClick> (Mausklick auf das Steuerelement)
• <OnHoverOut> (Maus verlässt das Steuerelement)
• <OnHoverOver> (Wenn der Mauszeiger über ein Steuerelement fährt, wird die <OnHoverOut>-Animation gestoppt)
• <OnMouseOut> (Maus verlässt ein Steuerelement)
• <OnMouseOver> (wenn der Mauszeiger über ein Steuerelement schwebt, wird die <OnMouseOut> Animation nicht gestoppt)

In diesem Szenario <OnClick> wird verwendet. Wenn der Benutzer auf das Bedienfeld klickt, wird es verkleinert und 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 (Zum Anzeigen des Bilds mit voller Größe klicken)