Ändern einer Animation mithilfe von Client-Side Code (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. Die Animation kann auch mit benutzerdefiniertem clientseitigem JavaScript-Code geändert 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 Animation kann auch mit benutzerdefiniertem clientseitigem JavaScript-Code geändert 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>

Die eigentliche Animation wird von einer HTML-Schaltfläche gestartet:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

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="Button1" />

Beachten Sie, dass innerhalb des <Animations> Steuerelements kein AnimationExtender Knoten vorhanden ist. Benutzerdefinierter JavaScript-Code wird verwendet, um die Animationen bereitzustellen, die mit dem Steuerelement verwendet werden sollen.

Wie bei der Server-API von AnimationExtender, gibt es keine einfache Möglichkeit, dem Extender eine Animation noch zuzuweisen. Der Extender macht jedoch mehrere Methoden zum Lesen und Schreiben von Animationen verfügbar, die bei den verschiedenen Ereignissen registriert sind (OnClick, OnLoad und so weiter). Nachfolgend finden Sie einige Beispiele:

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

Das Format des Rückgabewerts der get_*() Funktionen und das Format des Arguments für die set_*() Funktionen ist eine JSON-Zeichenfolge, die eine Objektdarstellung des XML-Markups bereitstellt. Derzeit gibt es keine Möglichkeit, ein Objekt zu übergeben, aber es ist möglich, ein Objekt aus einer bestimmten Animation zu lesen (get_OnXXXBehavior() Methoden).

Hier ist eine JSON-Zeichenfolge (ohne die Begrenzungszeichen und schön formatiert), die eine Animation darstellt, die von der Schaltfläche ausgelöst wird, das jedoch das Panel animiert, indem es seine Größe ändert und es gleichzeitig ausblendet:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Der folgende JavaScript-Code weist diese JSON-Deskriptierung der OnClick Animation des aktuellen Extenders zu und führt sie aus:

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

Die Animation wird sofort ohne Mausklick (und mit sehr wenig Markup) ausgeführt (Klicken, um das Bild in voller Größe anzuzeigen)