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

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

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

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

Обзор

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

Шаги

Во-первых, включите 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> В узле используйте <OnClick> для запуска анимации после нажатия пользователем кнопки на панели. Добавьте две анимации для параллельного выполнения:

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

Для демонстрации эта анимация (и любая другая анимация, созданная с помощью набора средств управления), выполняется с помощью кода JavaScript после запуска страницы. Прежде всего, нам нужен доступ к элементу AnimationExtender управления. Библиотека AJAX ASP.NET предоставляет функцию $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>

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