Ausführen mehrerer Animationen nacheinander (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. Sie ermöglicht es, mehrere Animationen nacheinander auszuführen.

Ü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 es, mehrere Animationen nacheinander auszuführen.

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 der Seite das AnimationExtender hinzu und geben Sie ein ID, das TargetControlID-Attribut und das obligatorische runat="server": an.

<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 <Sequence> Elements zu einer Animation verbinden. Alle Animationen innerhalb <Sequence> werden nacheinander ausgeführt. Hier sehen Sie das mögliche Markup für das AnimationExtender Steuerelement, indem Sie zuerst das Panel breiter machen und dann die Höhe verringern:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Wenn Sie dieses Skript ausführen, wird der Bereich zuerst breiter und dann kleiner.

Zuerst wird die Breite erhöht (Zum Anzeigen des Bilds mit voller Größe klicken)

Dann wird die Höhe verringert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)