В избранное    Домой   

Вторник,  23 Apr 2024 г., 14:47
Даже и в мыслях твоих не злословь царя, и в спальной комнате твоей не злословь богатого; потому что птица небесная может перенесть слово твое, и крылатая -- пересказать речь твою. /Екклесиаст/

 Логин:  

 Пароль: 



Анонсы:
=== Дата: 07/12/2011     Автор: О. Н. Рева ===

JavaScript. Графика и эффекты анимации

Занимаясь разработкой Web-страниц, вы можете проявить себя не только как писатель, но как и режиссер. Мир Интернет динамичен и полон движения. Эффекты анимации позволят привлечь внимание посетителей Web-страницы и выделить наиболее важные информационные блоки. Но будьте сдержаны, применяя спецэффекты. Анимация должна привлекать, но не отвлекать внимание посетителей.

Обычно для анимации используют графические объекты — изображения в формате GIF, которые сменяют друг друга с определенной частотой, часто по циклу. В результате получается эффект движения или изменения графического изображения. К анимации также относится динамическое изменение или перемещение текста — эффект бегущей строки.

Бегущая строка

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

Объект MARQUEE

Для создания бегущей строки используется специальный дескриптор <MARQUEE>. Атрибуты этого дескриптора контролируют параметры перемещения текста.

  • BEHAVIOR – способ выполнения эффекта бегущей строки:
    • scroll – текст исчезает за краем Web-страницы;
    • slide – после выполнения заданного числа циклов остается у левого или правого поля Web-страницы;
    • alternate – направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла, по завершение последнего цикла текст остается у края страницы.
  • BGCOLOR – цвет фона бегущей строки.
  • DIRECTION – направление перемещения текста:
    • left – влево;
    • right – вправо.
  • HEIGHT – высота бегущей строки.
  • HSPACE – отступ в пикселях текста бегущей строки от левого и правого полей Web-страницы.
  • LOOP – число показов текста в строке:
    • ? - целочисленное значение, указывающее число повторов;
    • infinite – бесконечное повторение эффекта по циклу.
  • SCROLLAMOUNT – смещение текста в пикселях за один шаг.
  • SCROLLDELAY – временной промежуток между смещениями в миллисекундах, по умолчанию 60мс. Используйте этот атрибут, чтобы замедлить перемещение текста в строке, так как значения менее 60 мс будут игнорироваться обозревателем. Чтобы ускорить перемещение текста, переустановите минимальное значение смещения текста в атрибуте TRUESPEED.
  • VSPACE – отступ в пикселях по вертикале от текста до рамки бегущей строки.
  • TRUESPEED - минимальное значение смещения текста, по умолчанию 60 мс.
  • WIDTH – ширина бегущей строки в пикселях.

Текст заключенный между дескрипторами <MARQUEE>...</MARQUEE>, можно форматировать так же, как обычный текст Web-страницы. Объект бегущей строки, созданный с помощью дескрипторов <MARQUEE>...</MARQUEE>, доступен для динамического редактирования с помощью сценариев


Листинг. Управление свойствами бегущей строки с помощью кнопок формы
<html>
<head>
<title>Бегущая строка</title>
<script>
function set_marquee(text,color) {
    marquee.innerText = text;
    marquee.bgColor = color;
}
</script>
</head>
<body>
<marquee name='marquee' id='marquee'></marquee>
<form>
<p>
<input type='button' value='Красная кнопка' onclick="set_marquee('Текст красной кнопки','red');" />
<input type='button' value='Желтая кнопка' onclick="set_marquee('Текст желтой кнопки','yellow');" />
<input type='button' value='Зеленая кнопка' onclick="set_marquee('Текст зеленой кнопки','green');" />
</p>
</form>
</body>
</html>

Web-страница содержит именованный объект бегущей строки и форму с тремя кнопками. Щелчок на кнопке выводит текст в бегущей строке и изменяет цвет цвет фона. Все кнопки вызывают на выполнение функцию set_marquee, определенную в сценарии в заголовке Web-страницы. Эта функция принимает в аргументах текст и значение цвета. В строках функции происходит присвоение полученных значений соответствующим атрибутам объекта бегущей строки. Результат выполнения показан на рисунке:

Пример:

Эффект бегущей строки поддерживается только в обозревателе Internet Explorer. В других обозревателях текст будет отображаться как обычная строка.

Бегущий текст в строке состояния

Показ сообщений в строке состояния — это не самый лучший способ информирования посетителей Web-страницы, поскольку часто пользователи Интернет не обращают ни малейшего внимания на сообщения в этой части окна обозревателя. Но движущийся текст безусловно привлечет внимание.

Чтобы заставить текст двигаться, введите код Web-страницы, показанный ниже.


Листинг. Бегущий текст в строке состояния
<html>
<head>
<title>Бегущая строка</title>
<script>
function set_phrase(tVal) {
    if (tVal) {
        phrase = "..." + tVal + "...";
        set_status();
    }
    else
        stopscroll();
}

function set_status() {
    len = phrase.length;
    first = phrase.substring(0,1);
    rest = phrase.substring(1,len);
    phrase = rest + first;
    self.status = phrase;
    timerID = setTimeout("set_status()",100);
}

function stopscroll() {
    clearTimeout(timerID);
    self.status = "Бегущий текст остановлен";
}
</script>
</head>
<body>
<form>
<input type='text' name='input' ID='input' style="width:'500'" /><br />
<input type='button' value='Запустить бегущую строку' onclick="set_phrase(input.value)" /><br />
<input type='button' value='Остановить бегущую строку' onclick="stopscroll()" /><br />
</form>
</body>
</html>

Полученная Web-страница содержит текстовое поле и две кнопки

Первая кнопка, Запустить бегущую строку, извлекает строку из текстового поля и передает ее функции set_phrase (код функций находится в области заголовка Web-страницы). Данная функция добавляет к строке начинающие и замыкающие символы точек, чтобы можно было отделить окончание одной строки от начала следующей в строке состояния. Далее следует вызов функции set_status. Функция set_status работает так.

  1. С помощью метода substring первый символ извлекается из строки и перемещается в ее конец.
  2. Полученная строка передается в строку состояния командой self.status = phrase;.
  3. Вновь происходит выход функции set_status с установкой таймера 100 мс. Таймер присваивается переменной timerID.

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

Вторая кнопка, Остановить бегущую строку, прекращает рекурсию функции set_status путем очистки таймера. Для этого для переменной таймера timerID вызывается метод clearTimeout.

Управление графическими объектами

Рисунки на Web-страницы можно добавлять несколькими способами:

  • с помощью дескриптора <IMG>;
  • с помощью дескриптора <OBJECT>;
  • с помощью конструктора графического объекта Image.

Конструктор графических объектов

Объект графического изображения, так же, как другие объекты, создается с помощью ключевого слова new и конструктора графических объектов Image():

MyImage = new Image(ширина, высота);

Ширина и высота изображения в пикселях задаются целочисленными значениями. Но эти аргумента необязательны и могут быть пропущены. В этом случае создается пустой объект графического изображения. Далее следует связать с этим объектом выбранный графический файл:

MyImage.src = "myimage.jpg"

Как и в случае с дескриптором <IMG>, графический файл рисунка устанавливается в свойстве src. Объект изображения имеет еще одно весьма полезное свойство — complete. Это свойство принимает значение true после завершения выгрузки изображения на Web-страницу.

Еще одно отличие графического объекта, созданного с помощью конструктора, от объекта, добавленного в коде HTML. Каждый рисунок, добавленный с помощью дескриптора <IMG>, автоматически становится элементом стандартного массива image. Так, к первому рисунку на странице можно обратиться следующим образом: document.image[0]. Объекты, созданные в сценариях, не становятся элементами массива images. Но мы можем создать пользовательский массив графических объектов:

pic0 = new Image();
pic0.src = 'reddart.gif';
pic1 = new Image();
pic1.src = 'bluedart.gif';
…
// Создаем массив рисунков
picA = new Array(pic0,pic1,pic2,pic3,...);

Воспользуемся массивом графических изображений для создания простейшего эффекта анимации. Поместим на Web-страницу ряд цветных картинок, которые будут двигаться по направлению справа налево. Для этого введем следующий код:


<html>
<head>
  <title>Гирлянда</title>
<SCRIPT>
// загрузка рисунками массива picA
function loadimages() {
    pic0 = new Image();
    pic0.src = 'images\\reddart.gif';
    pic1 = new Image();
    pic1.src = 'images\\bluedart.gif';
    pic2 = new Image();
    pic2.src = 'images\\grndart.gif';
    pic3 = new Image();
    pic3.src = 'images\\yelldart.gif';
    picA = new Array(pic0,pic1,pic2,pic3);
}
// программа анимации

function animate() {
    // сброс текущего таймера
    if (going)
        clearTimeout(timer);
    for (loop=0;loop<4;loop++) {
        index = (index<3) ? ++index : 0;
        document.images[index].src = picA[loop].src;
    }
    index--;
    timer = setTimeout("animate()",200);
}
// Все функции приостанавливаются, пока не будет
// загружен на Web-страницу последний рисунок
function checkload() {
    if (pic3.complete == false)
        timer = setTimeout("checkload()",100);
}
</SCRIPT>
</head>
<body>
<SCRIPT>
loadimages();
index = 0;
going = false;
timer = null;
checkload();
</SCRIPT>
<p><img src='images\reddart.gif' />
<img src='images\yelldart.gif' />
<img src='images\grndart.gif' />
<img src='images\bluedart.gif' />
</p>
<form>
<input type='button' value='Включить' onclick="going = true; animate();" />
<input type='button' value='Выключить' onclick="clearTimeout(timer);" />
</form>
</body>
</html>

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

Результат выполнения сценария:

Четыре разные картинки в окне обозревателя постоянно сменяют друг друга в направлении справа налево. Бесконечное чередование стрелок обеспечивается следующим циклом в теле функции animate:

for (loop=0;loop<4;loop++) {
    index = (index<3) ? ++index : 0;
    document.images[index].src = picA[loop].src;
}
index--;

Переменная index определяет элементы стандартного массива images, тогда как переменная loop используется в качестве индекса массива графических объектов picA, созданного ранее в функции loadimages. В строке document.images[index].src = picA[loop].src; происходит копирование графического объекта из массива picA в элемент массива images, представленного соответствующим дескриптором <IMG> в коде HTML. В результате графический объект становится видимым в окне обозревателя в том месте, где в коде HTML находится соответствующий дескриптор <IMG>. Благодаря строке кода index = (index<3) ? ++index : 0; графические объекты выносятся на экран последовательно. В самом деле, значение переменной index увеличивается на единицу при каждом выполнении цикла, пока не достигнет значения 3, после чего index принимает значение 0. Таким образом, index может быть равным 0, 1, 2, 3. благодаря оператору index-- за телом цикла при каждом новом вызове функции animate начальное значение переменной index смещается с шагом в единицу.

Вам может быть не понятно, зачем понадобился сброс таймера:

if (going)
    clearTimeout(timer);

в начале функции animate. Если вы удалите эти строки, то увидите странный эффект: каждый раз после щелчка на кнопке Включить скорость мигания картинок будет возрастать вдвое. Дело в том, что если не сбросить текущий таймер, то вызов функции animate щелчком на кнопке будет запускать параллельный процесс, в результате чего скорость анимации удвоится. Чтобы остановить анимацию, вам придется затем столько же раз щелкнуть на кнопке Выключить. Впрочем, получится довольно интересный эффект, который может пригодится вам на практике.

Обратите внимание на функцию checkload, которая проверяет, был ли загружен на Web-страницу последний графический объект. При испытании сценария на своем компьютере эта функция не имеет значение. Но на реальной Web-странице отсутствие проверки может привести к ошибке из-за того, что сценарий обратится к графическому объекту, которого на странице пока еще нет, поскольку он не успел выгрузится по медленной сети.


<<назад

Погода в Рудне
(Волгоградcкая обл.)

Подробнее >>


Курс валют
на 23 Апр 2024 г.
704 - Вьетнамских донгов
- 1