Создание анимационных изображений
В следующем примере мы покажем, как с помощью динамической смены растровых графических изображений в сценарии JavaScript можно получить эффект анимации.
На рис. 5.2 мы показали документ HTML, в котором используется такая анимация.
Рис. 5.2. Анимация с помощью сценария JavaScript
В окне браузера последовательно отображаются кадры анимационного изображения (рис. 5.3), причем сначала в прямой, а затем - в обратной последовательности. Это выглядит так, как будто слово Noise периодически тонет в цветном шуме и затем проявляется вновь. Заметим, что похожий эффект мы уже получали совершенно другими средствами в аплете Java, исходный текст которого был опубликован в журнале “Мир ПК” №1 за 1998 год.
 |  |  |  | ||||
 |  |  |  | ||||
 |  |  |  | ||||
 | |  |  | ||||
 |  |
Рис. 5.3. Изображения отдельных кадров анимационной последовательности
Также мы обратим ваше внимание, что для достижения подобного эффекта при помощи многосекционного файла GIF размер этого файла было бы необходимо удвоить. Причина этого заключается в том, что вам пришлось бы включить в файл кадры вначале в прямой, а затем в обратной последовательности. Сценарий JavaScript позволяет более тонко управлять процессом отображения кадров, что можно использовать для достижения достаточно сложных визуальных эффектов относительно простыми средствами.
Исходный текст документа HTML, в котором имеется сценарий, выполняющий анимацию, показан в листинге 5.2.
Листинг 5.2. Файл chapter5/noise/noise.html
<HTML>
<HEAD>
<TITLE>Animation with JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1;
var bForward=true;
function showNextImage()
{
if(bForward)
{
i++;
if(i>17)
{
bForward=false;
}
}
else
{
i--;
if(i<2)
{
bForward=true;
}
}
document.Img.src= "img0" + i + ".gif";
setTimeout("showNextImage()", 100);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<IMG SRC="img01.gif" NAME="Img">
<SCRIPT LANGUAGE="JavaScript">
<!--
showNextImage();
// -->
</SCRIPT>
</BODY>
</HTML>
В теле документа с помощью оператора <IMG> мы разместили первый кадр анимационной последовательности:
<IMG SRC="img01.gif" NAME="Img">
С помощью параметра NAME мы задали имя Img. Это имя будет использовано сценарием JavaScript для ссылки на объект.
Кроме того, в теле нашего документа находится вызов функции showNextImage. Данная функция предназначена для отображения очередного кадра анимационной последовательности.
В области заголовка документа HTML находится определение функции showNextImage и двух глобальных переменных:
var i=1;
var bForward=true;
Переменная i хранит номер текущего кадра, отображаемого в окне браузера. Этот номер вначале увеличивается функцией showNextImage от 1 до 16, а затем снова уменьшается до 1. Изменение номера происходит на 1 (в ту или в другую сторону) при каждом вызове функции showNextImage.
В переменной bForward хранится направление изменения номера кадра. Значение true соответствует прямому направлению, а значение false - обратному.
Когда функция showNextImage получает управление, она анализирует содержимое переменной bForward. Если в этой переменной находится значение true, функция showNextImage увеличивает значение переменной i, а затем сравнивает результат с числом 17. Когда отображение всех кадров в прямой последовательности завершено, в переменную bForward записывается false, после чего при следующем вызове функции showNextImage номер текущего кадра будет не увеличиваться, а уменьшаться.
Для отображения очередного кадра функция showNextImage изменяет значение свойства src изображения document.Img, как это показано ниже:
document.Img.src= "img0" + i + ".gif";
Имя файла, в котором хранится изображение кадра, конструируется из строки “img0”, номера кадра, и строки “.gif”.
Последнее, что делает функция showNextImage перед тем как возвратить управление, - вызывает функцию setTimeout:
setTimeout("showNextImage()", 100);
Напомним, что функция setTimeout устанавливает таймер. Задержка срабатывания таймера определяется вторым параметром и в нашем случае равна 100 миллисекундам.
Когда таймер сработает, будет запущена на выполнение строка сценария JavaScript, которая была передана функции setTimeout в качестве первого параметра. Мы вызываем после окончания задержки функцию showNextImage, и таким образом обеспечиваем вызов этой функции в бесконечном цикле.
