Покадровая анимация

Перемещение элемента и изменение его размера

Для перемещения элемента страницы необходимо, чтобы он был абсолютно позиционирован, т.е. значение свойства стиля position должно быть absolute.

У абсолютно позиционированного элемента можно изменять значения свойств top и left, задающие координаты левого верхнего угла элемента.

Так, элемент animDiv задан как абсолютно позиционированный элемент:

<div id="animDiv" style="top: 80px; left: 0px;

width: 30px; position: absolute">

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

currentLeft =

document.getElementById("animDiv").style.left;

вернет значение "0px".

Чтобы использовать эту строку в числовых выражениях необходимо убрать суффикс "px" (для этого можно использовать метод parseInt()), например

currentLeft =

parseInt(document.getElementById("animDiv").style.left);

currentLeft += dx;

При изменении значения свойства необходимо, наоборот, добавить к числовому значению суффикс "px":

document.getElementById("animDiv").style.left =

currentLeft + "px";

Так как и для окон, необходимо отслеживать границы перемещения элементов.

Аналогичным образом, изменяя свойства стиля width и height, можно модифицировать размеры абсолютно позиционированных элементов.

 

Пример 4.5.67. Перемещение элемента:

1. Использование свойств top и left для анимации:

Просмотр примера: Example4-5-67-1.html

Текст документа HTML: Example4-5-67-1

 

2. Использование свойств width и height для анимации:

Просмотр примера: Example4-5-67-2.html

Текст документа HTML: Example4-5-67-2

Для создания анимации часто используют несколько кадров, запечатлевших разные фазы движения.

Поскольку для показа анимации необходимы все кадры, а загрузка изображений с Web-сайта может занять много времени, необходимо предварительно загрузить все изображения на Web-страницу. Так, функция загрузки в Web-страницу в массив шести изображений image0.gif, image1.gif, image2.gif, image3.gif, image4.gif и image5.gif может иметь следующий вид:

function preloadImages()

{

// Создание пустого массива изображений

imageArray = new Array();

// Создание массива изображений в цикле

for (var i = 0; i < 6; i++)

{

 

imageArray[i] = document.createElement("img");

imageArray[i].src = "image" + i + ".gif";

}

}

Если в документе HTML создан элемент img со значением id, равным "animImage", и с начальным значением атрибута src, равным "image0.gif" ,то загрузка в этот элемент следующего изображения из массива выполняется с помощью следующих предложений (начальное значение переменной counter равно 0):

// Загрузка очередного изображения

document.getElementById("animDelphins").src =

imageArray[counter].src;

// Увеличение индекса изображения на 1

counter++;

Интервал между сменой изображений задается с помощью методов setInterval() или setTimeout().

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

Для элемента img со значением id, равным "animFrame", и со значением атрибута src, равным URL изображения, предложения показа текущего кадра имеют следующий вид (frameLeft – левая граница кадра с начальным значением равным 0, frameWidth – ширина кадра):

// Установка текущего кадра

document.getElementById("animFrame").style.left =

"-" + frameLeft + "px";

// Установка новой левой границы кадра

frameLeft += frameWidth;

 

Пример 4.5.68. Использование покадровой анимации:

1. Анимация с помощью массива изображений

Просмотр примера: Example4-5-68-1.html

Текст документа HTML: Example4-5-68-1

 

2. Покадровый вывод изображения

Просмотр примера: Example4-5-68-2.html

Текст документа HTML: Example4-5-68-2