Web разработка с использованием Prototype и Scriptaculous. Управление эффектами.

Владимир | | HTML, JavaScript.

Управление эффектами (картинка)
Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.

В этой статье я расскажу, как создавать группы из нескольких эффектов и управлять их выполнением.

Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).

Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).

Разметка страницы предельно простая:

<body>
<div id="textBlock">…</div>
<p><input type="button" id="runParallel" value="запустить параллельно" onclick="runParallel()" /></p>
<p><input type="button" id="runSerial" value="запустить последовательно" onclick="runSerial()" /></p>
</body>

Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.

Теперь представим, что мы написали такой код:

new Effect.Highlight('textBlock', {startcolor:"#DFDC00", endcolor:"#FFFFFF", duration: 2});
new Effect.MoveBy('textBlock', 0, 100, {duration: 2});

Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.

Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.

Параллельное выполнение эффектов
Гарантировать одновременное выполнение эффектов можно с помощью метода Parallel, который создает контейнер для эффектов. В первом параметре этого метода нужно указать все эффекты, которые мы хотим применить, причем в параметры каждого эффекта обязательно добавьте sync: true, а также уберите duration.

Во втором параметре метода передается массив с настройками. Вот здесь и нужно задавать время работы эффектов.

В результате наша функция runParallel() будет выглядеть следующим образом:

function runParallel() {
new Effect.Parallel(
    [
    new Effect.Highlight('textBlock', {startcolor:"#DFDC00",
    endcolor:"#FFFFFF", sync: true}),
    new Effect.MoveBy('textBlock', 0, 100, {sync: true})
    ],
    {duration: 2}
);
}

Последовательное выполнение эффектов
Тут тоже ничего сложного. Нужно создать очередь (queue) и добавить в нее эффекты.

Создается очередь с помощью параметра queue в настройках эффекта. В качестве значения этому параметру нужно передать массив из двух элементов: position и scope.
1) position – указывает куда будет вставлен данный эффект. Может принимать два значения: end (эффект будет вставлен в конец очереди) и front (в начало).
2) scope – задает название очереди. С его помощью можно создать несколько очередей с эффектами.

Теперь посмотрим наш пример:

function runSerial() {
    new Effect.Highlight('textBlock', {startcolor:"#DFDC00",
        endcolor:"#FFFFFF", duration: 2,
        queue: {position: 'end', scope: 'myqueue'}});
    new Effect.MoveBy('textBlock', 0, 100, {duration: 2,
        queue: {position: 'end', scope: 'myqueue'}});
}

Как видите, мы создали очередь под названием myqueue и добавили в ее конец оба наших эффекта.

При добавлении эффекта в конец очереди предыдущие эффекты смещаются вперед. Поэтому в нашем случае сначала блок будет подсвечен, а затем, перемещен.

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

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

Если что-то не получилось, скачайте архив с файлами примера.

Постовой

Не нужно запускать болезнь. Главное помнить, что профилактика болезней гораздо лучше чем их лечение.

  • А как сделать что бы между двумя эффетами при последовательном выполнении выполнялась какая либо функция? Если просто между new Effect вставить сначала выполниться функция, потом только два эффета…

    • Все эффекты Scriptaculous поддерживают параметры beforeStart, beforeUpdate, afterUpdate, afterFinish, которым можно назначить функцию-обработчик.
      В вашем случае скорее всего нужно использовать либо afterFinish для первого эффекта, либо beforeStart для второго.

      Например:

      new Effect.Opacity( 'testSubject', {
      duration: 5,
      from: 0,
      to: 1,
      afterFinish: function(o) {alert(«Привет»);}
      });

  • А как сделать что бы между двумя эффетами при последовательном выполнении выполнялась какая либо функция? Если просто между new Effect вставить сначала выполниться функция, потом только два эффета…

    • Все эффекты Scriptaculous поддерживают параметры beforeStart, beforeUpdate, afterUpdate, afterFinish, которым можно назначить функцию-обработчик.
      В вашем случае скорее всего нужно использовать либо afterFinish для первого эффекта, либо beforeStart для второго.

      Например:

      new Effect.Opacity( 'testSubject', {
      duration: 5,
      from: 0,
      to: 1,
      afterFinish: function(o) {alert(«Привет»);}
      });

  • Спасибо большое! Помогло 🙂

  • Спасибо большое! Помогло 🙂