Добавление анимации в элемент управления (VB)

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

Скачать в формате 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 и обычного runat="server", атрибут TargetControlID необходимо задать для элемента управления, который нужно анимировать; в нашем случае это панель.

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

Вся анимация применяется декларативно, используя синтаксис XML, и в настоящее время, к сожалению, не полностью поддерживается Visual Studio IntelliSense. Корневой узел находится <Animations>; в этом узле, разрешено несколько событий, которые определяют, когда происходит анимация:

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

Платформа поставляется с набором анимаций, каждый из которых представлен собственным XML-элементом. Ниже приведен выбор:

• <Color> (изменение цвета)
• <FadeIn> (появляется)
• <FadeOut> (постепенное исчезновение)
• <Property> (изменение свойства элемента управления)
• <Pulse> (пульсирующий)
• <Resize> (изменение размера)
• <Scale> (пропорциональное изменение размера)

В этом примере панель будет исчезать. Анимация должна занять 1,5 секунды (Duration атрибут), отображая 24 кадра (шаги анимации) в секунду (Fps атрибут). Ниже приведена полная разметка элемента AnimationExtender управления:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

При запуске этого скрипта панель отображается и исчезает в течение полутора секунд.

Панель исчезает (щелкните, чтобы просмотреть изображение полного размера)