Udostępnij za pośrednictwem

Dodawanie animacji do kontrolki (C#)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. W tym samouczku pokazano, jak skonfigurować taką animację.

Omówienie

Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. W tym samouczku pokazano, jak skonfigurować taką animację.

Kroki

Pierwszym krokiem jest jak zwykle dołączenie ScriptManager elementu na stronie, tak aby biblioteka ASP.NET AJAX była ładowana i można użyć zestawu narzędzi Control Toolkit:

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

Animacja w tym scenariuszu 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>

Skojarzona klasa CSS panelu definiuje kolor tła i szerokość:

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

Następnie potrzebujemy elementu AnimationExtender. Po podaniu ID elementu i zwykłego runat="server"atrybut musi być ustawiony na kontrolkę, TargetControlID aby animować w naszym przypadku, panel:

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

Cała animacja jest stosowana deklaratywnie przy użyciu składni XML, niestety obecnie nie jest w pełni obsługiwana przez funkcję IntelliSense programu Visual Studio. Węzeł główny znajduje się <Animations>; w tym węźle. Dozwolone są kilka zdarzeń, które określają, kiedy animacje mają miejsce:

  • OnClick (kliknięcie myszą)
  • OnHoverOut (gdy mysz opuszcza kontrolkę)
  • OnHoverOver (po umieszczeniu wskaźnika myszy nad kontrolką zatrzymanie OnHoverOut animacji)
  • OnLoad (po załadowaniu strony)
  • OnMouseOut (gdy mysz opuszcza kontrolkę)
  • OnMouseOver (gdy wskaźnik myszy najecha kursorem na kontrolkę OnMouseOut , nie zatrzymuje animacji)

Struktura zawiera zestaw animacji, z których każdy jest reprezentowany przez własny element XML. Oto wybór:

  • <Color> (zmiana koloru)
  • <FadeIn> (zanikanie w)
  • <FadeOut> (zanikanie)
  • <Property> (zmiana właściwości kontrolki)
  • <Pulse> (pulsujące)
  • <Resize> (zmiana rozmiaru)
  • <Scale> (proporcjonalnie zmieniając rozmiar)

W tym przykładzie panel zanika. Animacja trwa 1,5 sekund (Duration atrybut), wyświetlając 24 ramki (kroki animacji) na sekundę (Fps atrybut). Oto kompletny znacznik dla kontrolki AnimationExtender :

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Po uruchomieniu tego skryptu zostanie wyświetlony panel i wygaśnie w ciągu pół sekundy.

Panel jest zanikający

Panel jest zanikający (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dalej