Лекция: Анимация с использованием JavaScript

JavaScript позволяет менять картинки автоматически с заданной частотой. Получается некое подобие анимации. Мы рассмотрим непрерывную смену картинок. Итак, сначала объявляем массив изображений для шести картинок:

img_a=new Array()

img_a[0]=new Image()

img_a[1]=new Image()

img_a[2]=new Image()

img_a[3]=new Image()

img_a[4]=new Image()

img_a[5]=new Image()

Теперь этот массив надо заполнить. Присвоим каждому его элементу имя файла с изображением.

img_a[0].src=«PreView/11.jpg»

img_a[1].src=«PreView/12.jpg»

img_a[2].src=«PreView/13.jpg»

img_a[3].src=«PreView/21.jpg»

img_a[4].src=«PreView/22.jpg»

img_a[5].src=«PreView/23.jpg»

Описываем функцию последовательной смены фотографий:

function img_b()

{

document.images[1].src=img_a[i].src

i++

if(i>5) i=0;

setTimeout(«img_b()», 1000)

}

Функция непрерывно увеличивает значение переменно i на единицу. Затем выполняется проверка, чтобы значение переменной не превысило количества наших картинок. Для задания интервала мелькания кадров используется функция setTimeout. Частота мелькания выставляется в миллисекундах. В нашем случае она равна одной секунде.

Описываем тело самого нашего HTML-документа, в котором будет меняться картинка. Выведем на экран три фотографии. Первая и третья будут оставаться неизменными. Меняться изображения будут во второй картинке. Каждое изображение на web-странице имеет порядковый номер: первое изображение получает номер 0, второе — номер 1 и т.д. Таким образом, к первому изображению мы обращаемся, записав document.images[0], ко второму: document.images[1], и к третьему: document.images[2]. Поэтому в описании нашей функции мы записали document.images[1].src=img_a[i].src. Что означает, что элементы массива изображений будут выводиться во втором объекте имидж HTML-документа. Вызов функции будет помещен в теге <body>. Весь код страницы будет выглядеть следующим образом:

<html>

<head>

<title>Анимация и JavaScript</title>

<!—

i=0;

img_a=new Array(); // Объявляется массив

img_a[0]=new Image();

img_a[1]=new Image();

img_a[2]=new Image();

img_a[3]=new Image();

img_a[4]=new Image();

img_a[5]=new Image();

img_a[0].src=«11.jpg»; // Каждому элементу

img_a[1].src=«12.jpg»; // массива присваивается

img_a[2].src=«13.jpg»; // конкретная картинка

img_a[3].src=«21.jpg»;

img_a[4].src=«22.jpg»;

img_a[5].src=«23.jpg»;

function img_b() // описывается функция последовательного

// вывода картинок

{

document.images[1].src=img_a[i].src;

i++;

if(i>5) i=0;

setTimeout(«img_b()», 1000); // Тут задается в миллисекундах

// частота мелькания кадров.

// В данном случае кадры

// меняются каждую секунду

}

//-->

</SCRIPT>

</head>

</body>

</html>

Картинки начнут меняться, только после того, как загрузятся все элементы массива. Поэтому для анимации нужно подбирать небольшие по объему изображения.

Порядок выполнение работы

1. С помощью тестового редактора, используя программные средства JavaScript разработать Web-страницы для расчета математических функций и выражений по вариантам представленных в Приложении Б.

2. Web-страницы должны содержать элементы интерактивного взаимодействия с пользователем.

3. Web-страницы должны быть оформлены в одном стиле и содержать в себе анимированные вставки.

Содержание отчета

1. Титульный лист.

2. Цели и задачи лабораторной работы.

3. Задание на лабораторную работу.

4. Результаты выполненной работы.

Контрольные вопросы

1. На базе каких языков разработан JavaScript?

2. Дайте определение понятию функции в JavaScript.

3. Какие методы для создания окон используются в JavaScript?

4. Что такое динамическое создание документов?