Анимация при помощи CSS

12. Управление CSS-свойствами на JavaScript

Анимация при помощи CSS

Любая анимация, опирающаяся на скрипты, использует методы setInterval и clearInterval объекта window.

Синтаксис этих методов:


var timer = setInterval(kod, interval);
clearInterval(timer);

Аргументы:

kod — функция или строка JavaScript-кода, который периодически должен исполняться.
interval — целое значение, задающее интервал в миллисекундах между вызовами кода.
timer — значение, которое возвращает метод setInterval. Оно может быть передано в метод clearInterval для отмены периодически исполняемого кода.

Метод setInterval создает таймер, который через промежутки времени, заданные вторым аргументом interval исполняет kod, заданный первым аргументом. Если kod меняет изображение на экране, получаем анимацию, скорость которой регулируется вторым аргументом метода. Анимацию прекращает метод clearInterval.

Анимацию можно создавать и при помощи методов setTimeout и clearTimeout.


var timer = setTimeout(kod, interval);
clearTimeout(timer);

Метод setTimeout выполняет kod (один раз) по истечению количества миллисекунд, заданных вторым аргументом interval. Пусть кадр анимации строит функция f, и её нужно запускать через каждые interval миллисекунд. Это можно сделать при помощи следующего кода:


function f()
{
  // Построение очередного кадра
  ...
  // Вызов f через каждые interval миллисекунд
  setTimeout(f, interval);
}
f(); // Вызов функции f

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

Пример 2. Весёлая кнопка

Смотрите: Пример 2. Весёлая кнопка

Пример 3. Сложное движение объектов

Построим модель солнечной системы. Модель не претендует на полноту (в ней присутствуют только три небесных тела, не считая россыпи звёзд на фоне), и на точность. Пример просто иллюстрирует возможности анимации средствами JavaScript и CSS.

Описание модели

В HTML-коде система небесных тел погружена в блок all:


<!-- Блок с картинками -->
<DIV id="all">  <!-- Вся система -->
  <IMG src="pic/sun.gif" width=71 height=71> <!-- Солнце -->
  <DIV id="earthMoon">  <!-- Земля и луна -->
    <IMG id="earth" src="pic/earth.gif" width=32 height=32> <!-- Земля -->
    <IMG id="moon"  src="pic/moon.gif" width=20 height=20>  <!-- Луна -->
  </DIV>
</DIV>

Для всех элементов назначается абсолютное позиционирование при помощи соответствующего определения в CSS-файле:


#all, #earthMoon, #moon
{
  position:absolute; 
  visibility:hidden; // Сделаем всё это невидимым 
}

Блок all, как единое целое будем перемещать по экрану по эллиптической траектории.

Координаты (left и top) абсолютно позиционированного блока all будут отсчитываться от элемента HTML (то есть от левого верхнего угла клиентской области окна браузера).

Вместе с Солнцем будет перемещаться и блок earthMoon, содержащий Землю и Луну.

По эллиптической орбите заставим двигаться и абсолютно позиционированный блок earthMoon. Начало его системы координат совпадает с левым верхним углом родителя — блоком all.

Наконец, по эллиптической орбите заставим двигаться и абсолютно позиционированный блок moon. Начало его системы координат совпадает с левым верхним углом его родителя — блоком earthMoon.

Таким образом, все три траектории описываются одинаково, но они будут относиться к разным системам координат благодаря правилу абсолютного позиционирования:

Смещения left, top, right и bottom для абсолютно позиционированного блока отсчитываются от сторон прямоугольника, проведённого по внешней границе внутреннего отступа первого позиционированного предка (или HTML, если другие позиционированные предки отсутствуют).

Остается только вспомнить параметрическое уравнение эллипса, которое есть обобщение параметрического уравнения окружности (используемого в приложении «Весёлая кнопка» примера 2):

x = a*cos(t) y = b*sin(t)

Смотрите: Пример 3. Сложное движение объектов