Использование анимации для перемещения элемента

Эффект изменения степени прозрачности элемента может использоваться лишь для узкого круга задач. Другая (более универсальная) разновидность анимации, реализованная платформой ASP.NET AJAX, – та, что наращивает значение числа с определенным шагом. Возможность изменения числового значения может использоваться разными способами – обычно для изменения значения свойства элемента. Один из примеров, который сразу приходит на ум, – это непрерывное изменение значений свойств left и top.

Класс ASP.NET AJAX Sys.Preview.UI.Effects.NumberAnimation производит изменение числа от начального значения до конечного. Определяя протяженность анимации и количество кадров в секунду, вы задаете количество промежуточных шагов и длительность анимации.

В качестве примера мы опять возьмем элемент управления Label. Программный код создает экземпляр класса Sys.Preview.UI.Effects.NumberAnimation и устанавливает все необходимые свойства, кроме числа кадров в секунду, – в этом случае по умолчанию используется значение 25.
var ani = new Sys.Preview.UI.Effects.NumberAnimation();
ani.set_target($get("Label1").control);
ani.set_startValue(0);
ani.set_endValue(300);
ani.set_duration(3);
ani.set_integralValues(true);

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


Вместо этого необходимо присвоить свойству setValue класса NumberAnimation функцию, которая будет выполнять необходимые действия. У такого подхода есть свои преимущества – вы можете манипулировать числовыми значениями, как вам требуется. Например, некоторые броузеры (к ним относятся броузеры, основанные на Mozilla) принимают для позиционирования только величины, включающие единицы измерения, такие как "20px" вместо обычного числа "20", таким образом ваша функция setMethod() может добавлять к числам единицы измерения.

Единственная сложность заключается в получении ссылки на элемент, который должен быть анимирован, без необходимости написания специального программного кода (например, с помощью document.getElementById() или $get() и фиксированного идентификатора). Класс анимации позволяет получить ссылку на целевой объект с помощью метода get_target(), а свойство element результата обеспечит доступ к ассоциированному DOM?элементу (с помощью метода get_element()). Вы можете использовать эту ссылку в своей реализации функции setValue() и затем запустить анимацию. Ваш код мог бы выглядеть примерно так:
ani.setValue = function(value) {
this.get_target().get_element().style.left = value + "px";
this.get_target().get_element().style.top = value + "px";
}
ani.play();

Вместо установки позиции метки вручную можно было бы использовать метод Sys.UI.DomElement.setLocation(), предоставляемый платформой ASP.NET AJAX, который, кроме всего прочего, заботится о подстановке единиц измерения:
ani.setValue = function(value) {
Sys.UI.DomElement.setLocation(
this.get_target().get_element(),
value,
value);
}
ani.play();

В примере 19.3 приводится полный код страницы, которая анимирует элемент управления Label, перемещая его по странице.
Пример 19.3.


Перемещение элемента с помощью анимационного эффекта
NumberAnimation.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


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

(asp:ScriptReference name="PreviewScript.js"
assembly="Microsoft.Web.Preview" /)
(asp:ScriptReference name="PreviewGlitz.js"
assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)





(/body)


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


Обратите внимание, как используется свойство CSS position: relative для обеспечения такой возможности – вам необходимо только задать позицию элемента. .



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

Статьи из раздела ASP.NET AJAX на эту тему:
Группировка анимационных эффектов
Использование LengthAnimation для перемещения элемента
Использование анимации для создания эффекта плавного исчезновения
Использование анимационных эффектов