Udostępnij za pośrednictwem

Wykonywanie animacji w odpowiedzi na interakcję z użytkownikiem (C#)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. Animacje mogą być uruchamiane automatycznie lub mogą być wyzwalane przez interakcję użytkownika, np. przez kliknięcie myszą.

Omówienie

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. Animacje mogą być uruchamiane automatycznie lub mogą być wyzwalane przez interakcję użytkownika, np. przez kliknięcie myszą.

Kroki

Najpierw dołącz element ScriptManager na stronie, a następnie załadowano bibliotekę ASP.NET AJAX, umożliwiając korzystanie z zestawu narzędzi Control Toolkit:

<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 element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy element runat="server":

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

<Animations> W węźle istnieje pięć sposobów uruchamiania animacji za pośrednictwem interakcji użytkownika (brakujący element jest <OnLoad> wykonywany po pełnym załadowaniu całej strony):

  • <OnClick> (kliknięcie myszy na kontrolce)
  • <OnHoverOut> (mysz opuszcza kontrolkę)
  • <OnHoverOver> (wskaźnik myszy zatrzymuje kontrolkę, zatrzymując animację <OnHoverOut> )
  • <OnMouseOut> (mysz pozostawia kontrolkę)
  • <OnMouseOver> (wskaźnik myszy zatrzymuje się na kontrolce, a nie zatrzymuje animacji <OnMouseOut> )

W tym scenariuszu <OnClick> jest używany. Gdy użytkownik kliknie panel, zostanie zmieniony i w tym samym czasie zanika.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Kliknięcie myszą powoduje uruchomienie animacji

Kliknięcie myszą powoduje uruchomienie animacji (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej