Перемещение элементов

Движение описывается математическими функциями, которые определяют изменение координат в ответ на изменение каких-то параметров. Звучит страшно? Хорошо, перефразирую иначе. Если мы будет вычислять x и y, используя математические функции, мы реализуем движение по какой-либо траектории. Всё равно не понятно? Посмотрим позже на примере.

А сейчас познакомимся с полярной системой координат.

Полярная система координат

Положение точки на плоскости можно определить с помощью полярной системы координат.

На плоскости выбираем некоторую точку O, называемую полюсом, и выходящий из этой точки луч, называемый полярной осью. Положение некой точки M на плоскости можно определить радиус-вектором ρ, выражающим расстояние от точки до полюса, и углом φ — величиной угла, образованного отрезком OM с полярной осью.

Если полюс совпадает с началом прямоугольных (декартовых) координат, а полярная ось — с положительным направлением оси ординат, то преобразование координат ведётся по формулам

x = ρ cos φ, y = ρ sin φ.

Основы перемещения элементов

Если задать элементу абсолютное или относительное позиционирование (Веб-дизайн, глава №28) и изменять его координаты top, left, bottom, right с течением времени, элемент будет двигаться. Для примеров в уроке мы будем использовать в основном относительное позиционирование, но для реального проекта естественней использовать абсолютное.

Движение по прямой

Простейшее движение по прямой описывается в полярных координат как φ = α, где α — угол наклона прямой, что намного проще традиционного x:y = ctg α;

Просто создадим функцию, которая будем перемещать объект под углом в 30° и будем вызывать её несколько раз в секунду.

<span id="move-me-1" style="position: relative; border: 1px dashed black;">Я двигаюсь!</span>

Вот как будет выглядеть приведённый код в обозревателе:

Я двигаюсь!

var phi = Math.PI / 6; // Устанавливаем угол в -30°.

var rho = 0; // Начальное значение радиус-вектора ρ.

var rhoOffset = 0.5; // Приращение радиус-вектора ρ.

function moveByLine() { // Объявляем функцию.

document.getElementById('move-me-1').style.left = rho * Math.cos(phi) + 'px'; // Вычисляем координату по оси ординат.

document.getElementById('move-me-1').style.top = rho * Math.sin(phi) + 'px'; // Вычисляем координату по оси абцисс.

rho += rhoOffset; // Приращиваем радиус-вектор ρ.

}

setInterval(moveByLine, 20); // Запускаем функцию.

Вы можете посмотреть, как же выполнится приведённый код.

Движение по окружности

Движение по окружности описывается в полярных координат как ρ = a, где a — радиус окружности. В декартовых координатах уравнение задаётся как x² + y² = R².

Создадим функцию, которая будем перемещать объект по окружности радиусом в 150 пик­се­лей и будем вызывать её несколько раз в секунду.

<span id="move-me-2" style="position: relative; border: 1px dashed black;">Я двигаюсь!</span>

Вот как будет выглядеть приведённый код в обозревателе:

Я двигаюсь!

var rho = 150; // Устанавливаем радиус окружности.

var phi = 0; // Начальное значение угла φ.

var phiOffset = Math.PI / 180 * 1.5; // Приращение угла φ составит 1½°.

function moveByCircle() { // Объявляем функцию.

document.getElementById('move-me-2').style.left = rho * Math.cos(phi) + 'px'; // Вычисляем координату по оси ординат.

document.getElementById('move-me-2').style.top = rho * Math.sin(phi) + 'px'; // Вычисляем координату по оси абцисс.

phi += phiOffset; // Приращиваем угол φ.

}

setInterval(moveByCircle, 20); // Запускаем функцию.

Вы можете посмотреть, как же выполнится приведённый код.

Давайте сместим центр нашей окружности.

<span id="move-me-3" style="position: relative; border: 1px dashed black;">Я двигаюсь!</span>

Вот как будет выглядеть приведённый код в обозревателе:

Я двигаюсь!

var rho = 150; // Устанавливаем радиус окружности.

var phi = 0; // Начальное значение угла φ.

var phiOffset = Math.PI / 180 * 1.5; // Приращение угла φ составит 1½°.

var xOffset = 150; // Горизонтальное смещение.

var yOffset = 25; // Вертикальное смещение.

function moveByCircle() { // Объявляем функцию.

document.getElementById('move-me-3').style.left = rho * Math.cos(phi) + xOffset + 'px'; // Вычисляем координату по оси ординат.

document.getElementById('move-me-3').style.top = rho * Math.sin(phi) + yOffset + 'px'; // Вычисляем координату по оси абцисс.

phi += phiOffset; // Приращиваем угол φ.

}

setInterval(moveByCircle, 20); // Запускаем функцию.

Вы можете посмотреть, как же выполнится приведённый код.

Движение исключительно в пределах окна

При движении по прямой элемент уходит за пределы окна. Если мы будем проверять соотношение между размерами элемента, его координатами и размерами окна, то сможем предусмотреть такое развитие событий.

У любого элемента есть свойства offsetWidth и offsetHeight, которые хранят ширину и высоту элемента в пикселах соответственно, и свойства offsetTop и offsetLeft, в которых хранится расстояние в пикселах от верхнего и левого края родительского элемента соответственно. У элементов с «overflow: scroll;» и «overflow: auto;» есть свойства clientWidth и clientHeight, определяющие видимую область элемента без полос прокрутки (то есть, для ‹body› они определяют ширину и высоту рабочей области окна соответственно).

Устроим проверку.

<body id="body">

<span id="move-me" style="position: absolute; border: 1px dashed black;">Я двигаюсь!</span>

<script type="text/javascript">

var phi = Math.PI / 6; // Устанавливаем угол в -30°.

var rho = 0; // Начальное значение радиус-вектора ρ.

var rhoOffset = 0.5; // Приращение радиус-вектора ρ.

function moveByLine() { // Объявляем функцию.

document.getElementById('move-me').style.left = rho * Math.cos(phi) + 'px'; // Вычисляем координату по оси ординат.

document.getElementById('move-me').style.top = rho * Math.sin(phi) + 'px'; // Вычисляем координату по оси абцисс.

rho += rhoOffset; // Приращиваем радиус-вектор ρ.

// Проверяем, не выходит ли элемент за пределы ‹body›.

if ((document.getElementById('move-me').offsetLeft + document.getElementById('move-me').offsetWidth >= document.getElementById('body').clientWidth) ||

(document.getElementById('move-me').offsetTop + document.getElementById('move-me').offsetHeight >= document.getElementById('body').clientHeight))

clearInterval(moveInterval); // Отменим интервал.

}

var moveInterval = setInterval(moveByLine, 20); // Сохраняем интервал в переменной.

</script>

</body>

Вы можете просмотреть, как же будет выглядеть приведённый код в обозревателе.

Практическое задание №2

Реализуйте эффект «отскакивающего мячика». То есть, движущийся элемент должен «отскакивать» от границ ‹body›.

Замечания. При «отскакивании» угол меняется на π-α, что проиллюстрировано рисунком справа. Удобно реализовать новую функцию движения путём смещения полюса в точку удара и пересчёта φ по формуле выше.

Слайд-шоу

Для слайд-шоу нам необходимо время от времени сменять изображения.

Смена картинок

Смена картинок заключается в простой смене атрибута src, отвечающего за URI показываемого изображения.

Для получения значения атрибута используется метод «getAttribute(имяАтрибута)». Для установки атрибута используется метод «setAttribute(имяАтрибута, новоеЗначениеАтрибута)». Для удаления атрибута используется метод «removeAttribute(имяАтрибута)».

Итак, если мы будем периодически сменять атрибут src элемента ‹img /›, то получим слайд-шоу. Пути к картинкам неплохо сохранить в массиве.

<div style="text-align: center;">

<h3 style="margin-top: 0;">Слайд-шоу</h3>

<img id="slide" src="./images/15-1.jpeg" alt="Фотография: спортсмены на беговой дорожке." />

</div>

Вот как будет выглядеть приведённый код в обозревателе:

Слайд-шоу

var URIs = new Array('./images/15-1.jpeg', './images/15-2.jpeg', './images/15-3.jpeg', './images/15-4.jpeg'); // Сохраняем пути в массиве.

var currentImage = 1; // Сохраняем пути в массиве.

function slideShow() { // Определяем функцию.

if (currentImage >= URIs.length) // Не вышел ли счётчик за пределы массива.

currentImage = 0; // Обнуляем счётчик.

document.getElementById('slide').setAttribute('src', URIs[currentImage]); // Меняем картинку.

currentImage++; // Увеличиваем счётчик.

}

setInterval(slideShow, 2500);

Вы можете посмотреть, как же выполнится приведённый код.

Функция вроде бы проста. Единственный нюанс, на который стоит обратить внимание, заключается в бесконечном переборе элементов массива. Как только наш счётчик выходит за пределы длины массива, мы его обнуляем и начинает работу с массивом с самого начала.

Практическое задание №3

Мы перебираем массив последовательно, то есть после первого «слайда» всегда будет идти второй, после второго — третий и так далее. Ваша задача — отображать фото­графии в произ­вольном порядке. Но при этом между любыми повторениями должно быть хотя бы одно альтер­нативное изображение. (Другими словами, изображения a, b, c, d могут идти как a, c, a, c, b, d, но не как a, a, c, c, d, b, то есть не допускайте повторений двух фотографий подряд.)

Задание:

Вариант №1.

1. Организовать движение какой-нибудь строки, по траектории: y=sin(x²)+cos(x²). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – зеленый; в левом верхнем углу находится треугольник (красный); посредине экрана закрашенный прямоугольник (синий); из треугольника летит коричневый закрашенный шарик, отскакивает от прямоугольника и летит в левый нижний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №2.

1. Организовать движение какой-нибудь строки, по траектории: y=sin(x)*cos(x). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – белый; в левом верхнем углу находится треугольник (зеленый); посредине экрана закрашенный прямоугольник (красно-синий); из треугольника летит красный закрашенный шарик, отскакивает от прямоугольника и летит в правый верхний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №3.

1. Организовать движение какой-нибудь строки, по траектории: y=tan(x)+cos(x²). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – желтый; в правом верхнем углу находится треугольник (зеленый); посредине экрана закрашенный прямоугольник (синий); из треугольника летит темно-серый закрашенный шарик, отскакивает от прямоугольника и летит в правый нижний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №4.

1. Организовать движение какой-нибудь строки, по траектории: y=sin(x²)+tan(x). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – белый; в правом верхнем углу находится треугольник (черный); посредине экрана закрашенный прямоугольник (темно-серый); из треугольника летит синий закрашенный шарик, отскакивает от прямоугольника и летит в левый верхний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №5.

1.Организовать движение какой-нибудь строки, по траектории: y=sin(x³)/cos(x³). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – темно-серый; в левом нижнем углу находится треугольник (зеленый); посредине экрана закрашенный прямоугольник (синий); из треугольника летит красно-синий закрашенный шарик, отскакивает от прямоугольника и летит в левый верхний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №6.

1. Организовать движение какой-нибудь строки, по траектории: y=exp(x)+cos(x²). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – светло-серый; в левом нижнем углу находится треугольник (зеленый); посредине экрана закрашенный прямоугольник (синий); из треугольника летит красный закрашенный шарик, отскакивает от прямоугольника и летит в правый нижний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №7.

1. Организовать движение какой-нибудь строки, по траектории: y=sin(x²)+exp(x). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – зеленый; в правом нижнем углу находится треугольник (ярко-красный); посредине экрана закрашенный прямоугольник (синий); из треугольника летит коричневый закрашенный шарик, отскакивает от прямоугольника и летит в левый нижний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №8.

1. Организовать движение какой-нибудь строки, по траектории: y=exp(x²)*tan(x²). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.

2. Для выполнения следующего задания с помощью любого графического редактора создать три графических файла: прямоугольник, треугольник, круг.

3. Нарисовать следующую картинку: фон – ярко-красный; в правом нижнем углу находится треугольник (синий); посредине экрана закрашенный прямоугольник (коричневый); из треугольника летит зеленый закрашенный шарик, отскакивает от прямоугольника и летит в правый верхний угол. Рисунок подписать.

4. Выполнить практические задания 1-3.

Вариант №9.

1.Организовать движение какой-нибудь строки, по траектории: y=tan(x²)/exp(x²). При построении использовать масштабирование. Диапазон значений выбрать самостоятельно. Организовать мигание.