Поделиться через

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

  • Статья

Кристиан Венц (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>

Далее нам понадобится AnimationExtender. После предоставления ID и обычного runat="server"атрибута TargetControlID необходимо задать для элемента управления, чтобы анимировать в нашем случае панель:

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

Вся анимация применяется декларативно с использованием синтаксиса XML, который, к сожалению, в настоящее время не полностью поддерживается IntelliSense в Visual Studio. Корневой узел находится <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>

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

Панель исчезает

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

Вперед