Ändern von Animationen mit clientseitigem 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 mithilfe von benutzerdefiniertem clientseitigem JavaScript-Code geändert werden.

Ü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. Die Animation kann auch mithilfe von benutzerdefiniertem clientseitigem JavaScript-Code geändert werden.

Schritte

Fügen Sie zunächst die ScriptManager in die Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass Sie das Control Toolkit verwenden 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 den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für den Bereich fest:

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

Die eigentliche Animation wird durch eine HTML-Schaltfläche gestartet:

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

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

Beachten Sie, dass im AnimationExtender Steuerelement kein <Animations> 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 AnimationExtendergibt es noch keine einfache Möglichkeit, dem Extender eine Animation zuzuweisen. Der Extender macht jedoch mehrere Methoden verfügbar, um Animationen zu lesen und zu schreiben, die bei den verschiedenen Ereignissen (OnClick, OnLoadusw.) registriert sind. Im Folgenden 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 (get_OnXXXBehavior() Methoden) zu lesen.

Hier ist eine JSON-Zeichenfolge (ohne die Anführungszeichen und schön formatiert), die eine animation darstellt, die von der Schaltfläche ausgelöst wird, aber den Bereich animiert, indem sie die Größe ändert und 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-Beschreibung 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 ausgeführt, ohne Mausklick (und mit sehr wenig Markup) (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter