Ausführen von Animationen mit Client-Side Code (C#)

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 Animationsausführung kann auch mit benutzerdefiniertem clientseitigem JavaScript-Code ausgelöst werden.

Ü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 Animationsausführung kann auch mit benutzerdefiniertem clientseitigem JavaScript-Code ausgelöst werden.

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

Führen Sie innerhalb des <Animations> Knotens <OnClick> aus, um die Animationen zu starten, sobald der Benutzer auf das Panel klickt. Fügen Sie zwei Animationen hinzu, die parallel ausgeführt werden sollen:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Aus Gründen der Demonstration wird diese Animation (und jede andere mit dem Control Toolkit erstellte Animation) mit JavaScript-Code ausgeführt, sobald die Seite ausgeführt wird. Zunächst brauchen wir Zugriff auf die AnimationExtender Kontrolle. Die ASP.NET AJAX-Bibliothek stellt die $find() Funktion für diese Aufgabe bereit:

var ae = $find("ae");

Das AnimationExtender Steuerelement macht eine umfangreiche API verfügbar, einschließlich Methoden mit Namen, die mit den im XML-Markup verwendeten Ereignishandlern identisch sind: OnClick(), OnLoad()usw. Beispielsweise führt ein Aufruf der OnClick() Methode die Animation innerhalb des <OnClick> Elements des AnimationExtender Steuerelements aus:

ae.OnClick();

Hier ist der vollständige clientseitige JavaScript-Code, der den Klick auf das Panel emuliert, nachdem die Seite vollständig geladen wurde. Beachten Sie, dass der Funktionsname pageLoad() verwendet wird, der von ASP.NET AJAX aufgerufen wird, nachdem die Seite und alle enthaltenen JavaScript-Bibliotheken geladen wurden.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Die Animation wird sofort ohne Mausklick ausgeführt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)