Анимирование произвольных свойств CSS

Давайте на основе полученных знаний рассмотрим оставшуюся функцию библиотеки Base – animateProperty, способную принимать один или более параметров.

Заменив функцию addOnLoad фрагментом, что приводится ниже, можно проверить работу функции animateProperty. В данном конкретном случае производится изменение ширины узла от 200px до 400px:
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 3000,
properties : {
width : {start : '200', end : '400'}
}
}).play();
});
});

Функция animateProperty стоит того, чтобы потратить некоторое время на эксперименты с ней для получения полного представления о том, какие творческие возможности она в себе таит. Она составляет основу большинства анимационных эффектов, реализованных в модуле dojo.fx, и есть вероятность, что вы будете использовать ее очень часто при совершении стандартных действий. Она принимает практически любые свойства CSS посредством одного и того же унифицированного интерфейса. Пример 8.2 демонстрирует, как анимационные эффекты воздействуют на информационное наполнение страницы, не вовлеченное в анимацию.


Щелчок на синем прямоугольнике заставляет его увеличить свои размеры по осям x и y, что приводит к соответствующему изменению местоположения красного и зеленого прямоугольников.
Пример 8.2. Увеличение размеров узла


More Fun With Animation!

type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body)
Click Here



(/body)


Если некоторые аргументы функции animateProperty до сих пор остаются неясными, предыдущий пример предоставляет прекрасную возможность познакомиться поближе с действием разных параметров.


Например, внесите следующие изменения в вызове функции animateProperty, чтобы вместо плавного воспроизведения эффекта получить 10 дискретных кадров (вспомните, что продолжительность эффекта, поделенная на значение параметра rate, дает в результате число кадров):
dojo.addOnLoad(function() {
var box = dojo.byId("box1");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 10000,
rate : 1000,
properties : {
height : {start : '200', end : '400'},
width : {start : '200', end : '400'}
}
}).play();
});
});

Учитывая, что используемая переходная функция по умолчанию является довольно гладкой, потратьте некоторое время на эксперименты, чтобы выяснить, какое влияние оказывают на эффект анимации другие функции, имеющие более скачкообразный график.

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

Статьи из раздела Dojo на эту тему:
Core fx
Анимация
Переключение
Программное управление анимацией
Свертывание