Хотя в общем случае вам не придется создавать объекты _Animation самостоятельно, вы имеете возможность управлять ими в большинстве обычных ситуаций. Например, в процессе воспроизведения анимационного эффекта имеется возможность приостановить его, перезапустить или остановить совсем, запросить информацию о состоянии про цесса воспроизведения или дать команду переместиться в определенную точку.
Кроме всего прочего, при использовании функции animateProperty имеется возможность определить во входных параметрах любой из методов.
Ниже приводится небольшой фрагмент программного кода, который можно использовать, чтобы поэкспериментировать с этими методами:
dojo.animateProperty({
node : "box1",
duration:10000,
rate : 1000,
beforeBegin:function(){ console.log("beforeBegin: ", arguments); },
onBegin:function(){ console.log("onBegin: ", arguments); },
onAnimate:function(){ console.log("onAnimate: ", arguments); },
onEnd:function(){ console.log("onEnd: ", arguments); },
onPlay:function(){ console.log("onPlay: ", arguments); },
properties : {height : {start : "200", end : "400"} }
}).play();
Следующий фрагмент показывает, как изменить рабочий пример, что бы поближе познакомиться с основными методами управления объектом _Animate:
<!-- обрезано -->
<script type="text/javascript">
dojo.addOnLoad(function() {
var box = dojo.byId("box1");
var anim;
dojo.connect(box, "onclick", function(evt) {
anim = dojo.animateProperty({
node : box,
duration : 10000,
rate : 1000,
easing : function(x) { console.log(x); return x*x; },
properties : {
height : {start : '200', end : '400'},
width : {start : '200', end : '400'}
}
});
anim.play();
dojo.connect(dojo.byId("stop"), "onclick", function(evt) {
anim.stop(true);
console.log("status is ", anim.status());
});
dojo.connect(dojo.byId("pause"),"onclick",function(evt) {
anim.pause();
console.log("status is ", anim.status());
});
dojo.connect(dojo.byId("play"), "onclick", function(evt) {
anim.play();
console.log("status is ", anim.status());
});
dojo.connect(dojo.byId("goTo50"),"onclick",function(evt) {
anim.gotoPercent(0.5, true);
console.log("advanced to 50%");
});
});
});
</script>
</head>
(body)
<div>
(button id="stop" style="margin : 5px")stop(/button)
(button id="pause" style="margin : 5px")pause(/button)
(button id="play" style="margin : 5px")play(/button)
(button id="goTo50" style="margin : 5px")50 percent(/button)
</div>
<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>