Давайте на основе полученных знаний рассмотрим оставшуюся функцию библиотеки 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. Увеличение размеров узла
<html>
<head>
<title>More Fun With Animation!</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css";
.box {
width : 200px;
height : 200px;
margin : 5px;
text-align : center;
}
.blueBox {
background : blue;
float : left;
}
.redBox {
background : red;
float : left;
}
.greenBox {
background : green;
clear : left;
}
</style>
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var box = dojo.byId("box1");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 3000,
properties : {
height : {start : '200', end : '400'},
width : {start : '200', end : '400'}
}
}).play();
});
});
</script>
</head>
(body)
<div id="box1" class="box blueBox">Click Here</div>
<div id="box2" class="box redBox"></div>
<div id="box2" class="box greenBox"></div>
(/body)
</html>
Если некоторые аргументы функции 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();
});
});
Учитывая, что используемая переходная функция по умолчанию является довольно гладкой, потратьте некоторое время на эксперименты, чтобы выяснить, какое влияние оказывают на эффект анимации другие функции, имеющие более скачкообразный график.