| |
howNextImage и двух глобальных переменных:
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, и таким
образом обеспечиваем вызов этой функции в бесконечном цикле.
Ожидание загрузки всех изображений
Если вы собираетесь разместить в своем документе HTML анимационное
изображение, состоящее из отдельных кадров, которые, в свою очередь,
расположены в отдельных файлах, возникает одна проблема. Она связана с
непредсказуемостью времени загрузки всех изображений анимационной
последовательности через медленный и нестабильный канал Internet.
Чтобы анимационное изображение было показано без искажений, необходимо
вначале дождаться завершения процесса загрузки файлов отдельных кадров, и лишь
затем запускать анимацию.
В листинге 5.3 мы привели исходный текст документа HTML со сценарием,
который работает подобным образом.
Листинг 5.3. Файл chapter5/noise/noise2.html
Animation with JavaScript
В теле документа HTML расположен сценарий, вызывающий последовательно
функции loadAllImages и showNextImage:
loadAllImages(nNumberOfImages);
showNextImage();
Функции loadAllImages в качестве параметра передается общее количество
изображений в анимационной последовательности. В нашем случае оно равно 18.
Задача функции loadAllImages заключается в заполнении массива объектов
класса Image. Этот массив определен в области заголовка нашего документа HTML:
var imgArray = new Array(18);
Заполнение массива выполняется в цикле:
var i;
for(i=0; i
|
|
