Иллюстрированный самоучитель по WEB-графике


Примеры скриптов - часть 7


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

В рассматриваемом ниже примере картинка перемещается по эллиптической траектории. Вместо картинки вы можете заставить двигаться любой другой видимый элемент страницы. Эллипс — это замкнутая кривая, овал. Частными случаями эллипса являются окружность и отрезок прямой линии. Особенность данного примера состоит в том, что функция, обеспечивающая движение элемента по эллипсу, универсальна, т. е. не зависит от того, что именно должно двигаться по эллиптической траектории. Кроме того, мы разместили описание этой функции в отдельном текстовом файле с расширением 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()



Начало  Назад  Вперед