Создание цепочек и комбинирование эффектов

Есть чтото удивительное в том, как объект скользит по экрану, растворяется и сворачивается, но на этом многообразие эффектов не заканчивается: вы можете использовать еще одну функцию в модуле fx библиотеки Core – dojo.fx.chain, позволяющую составлять цепочки из анимационных эффектов. Эта функция чрезвычайно проста, в том смысле, что принимает единственный аргумент – массив объектов _Animation и возвращает другой объект _Animation, который воспроизводит после довательность указанных эффектов. Давайте воспользуемся этой функцией, чтобы заставить прямоугольник сделать чтонибудь более интересное.

Пример 8.5 демонстрирует прямоугольник, выполняющий зигзагообразные движения по экрану. Обратите внимание, что в примере определяется собственная переходная функция.
Пример 8.5. Объединение анимационных эффектов в цепочку
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var easing = function(x) { return x; };
var a1 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 1000,
top : "150",
left : "300"
});
var a2 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 400,
top : "20",
left : "350"
});
var a3 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 800,
top : "350",
left : "400"
});
dojo.fx.chain([a1,a2,a3]).play();
});
});

А теперь представим, что вам требуется одновременно воспроизвести эффект скольжения и растворения.


Нет проблем. Функция dojo.fx.combine, имеющая такую же сигнатуру, как и dojo.fx.chain, сделает это в одно мгновение. Все анимационные эффекты, находящиеся в массиве, который передается в качестве аргумента, будут воспроизводиться одновременно. Для начала рассмотрим простую комбинацию эффектов скольжения и растворения. Пример 8.6 демонстрирует, как следует изменить функцию addOnLoad.

Пример 8.6. Комбинированный эффект анимации
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var a1 = dojo.fx.slideTo({
node:box,
top : "150",
left : "300"
});
var a2 = dojo.fadeOut({
node:box
});
dojo.fx.combine([a1,a2]).play();
});
});

Учитывая, что функция chain возвращает единственный объект _Animation, давайте попробуем воспроизвести какойнибудь более сложный эффект (но в действительности попрежнему простой, потому что он будет основан на тех же принципах): в примере 8.7 мы объединили в цепочку несколько эффектов растворения/проявления и скомбинировали ее с цепочкой эффектов скольжения.
Пример 8.7. Комбинирование цепочек анимационных эффектов
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
//объединить в цепочку несколько эффектов скольжения
var a1 = dojo.fx.slideTo({
node:box,
top : "150",
left : "300"
});
var a2 = dojo.fx.slideTo({
node:box,
top : "20",
left : "350"
});
var a3 = dojo.fx.slideTo({
node:box,
top : "350",
left : "400"
});
var slides = dojo.fx.chain([a1,a2,a3]);
//объединить в цепочку несколько эффектов растворения/проявления
var a1 = dojo.fadeIn({
node:box
});
var a2 = dojo.fadeOut({
node:box
});
var a3 = dojo.fadeIn({
node:box
});
var fades = dojo.fx.chain([a1,a2, a3]);
//теперь создадим комбинированный эффект из двух цепочек
dojo.fx.combine([slides, fades]).play();
});
});.



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

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