Изменение анимации с помощью кода 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>

Фактические анимации запускаются кнопкой HTML:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

Затем добавьте AnimationExtender на страницу, указав ID и TargetControlID атрибут, а также обязательный runat="server".

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

Обратите внимание, что в элементе <Animations> управления нет AnimationExtender узла. Пользовательский код JavaScript используется для добавления анимаций, используемых с элементом управления.

Как и в случае с API сервера AnimationExtender, назначить анимацию к расширителю пока невозможно. Однако расширитель предоставляет несколько методов для чтения и записи анимаций, зарегистрированных в различных событиях (OnClickи OnLoadт. д.). Ниже приведены некоторые примеры.

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

Формат возвращаемого значения get_*() функций и формат аргумента для set_*() функций является строкой JSON, предоставляя объектное представление того, что будет разметка XML. В настоящее время нет способа передать объект, но можно считывать объект из заданной анимации (get_OnXXXBehavior() методы).

Ниже приведена строка JSON (без ограждающих кавычек и красиво отформатированная), представляющая анимацию, активируемую кнопкой и одновременно изменяющую размер панели и растворяющую ее.

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Следующий код JavaScript назначает это описание JSON для анимации текущего расширителя и выполняет его.

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

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