Wykonywanie animacji przy użyciu kodu Client-Side (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrola Animacji w zestawie narzędzi ASP.NET AJAX Control Toolkit to nie tylko kontrolka, ale cała platforma do wzbogacania kontrolek o animacje. Wykonywanie animacji może być również wyzwalane przy użyciu niestandardowego kodu JavaScript po stronie klienta.

Przegląd

Kontrola Animacji w zestawie narzędzi ASP.NET AJAX Control Toolkit to nie tylko kontrolka, ale cała platforma do wzbogacania kontrolek o animacje. Wykonywanie animacji może być również wyzwalane przy użyciu niestandardowego kodu JavaScript po stronie klienta.

Kroki

Najpierw dołącz element ScriptManager na stronie, a następnie biblioteka ASP.NET AJAX zostaje załadowana, umożliwiając korzystanie z zestawu narzędzi sterujących.

<asp:ScriptManager ID="asm" runat="server" />

Animacja zostanie zastosowana do panelu tekstu, który wygląda następująco:

<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>

W skojarzonej klasie CSS dla panelu zdefiniuj ładny kolor tła, a także ustaw stałą szerokość panelu:

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

Następnie dodaj AnimationExtender do strony, podając ID, atrybut TargetControlID oraz obowiązkowy runat="server":

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

W węźle <Animations> użyj <OnClick>, aby uruchomić animacje po kliknięciu użytkownika na panel. Dodaj dwie animacje do wykonania równolegle:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Na potrzeby pokazu ta animacja (i każda inna animacja utworzona przy użyciu zestawu narzędzi Control Toolkit) jest wykonywana przy użyciu kodu JavaScript po uruchomieniu strony. Przede wszystkim potrzebujemy dostępu do AnimationExtender elementu sterującego. Biblioteka ASP.NET AJAX udostępnia $find() funkcję dla tego zadania:

var ae = $find("ae");

Kontrolka AnimationExtender uwidacznia zaawansowany interfejs API, w tym metody o nazwach identycznych z procedurami obsługi zdarzeń używanymi w znacznikach XML: OnClick(), OnLoad()i tak dalej. Na przykład wywołanie OnClick() metody wykonuje animację w elemencie <OnClick> kontrolki AnimationExtender :

ae.OnClick();

Oto kompletny kod JavaScript działający po stronie klienta, który emuluje kliknięcie na panelu po pełnym załadowaniu strony internetowej. Zwróć uwagę, że nazwa funkcji pageLoad() jest wywoływana przez ASP.NET AJAX po załadowaniu strony i wszystkich dołączonych bibliotek JavaScript.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Animacja jest uruchamiana natychmiast bez kliknięcia myszą (kliknij, aby wyświetlić obraz pełnowymiarowy)