Hinzufügen von Animation zu einem Steuerelement (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. In diesem Lernprogramm wird gezeigt, wie Sie eine solche Animation einrichten.

Ü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. In diesem Lernprogramm wird gezeigt, wie Sie eine solche Animation einrichten.

Schritte

Der erste Schritt besteht wie üblich darin, die ScriptManager in die Seite einzufügen, damit die ASP.NET AJAX-Bibliothek geladen wird und das Control Toolkit verwendet werden kann.

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

Die Animation in diesem Szenario 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>

Die zugeordnete CSS-Klasse für das Panel definiert eine Hintergrundfarbe und eine Breite:

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

Als Nächstes brauchen wir die AnimationExtender. Nach der Bereitstellung eines ID und des üblichen runat="server" muss das TargetControlID-Attribut auf das Steuerelement festgelegt werden, um das Panel, in unserem Fall, zu animieren.

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

Die gesamte Animation wird deklarativ mit einer XML-Syntax angewendet, leider wird die IntelliSense von Visual Studio derzeit nicht vollständig unterstützt. Der Stammknoten ist <Animations>;, und in diesem Knoten sind mehrere Ereignisse zulässig, die bestimmen, wann die Animation(en) stattfinden:

• OnClick (Mausklick)
• OnHoverOut (wenn die Maus ein Steuerelement verlässt)
• OnHoverOver (Wenn der Mauszeiger über ein Steuerelement bewegt wird, wird die OnHoverOut Animation beendet)
• OnLoad (wenn die Seite geladen wurde)
• OnMouseOut (wenn die Maus ein Steuerelement verlässt)
• OnMouseOver (Wenn der Mauszeiger über ein Steuerelement bewegt wird, wird die OnMouseOut Animation nicht beendet)

Das Framework enthält eine Reihe von Animationen, die jeweils durch ein eigenes XML-Element dargestellt werden. Hier ist eine Auswahl:

• <Color> (Ändern einer Farbe)
• <FadeIn> (Einblenden)
• <FadeOut> (ausblendend)
• <Property> (Ändern der Eigenschaft eines Steuerelements)
• <Pulse> (pulsierend)
• <Resize> (Ändern der Größe)
• <Scale> (proportionales Ändern der Größe)

In diesem Beispiel soll das Panel verblassen. Die Animation soll 1,5 Sekunden dauern (Duration Attribut) und 24 Bilder (Animationsschritte) pro Sekunde zeigen (Fps Attribut). Hier sehen Sie das vollständige Markup für das AnimationExtender Steuerelement:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Wenn Sie dieses Skript ausführen, wird der Bereich angezeigt und blendet sich nach eineinhalb Sekunden aus.

Das Panel wird ausgeblendet (Zum Anzeigen des Bilds mit voller Größe klicken)