разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Анимационные эффекты на веб-странице можно создать с помощью сценариев и графических изображений. Эффект может быть усилен, если графическое изображение уже является анимационным. Такие изображения сохраняются в анимационных gif-файлах.

Схема сценария, осуществляющего непрерывное перемещение видимого элемента документа, имеет следующий вид:

function mentmove() { // инициализация движения

// подготовка к запуску функции move()

setInterval("move()", задержка)
}

function move(){

. . . /* изменение координат top и left стиля перемещаемого элемента */

}

mentmove() // вызов функции для перемещения элемента

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

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

Рассмотрим пример организации движения видимого элемента по произвольной кривой, заданной выражениями с одной переменной. Первое выражение описывает изменение вертикальной координаты элемента, а второе – горизонтальной. Эти выражения будут содержать одну переменную, которую мы обозначим через х – строчной латинской буквой. Переменную х можно интерпретировать как независимый параметр движения(например время). С помощью встроенной функции eval() можно вычмслить значения этих выражений при конкретном значении переменной х и присвоить их стилевым параметрам top и left перемещающего элемента. Функция move(), котрая все это выполняет, передается в качестве первого параметра методу setInterval(), периодически вызывающему ее через заданный интервал времени.

Функция инициализации движения mentmove будет принимать три строковых и один числовой параметр. Строковые параметры содержат соответственно значение идентификатора id перемещаемого элемента, выражения для вертикальной координаты и выражение для горизонтальной координаты. Числовой параметр определяет период времени, через который координаты элемента пересчитываются. Вид кривой зависит от выражений, задающих характер изменения вертикальной и горизонтальной координат. Вот код функции движения по произвольной кривой.

Переменная х в функции mentmove() является глобальной и поэтому доступна в функции move(). Чтобы сделать переменную х глобальной, мы просто не использовали ключевое слово var перед первым ее появлением в коде.
Исходное позиционирование перемещаемого элемента с помощью таблицы стилей не играет особой роли, поскольку при вызове функции mentmove() элемент помещается в точку с координатами, равными значениям выражений хехрr и уехрr, вычисленным при х = 0. Поэтому начальное позиционирование следует задавать с помощью соответствующего выбора этих выражений.

Вот алгоритм выражения хехрr и уехрr при движении элемента по:

• Прямой линии:
  уехрr="a*x+y0" ;
  хехрr="b*x+x0" ;

• Синусоиде(волнистой линии):
  уехрr="A*Math.sin(w*x+f)" ;
  хехрr="x" ;

• Эллипсу(овалу):
  уехрr="A*Math.sin(w*x+f)" ;
  хехрr="B*Math.cos(w*x+f)" ;
  
  где A,B,w, f – числовые коэффициенты.
  При А=В эллипс превращается в круг.
  

Рассмотрим пример перемещения изображения по синусоиде с амплитудой 50 пикселей и горизонтальной скоростью 10 пикселей в секунду. Начальные координаты графического объекта равны 100 и 50 пикселей по вертикали и горизонтали соответственно.

В окне веб-браузера это будет выглядеть ТАК.