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

Выполнение анимаций с помощью клиентского кода (C#)

  • Статья

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

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

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

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

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

Этапы

Во-первых, добавьте 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атрибут , TargetControlID и обязательный runat="server"атрибут :

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

<Animations> В узле используйте для <OnClick> запуска анимации после того, как пользователь щелкает панель. Добавьте две анимации, которые будут выполняться параллельно:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Для демонстрации эта анимация (и любая другая анимация, созданная с помощью набора средств управления) выполняется с помощью кода JavaScript после запуска страницы. Прежде всего нам нужен доступ к элементу AnimationExtender управления. Библиотека ASP.NET AJAX предоставляет функцию $find() для этой задачи:

var ae = $find("ae");

Элемент AnimationExtender управления предоставляет многофункциональный API, включая методы с именами, идентичными обработчикам событий, используемым в разметке XML: OnClick(), OnLoad()и т. д. Например, вызов OnClick() метода выполняет анимацию в элементе <OnClick>AnimationExtender элемента управления :

ae.OnClick();

Ниже приведен полный код JavaScript на стороне клиента, который эмулирует щелчок на панели после полной загрузки страницы. Обратите внимание, что используется имя функции, pageLoad() вызываемое ASP.NET AJAX после загрузки страницы и всех включенных библиотек JavaScript.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Анимация запускается немедленно, без щелчка мышью

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

НазадВперед