Программирование анимационных эффектов

Любой анимационный эффект можно воспроизвести программно. При разработке сценариев в распоряжении программиста нет какого-либо прикладного интерфейса, который позволил бы по желанию добавлять или убирать отдельные анимационные эффекты, но имеется возможность связывать данные в формате XML (на стороне сервера) или в формате JSON (на стороне клиента) с элементом управления AnimationExtender.

Рассмотрим сначала возможность программного воспроизведения эффектов на стороне сервера. У элемента AnimationExtender имеется свойство Animations. Этому свойству можно присвоить строку с описанием анимационного эффекта в формате XML. Просто уберите узел и начинайте запуск эффекта с первого события, как показано в примере 11.3. Этот пример воспроизводит тот же эффект, что и предыдущий пример, но добавляет информацию с описанием эффекта в программном коде на C#.

Пример 11.3. Воспроизведение анимации с использованием программного кода на стороне сервера AnimationServer.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd">
ASP.NET AJAX

(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)

(asp:Label ID="Label1" runat="server" Text="See me fading ..."
Style="display: inline?block; background?color: Red; position:
relative; left: 8px; top: 8px;" /)

TargetControlID="Label1" />

(/body)


То же самое можно сделать и в сценарии JavaScript.


Единственная разница заключается в формате представления описания анимационного эффекта. Вместо строки в формате XML необходимо использовать строку в формате JSON. Вся информация об анимационном эффекте содержится в виде объекта, представленного строкой JSON. Имя анимационного эффекта (которое идентично имени соответствующего элемента XML) определяется с помощью свойства AnimationName. Элементы внутри элемента XML оформляются в виде массива с помощью свойства AnimationChildren. Ниже приводится только строка в формате
JSON, отформатированная для лучшего восприятия:

{
'AnimationName':'Parallel',
'AnimationChildren':
[
{
'AnimationName':'FadeOut',
'Duration':'3',
'Fps':'25'
},
{
'AnimationName':'Condition',
'ConditionScript':'(Math.random( ) < 0.5)',
'AnimationChildren':
[
{
'AnimationName':'Length',
'StartValue':'0',
'EndValue':'250',
'Unit':'px',
'Property':'style',
'PropertyKey':'left'
},
{
'AnimationName':'Length',
'StartValue':'0',
'EndValue':'250',
'Unit':'px',
'Property':'style',
'PropertyKey':'top'
}
]
}
]
}

Кроме того, вам может потребоваться средство доступа к элементам управления в странице, поскольку сам по себе элемент AnimationExtender не имеет визуального представления.


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

В примере 11.4 приводится полный программный код. Результат работы этого примера тот же самый, что и в примерах 11.2 и 11.2, но на этот раз анимационный эффект описывается внутри клиентского сценария.
Пример 11.4. Воспроизведение анимации с использованием программного
кода на стороне клиента AnimationClient.aspx

<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)

(asp:Label ID="Label1" runat="server" Text="See me fading ..."
Style="display: inline?block; background?color: Red;
position: relative; left: 8px; top: 8px;" /)

TargetControlID="Label1" />

(/body)


Платформа создания анимационных эффектов обладает еще целым рядом возможностей.


В дополнение к тем что были продемонстрированы в этой главе, она допускает расширение, обеспечивая большую гибкость и принимая на себя существенную долю труда программиста по написанию программного кода JavaScript. Те, кого это заинтересовало, найдут массу справочной информации и разбор программ на сайте с примерами использования компонентов из пакета ASP.NET AJAX Control Toolkit (который называется SampleWebsite)..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Воспроизведение сложных анимационных эффектов
Основы анимации
Перетащить-и-отпустить
Платформа создания анимационных эффектов
События для запуска анимации