Wyzwalanie animacji w innej kontrolce (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Kontrolka animacji w narzędziu ASP.NET AJAX Control Toolkit nie jest tylko kontrolką, ale całą strukturą służącą do dodawania animacji do kontrolki. Ogólnie uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Możliwe jest również współdziałanie z jednym formantem, a następnie przeprowadzenie animacji innej kontrolki.

Omówienie

Kontrolka animacji w narzędziu ASP.NET AJAX Control Toolkit nie jest tylko kontrolką, ale całą strukturą służącą do dodawania animacji do kontrolki. Ogólnie uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Możliwe jest również współdziałanie z jednym formantem, a następnie przeprowadzenie animacji innej kontrolki.

Kroki

Po pierwsze, Uwzględnij ScriptManager na stronie; następnie załadowana zostanie Biblioteka ASP.NET AJAX, co umożliwia korzystanie z zestawu narzędzi kontroli:

<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 panelu, zdefiniuj kolor tła całkiem, a także Ustaw stałą szerokość panelu:

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

Aby rozpocząć animację panelu, używany jest przycisk HTML. Należy pamiętać, że <input type="button" /> jest korzystne dla <asp:Button />, ponieważ nie ma potrzeby ogłaszania zwrotnego po kliknięciu tego przycisku przez użytkownika.

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

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

<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ć atrybut AnimationTarget dla każdego elementu animacji w AnimationExtender. Wartość AnimationTarget jest IDENTYFIKATORem panelu. W ten sposób animacje są wykonywane z panelem, a nie z przyciskiem wyzwalającym. Oto AnimationExtender znaczników w tym scenariuszu:

<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 kolejność specjalną, w której pojawiają się pojedyncze animacje. Po pierwsze, przycisk zostaje zdezaktywowany po uruchomieniu animacji. Ponieważ nie ma AnimationTarget atrybutu w elemencie <EnableAction>, ta animacja jest stosowana do formantu źródłowego: przycisk. Następne dwa kroki animacji są wykonywane równolegle (<Parallel> elementu). Oba mają atrybuty AnimationTarget ustawione na "Panel1", a tym samym animowanie panelu, a nie przycisku.

kliknięciu przycisku myszy spowoduje uruchomienie animacji panelu.

Kliknięcie przycisku powoduje uruchomienie animacji panelu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)