Запуск анимации в другом элементе управления (VB)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

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

Общие сведения

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

Этапы

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

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

Чтобы начать анимацию панели, используется кнопка HTML. Обратите внимание, что <input type="button" /> предпочтет, <asp:Button /> так как мы не хотим обратной передачи, когда пользователь нажимает на нее.

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

Затем добавьте на AnimationExtender страницу , указав IDатрибут , TargetControlID и обязательный runat="server"атрибут . Важно задать TargetControlID идентификатор кнопки (элемент, запускающий анимацию), а не идентификатор панели (анимируемого элемента).

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

<Animations> В узле поместите анимации, как обычно. Чтобы изменить панель, а не кнопку, задайте AnimationTarget атрибут для каждого элемента анимации в AnimationExtender. Значение для AnimationTarget — это идентификатор панели, конечно. Таким образом, анимация выполняется на панели, а не с помощью кнопки активации. Ниже приведена разметка AnimationExtender для этого сценария.

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

Обратите внимание на особый порядок отображения отдельных анимаций. Во-первых, кнопка отключается после запуска анимации. Так как в элементе нет AnimationTarget атрибута <EnableAction> , эта анимация применяется к исходному элементу управления: кнопке. Следующие два этапа анимации должны выполняться параллельно (<Parallel> элемент). Для обоих AnimationTarget атрибутов задано значение "Panel1", что позволяет анимировать панель, а не кнопку.

Нажатие кнопки мыши запускает анимацию панели (щелкните для просмотра полноразмерного изображения)

НазадВперед