Анимация в ответ на взаимодействие с пользователем (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Анимации могут запускаться автоматически или активироваться взаимодействием пользователя, например щелкнув мышью.

Обзор

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Анимации могут запускаться автоматически или активироваться взаимодействием пользователя, например щелкнув мышью.

Шаги

Во-первых, включите ScriptManager на страницу, а затем загружается библиотека AJAX ASP.NET, что позволяет использовать набор элементов управления.

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

Анимация будет применена к панели текста, которая выглядит следующим образом:

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

В связанном классе CSS для панели определите хороший цвет фона, а также задайте фиксированную ширину для панели:

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

Затем добавьте AnimationExtender на страницу, указав ID и TargetControlID атрибут, а также обязательный runat="server".

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

В узле <Animations> имеется пять способов запуска анимации через взаимодействие с пользователем (отсутствующий элемент <OnLoad>, который выполняется после полной загрузки страницы):

• <OnClick> (щелкните элемент управления мышью)
• <OnHoverOut> (мышь покидает элемент управления)
• <OnHoverOver> (указатель мыши зависает над элементом управления, происходит остановка анимации <OnHoverOut>)
• <OnMouseOut> (мышь оставляет элемент управления)
• <OnMouseOver> (указатель мыши находится на элементе управления, не останавливая анимацию <OnMouseOut>)

В этом сценарии <OnClick> используется. Когда пользователь щелкает на панели, она изменяет размер и угасает одновременно.

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

Щелчок мыши запускает анимацию (щелкните, чтобы просмотреть изображение полного размера)