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

Движение описывается математическими функциями, которые определяют изменение координат в ответ на изменение каких-то параметров. Звучит страшно? Хорошо, перефразирую иначе. Если мы будет вычислять 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); // Запускаем функцию.

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