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. Es ermöglicht die parallele Ausführung mehrerer Animationen.

Ü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. Es ermöglicht die parallele Ausführung mehrerer Animationen.

Schritte

Schließen Sie zunächst die ScriptManager auf der Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass das Control Toolkit verwendet werden kann:

<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 den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für das Panel fest:

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

Fügen Sie dann der AnimationExtender Seite hinzu, und geben Sie ein ID, das TargetControlID -Attribut und den obligatorischen runat="server"an:

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

Verwenden Sie <OnLoad> innerhalb des <Animations> Knotens, um die Animationen auszuführen, nachdem 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 in <Parallel> werden gleichzeitig ausgeführt.

Hier sehen Sie das mögliche Markup für das AnimationExtender Steuerelement, wobei das Panel gleichzeitig ausgeblendt und die Größe des Bereichs geändert wird:

<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 der Bereich angezeigt, dann wird die Größe geändert (mehr als die Breite und die Halbierung seiner Höhe) und wird gleichzeitig ausgeblendet.

Der Bereich wird verkleinert und ändert die Größe (einschließlich seines Inhalts, dank der Rendering-Engine des Browsers) (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter