Gleichzeitiges Ausführen mehrerer Animationen (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. Sie ermöglicht das Ausführen mehrerer Animationen parallel.

Ü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. Sie ermöglicht das Ausführen mehrerer Animationen parallel.

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 die Animationen innerhalb des <Animations> Knotens aus, sobald die Seite vollständig geladen wurde. <OnLoad> Im Allgemeinen akzeptiert nur eine Animation. Mit dem Animationsframework können Sie mehrere Animationen mithilfe des <Parallel> Elements zu einer Animation verbinden. Alle Animationen innerhalb <Parallel> werden gleichzeitig ausgeführt.

Hier ist das mögliche Markup für das AnimationExtender Steuerelement, das Ausblenden und Ändern der Größe des Panels gleichzeitig:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Und tatsächlich: Wenn Sie dieses Skript ausführen, wird das Panel angezeigt, dann wird seine Größe geändert, indem die Breite mehr als verdreifacht und die Höhe halbiert wird, und es wird gleichzeitig ausgeblendet.

Das Panel wird ausgeblendet und die Größe geändert (einschließlich des Inhalts, dank des Renderingmoduls des Browsers) (Klicken Sie, um das Bild in voller Größe anzuzeigen)