Freigeben über

Hinzufügen von Animationen zu einem Steuerelement (C#)

  • Artikel

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 Tutorial erfahren Sie, wie Sie eine solche Animation einrichten.

Ü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. In diesem Tutorial erfahren Sie, wie Sie eine solche Animation einrichten.

Schritte

Der erste Schritt besteht wie üblich darin, auf ScriptManager der Seite einzuschließen, 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 den Bereich definiert eine Hintergrundfarbe und eine Breite:

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

Als Nächstes benötigen wir .AnimationExtender Nach dem Bereitstellen eines ID und des üblichen runat="server"muss das TargetControlID -Attribut auf das -Steuerelement festgelegt werden, um in unserem Fall das Panel zu animieren:

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

Die gesamte Animation wird deklarativ mit einer XML-Syntax angewendet, die derzeit leider nicht vollständig von IntelliSense von Visual Studio unterstützt wird. Der Stammknoten befindet sich <Animations>; innerhalb dieses Knotens. Es sind mehrere Ereignisse zulässig, die bestimmen, wann die Animationen stattfinden:

  • OnClick (Mausklick)
  • OnHoverOut (wenn die Maus ein Steuerelement verlässt)
  • OnHoverOver (Wenn die Maus ü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 die Maus ü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> (einblendend)
  • <FadeOut> (Verblassen)
  • <Property> (Ändern der Eigenschaft eines Steuerelements)
  • <Pulse> (pulsierend)
  • <Resize> (Ändern der Größe)
  • <Scale> (proportionales Ändern der Größe)

In diesem Beispiel wird der Bereich ausgeblendet. Die Animation dauert 1,5 Sekunden (Duration Attribut) und zeigt 24 Frames (Animationsschritte) pro Sekunde (Fps Attribut) an. 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 in anderthalb Sekunden ausgeblendet.

Der Bereich wird ausgeblendigt.

Der Bereich wird ausgeblendigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nächste