Udostępnij za pośrednictwem

Wykonywanie kilku animacji w tym samym czasie (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. Umożliwia uruchamianie kilku animacji w sposób równoległy.

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. Umożliwia uruchamianie kilku animacji w sposób równoległy.

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

W węźle <Animations> użyj polecenia <OnLoad> , aby uruchomić animacje po pełnym załadowaniu strony. Ogólnie rzecz biorąc, <OnLoad> akceptuje tylko jedną animację. Struktura Animacja umożliwia dołączenie kilku animacji do jednej przy użyciu <Parallel> elementu . Wszystkie animacje w ramach programu <Parallel> są wykonywane w tym samym czasie.

Oto możliwe znaczniki dla kontrolki AnimationExtender , zanikanie i zmiana rozmiaru panelu w tym samym czasie:

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

I rzeczywiście: po uruchomieniu tego skryptu zostanie wyświetlony panel, a następnie zmienia rozmiar (więcej niż potknięcie szerokości i o połowę jego wysokości) i zanika w tym samym czasie.

Panel jest zanikający i zmienia rozmiar (w tym jego zawartość, dzięki aparatowi renderowania przeglądarki)

Panel jest zanikający i zmienia rozmiar (w tym jego zawartość, dzięki aparatowi renderowania przeglądarki) (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

WsteczDalej