Онлайн учебник по HTML и JAVASCRIPT

Элементы языков HTML и JAVASCRIPT

Анимационные эффекты на Web-странице

Анимационные эффекты на Web-странице можно создать и средствами HTML совместно со скриптами. Конечно, самым эффективным средством создания анимации для Web является программа Flash. Однако кое-что можно сделать с помощью динамического HTML, т. е. HTML совместно со скриптами и CSS (каскадными таблицами стилей).

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

Ниже мы приводим код, который перемещает картинку из файла pict.gif на некоторе количество пикселов по вертикали и горизонтали, если вы сделали на ней щелчок кнопкой мыши.

<HTML>
<IMG id="myimage" SRC = "openl.gif" STYLE="position:
absolute;
lop:10;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("myimage").style.top=parselnt(document.all
("myimage").style.top)+10; document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}

</SCRIPT>
</HTML>

Здесь функция move () переопределяет координаты картинки. Мы использовали функцию parseInt () для преобразования строковых значений параметров стиля в числовые, чтобы корректно выполнить арифметические операции.

Теперь модифицируем рассмотренный выше пример так, чтобы картинка при щелчке кнопкой мыши на ней начинала двигаться без остановки. Для этого нам потребуется метод setInterval (). Напомним, что это — метод объекта window. Он принимает два параметра: функцию, которую следует периодически запускать и период в милисекундах, через который ее нужно запускать. В примере мы намерены запускать функцию move () через 0, I с. Вот код данного примера:

<HTML>
<IMG id="myimage" SRC="openl.gif" STYLE="position:
absolute; top:iO;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("rayimage").style.top=parselnt
(document.all("myimage").style.top)+10; document.all
("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
setlnterval ("move ()",100);
// периодический вызов функции move()
}
</SCRIPT>
</HTML>

Ниже приведен аналогичный пример, но отличающийся от рассмотренного выше тем, что картинка начинает перемешаться сразу после загрузки HTML-документа, не дожидаясь щелчка.

<HTML>
<IMG id="myimage" SRC = "openl.gif " STYLE="position : absolute; top:10;left:50">
<SCRIPT>
function move()
{
document. all ("myimage").style.top=parselnt
(docurrent. all ("myimage").style.top)+10;
document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}
setlnterval("move()",100);
// периодический вызов функции move()
</SCRIPT>
</HTML>

В этом примере метод setlnterval () находится вне определения функции move () , поэтому он начнет выполняться сразу же после загрузки страницы в браузер.

Очевидно, в рассмотренных выше примерах картинка, начав движение, со временем исчезнет из поля зрения (уйдет за границы окна браузера). Чтобы это не произошло, следует использовать замкнутые траектории движения, которые мы рассмотрим в следующем примере.

В рассматриваемом ниже примере картинка перемещается по эллиптической траектории. Вместо картинки вы можете заставить двигаться любой другой видимый элемент страницы. Эллипс — это замкнутая кривая, овал. Частными случаями эллипса являются окружность и отрезок прямой линии. Особенность данного примера состоит в том, что функция, обеспечивающая движение элемента по эллипсу, универсальна, т. е. не зависит от того, что именно должно двигаться по эллиптической траектории. Кроме того, мы разместили описание этой функции в отдельном текстовом файле с расширением js. Предполагается, что текстовые файлы с таким расширением содержат скрипты, написанные на языке JavaScript. В нашем примере этот файл имеет имя ellipse.js. Поскольку этот скрипт достаточно универсален, вы можете использовать его в своих разработках.

Файл ellipse.js

//Движение по эллипсу
// Параметры:
// objnamel - id движущегося объекта, заданного тегом; строка;
// alphal - угол поворота эллипса, градусы;
// al - большая полуось эллипса, пикселы;
// b1 - малая полуось эллипса, пикселы;
// omegal - угловая скорость, град/с;
знак задает направление вращения;
// х01 - х-координата центра эллипса, пикселы;
// у01 - у-координата центра эллипса, пикселы;
// ztimel - начальная фаза на эллипсе, градусы;
// dtl - временная задержка, секунды.
•function ellipse
(objnamel, alphal, al,bl, omegal, xOl , yOl, ztimel, dtl)
// проверка наличия параметров if
(alphal==null) alphal=0; if (al==null)
al = 0; if (bl==null)
bl = 0;
if (omegal==null)
A omegal=0;
if (x01==null)
x01=0; if (y01==null)
y01=0; if (ztimel==null)
ztimel=0; if (dtl==null)
dtl=0; t=-ztimel;
// чтобы начальное значение было О,
// поскольку в move() уже есть приращение
// Многократный вызов функции move()
с интервалом ztime в секундах: setlnterval
("move('"+objnamel+"',"+alphal + "," + al + "," + b1 + ",
+ omegal + "," + xOl + "," + yOl + ","
+ ztimel + "," + dtl ") ", ztimel*1000)
// Пересчет координат, вызывается из ellipse ()
function move
(objname2 ,alpha2,a2,b2, omega 2 ,x02,y02,ztime2,dt2)
t = t-H2time2;
// x,y - координаты в собственной системе координат
x=a2*Math. cos ( (ornega2* t + dt2) *Math. PI/180) ;
y=b2*Math.sin((omega2*t Kit2)*Math.PI/180) ;
as=Math.sin(alpha2*Math.PI/180) ;
ac=Math.cos(alpha2*Math.PI/180) ;
document.all(objname2) .style.top=-x*as+y*ac+y02
document.all(objname2).style.left=x*ac+y*as+x02

Параметр функции objname определяет идентификатор (значение id) элемента страницы, который должен двигаться по эллиптической траектории. Смысл остальных параметров можно понять из следующего рисунка:

Координаты top и left — вертикальная и горизонтальная экранные координаты. Если а = b (большая и малая полуоси эллипса равны), то эллипс превращается в окружность. Если а = 0 или b = 0, то эллипс вырождается в отрезок. Обратите внимание, как используются математические (тригонометрические) функции. Эти функции суть методы объекта Math.

Анимационные эффекты на Web-странице

Рис. 863. Параметры движения по эллиптической траектории

Собственно перемещение элемента обеспечивается периодическим вызовом вспомогательной функции move (), которая вычисляет новые координаты элемента. Чтобы вызывать эту функцию периодически (с заданной временной задержкой), мы использовали метод setlnterval () объекта window.

Вот HTML-код, в котором определяется перемещаемый элемент (картинка из файла pict.gif), загружается файл ellipse.js со скриптом, описывающим функцию ellipse (), и вызывается функция ellipse ():

<HTML>
<! Объект, который будет двигаться >
<IMG ID="pl" SRC = "pict.gif" STYLE =
"position:absolute;top:300;left:190">
<! Загружаем скрипт из файла с описанием функции ellipse (),
ss которая перемещает объект>
<SCRIPT SRC = "ellipse js"x/script>
<! Вызываем функцию ellipseO >
<SCRIPT>
ellipse("pi",60,100,30,10,170,300,0.2,0)
</SCRIPT>
</HTML>

Особенность данного примера состоит в том, что перемещаемый объект (в нашем случае — картинка) должен быть определен прежде загрузки скрипта и вызова функции, обеспечивающей движение.