Wyzwalanie animacji w innej kontrolce (VB)

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. Ogólnie rzecz biorąc, uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Możliwe jest jednak również interakcja z jedną kontrolką, a następnie animacja innej kontrolki.

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. Ogólnie rzecz biorąc, uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Możliwe jest jednak również interakcja z jedną kontrolką, a następnie animacja innej kontrolki.

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>

Aby rozpocząć animowanie panelu, jest używany przycisk HTML. Należy pamiętać, że <input type="button" /> jest to preferowane <asp:Button /> , ponieważ nie chcemy ogłaszania zwrotnego, gdy użytkownik kliknie ten przycisk.

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

Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server"element . Ważne jest, aby ustawić TargetControlID identyfikator przycisku (element wyzwalający animację), a nie identyfikator panelu (element jest animowany)

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

W węźle <Animations> umieść animacje w zwykły sposób. Aby zmienić panel, a nie przycisk, należy ustawić AnimationTarget atrybut dla każdego elementu animacji w obrębie AnimationExtender. Wartość parametru AnimationTarget to oczywiście identyfikator panelu. W ten sposób animacje są wykonywane z panelem, a nie za pomocą przycisku wyzwalania. Oto znaczniki AnimationExtender dla tego scenariusza:

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

Zwróć uwagę na specjalną kolejność wyświetlania poszczególnych animacji. Po pierwsze przycisk zostaje zdezaktywowany po uruchomieniu animacji. Ponieważ w elemecie nie AnimationTarget ma atrybutu <EnableAction> , ta animacja jest stosowana do kontrolki źródłowej: przycisku. Następne dwa kroki animacji należy wykonać równolegle (<Parallel> element). Oba mają swoje AnimationTarget atrybuty ustawione na "Panel1", w związku z czym animowanie panelu, a nie przycisku.

Kliknięcie myszy na przycisku powoduje uruchomienie animacji panelu (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej