Покадровая анимация
Перемещение элемента и изменение его размера
Для перемещения элемента страницы необходимо, чтобы он был абсолютно позиционирован, т.е. значение свойства стиля 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