Zmienianie animacji przy użyciu kodu Client-Side (VB)

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. Animację można również zmienić 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. Animację można również zmienić 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>

Rzeczywista animacja jest uruchamiana za pomocą przycisku HTML:

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

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

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

Należy pamiętać, że w kontrolce AnimationExtender nie ma węzła <Animations>. Niestandardowy kod JavaScript służy do udostępniania animacji do użycia z kontrolką.

Podobnie jak w przypadku interfejsu API serwera programu AnimationExtender, nie ma jeszcze łatwego sposobu przypisania animacji do rozszerzenia. Jednak rozszerzenie udostępnia kilka metod odczytywania i zapisywania animacji zarejestrowanych w różnych zdarzeniach (OnClickOnLoaditd.). Oto kilka przykładów:

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

Format zwracanej wartości get_*() funkcji i format argumentu dla set_*() funkcji jest ciągiem JSON zapewniającym reprezentację obiektu znaczników XML. Obecnie nie ma możliwości przekazania obiektu, ale istnieje możliwość odczytania obiektu z danej animacji (get_OnXXXBehavior() metod).

Oto ciąg JSON (bez cudzysłowów ograniczających i ładnie sformatowany) reprezentujący animację wyzwalaną przez przycisk, animujący panel poprzez zmianę jego rozmiaru i jednoczesne znikanie go.

{
 "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":[]
 }]
 }]
}

Poniższy kod JavaScript przypisuje ten opis JSON do OnClick animacji bieżącego rozszerzenia i uruchamia go:

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

Animacja jest uruchamiana natychmiast, bez kliknięcia myszą (i z bardzo małym znacznikiem) (kliknij, aby wyświetlić obraz pełnowymiarowy)