Анимации на веб страницах

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

8. Анимация — подход Dreamweaver

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

Но негибкость — не единственный недостаток этого  способа создания анимации. Если анимированный  элемент должен совершать достаточно сложное движение, реализующий эту  траекторию сценарий получается очень большим и медленным. И чем сложнее траектория, тем больше и медленнее получается сценарий.

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

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

{х, у, z} = f([p1, t1, p2, t2..., t])

Насчет  времени все понятно, но что такое  массив ключевых точек? Ничего сложного: это набор точек, с помощью  которого задается траектория движения нашего анимированного элемента. Поясним  это более подробно.

Предположим, что нам нужно создать очень  сложную анимацию, когда элемент  страницы движется по весьма причудливой  траектории. При этом высшей математикой  мы не владеем, поэтому вывести формулу  этой траектории не сможем. Однако мы придумали  вот что.

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

Этот  подход и используется Dreamweaver.

Для примера  приведена анимация, включающая один единственный анимированный элемент. Но Dreamweaver позволяет помещать на временную шкалу сразу нужное количество элементов, создавая несколько анимационных дорожек, что может быть использовано для создания очень сложных анимаций, в которых все элементы движутся согласованно. Более того, Dreamweaver позволяет создавать на одной странице несколько работающих независимо друг от друга анимаций, каждая из которых может включать в себя любое количество анимированных элементов. Так что даже самый привередливый аниматор будет доволен.

Функция траектории, принимающая в качестве параметра массив ключевых точек, очень  сложна, но нам и не нужно ее реализовывать. Многие мощные Web-редакторы предоставляют пользователям возможность создания анимации и используют для этого как раз такой подход. Набор Web-сценариев, реализующих функцию траектории, в этом случае вставляется в HTML-код страницы автоматически, пользователь даже не догадывается об этом.

Конечно, Dreamweaver не исключение. Он тоже предоставляет  пользователям такую возможность. И также делает всю черновую работу сам.

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

Как правило, анимация на Web-страницах преследует три цели:

• оживить страницы;
• привлечь к чему-либо внимание;
• показать что-либо в учебных целях.
• поэтому можно выделить три цели применения анимации:
• развлечение;
• реклама;
• образование.

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

Развлечения в Интернете — достаточно молодая отрасль Web-строительства. Изначально Интернет был создан как сеть для ученых, которым нужно было обмениваться текстовыми документами (сначала даже без графики) и связывать их в некое подобие структуры. Потом в сеть пришел обыватель, и Web-дизайнеры ринулись угождать его вкусам. (Не будем спорить, насколько они возвышенны или низменны. Личное мнение автора: обыватель слишком разнолик, чтобы свести его к одному-единственному ярлыку.) В Интернете появились аудио и видео, на Web-страницы пришли сложная графика и анимация. Сейчас все эти "навороты" используются так часто, что ими уже мало кого можно удивить.

Умелое  и умеренное использование анимации значительно оживит страницы. Важно только понять, какого эффекта надо достичь, и сделать все для того, чтобы он был достигнут. Не нужно переусердствовать, а применять анимацию только там, где она действительно нужна. И уж, не дай бог, страница будет рябить, как экран телевизора с отключенной антенной, — в этом нет ничего хорошего. Не надо позволять украшениям заслонить содержимое.

Теперь  реклама. Она появилась в Сети вместе с развлечениями, а значит, вместе с обывателем. Она уже здорово  надоела, эта интернет-реклама, едва ли не больше, чем реклама телевизионная. Но отдадим должное рекламе (и интернетовской, и телевизионной) -- благодаря ей получили возможность существовать очень многие популярные некоммерческие проекты. Если реклама вдруг исчезнет, эти проекты пропадут сразу же вслед за ней.

Традиционно для рекламных целей в сети используются так называемые баннеры — небольшие графические изображения жестко стандартизированных форматов. Почти все баннеры создаются в формате "анимированный GIF", то есть уже используют возможности анимации по привлечению внимания потенциального клиента. Рекламную анимацию, основанную на Web-сценариях, похоже, никто еще не применял, а если и использовал, то очень мало. Так что перед вами обширное непаханое поле деятельности, которое вполне может принести неплохие плоды.

Анимация, основанная на свободно позиционируемых элементах и Web-сценариях, значительно компактнее любых видеофайлов, будь то анимированный GIF, видеофайлы форматов AVI или Apple QuickTime. Однако анимированные GIF-файлы поддерживаются абсолютно всеми Web-обозревателями, даже самыми старыми, поэтому и применяются так широко. Web-сценарии же будут работать только на достаточно новых Web-обозревателях (которыми, надо сказать, сейчас пользуется подавляющее большинство интернетчиков).

Так или  иначе, но попробовать Web-сценарии в рекламе стоит.

От рекламы  плавно переходим к образованию. Программы — учебные пособия, часто используемые в образовании, как правило, пишутся на компилируемых языках программирования и представляют собой обычные MS-DOS- или Windows-приложения. Учебные пособия, сделанные на основе "живых" Web-страниц, встречаются пока еще довольно редко, хотя это направление весьма перспективно. Такие учебные пособия можно очень быстро создавать и модифицировать; а по сравнению с обычными программами они исключительно компактны (ну сколько места могут занимать несложная Web-страница и пара изображений?). Вдобавок такие пособия прямо-таки просятся в Интернет, на Web-сайты, а значит, можно без особых проблем организовать модное ныне дистанционное обучение.

Правда, данные учебные пособия имеют один огромный недостаток. Любой достаточно опытный интернетчик без труда сможет просмотреть исходный код самой страницы и ее Web-сценариев и, при желании, позаимствовать оттуда парочку находок.

Вот три  случая, когда анимация будет очень  полезна.

9. Создание анимации в Dreamweaver

    Прежде всего, надо условиться о терминологии, используемой в Dreamweaver. Знание ее поможет в дальнейшей работе. Итак:

• набор анимированных элементов, чье движение синхронизировано относительно одной и той же временной шкалы. Это нужно, потому что одна Web-страница может содержать несколько независимых анимаций, то есть наборов анимированных элементов, синхронизированных относительно независимых временных шкал;
• полоска, проходящая из точки начала анимации одного из элементов в точку ее конца, пусть называется дорожкой анимации. Этот термин мы уже ввели и теперь его закрепим. Дорожка показывает, когда анимиро-ванный элемент начнет двигаться и когда он остановится;
• свободное пространство на временной шкале анимации, которое может быть занято дорожкой, будет называться каналом. Количество доступных каналов определяет максимальное количество дорожек в одной анимации, а значит, максимальное количество входящих в нее анимированных элементов.

10. Создание простейшей анимации

    Для работы нам сразу же понадобится панель Timelines, в которой отображаются все анимации, созданные на Web-странице. Чтобы вывести эту панель на экран, включите пункт-выключатель Timelines в подменю Others меню Window или нажмите комбинацию клавиш <Alt>+<F9>. Сама панель Timelines показана на рисунке 1.

Как видно, панель Timelines находится в еще одном доке, занимающем нижнюю часть главного окна Dreamweaver. Это значит, что можно скрыть панель Timelines, если она нам не нужна, щелкнув по кнопке скрытия дока, а потом вернуть ее на экран.

Большую часть этой панели занимает временная  шкала, но проградуиро-ванная не в секундах, а в кадрах анимации — так удобнее. Значения времени (в кадрах) написаны на серой временной шкале, расположенной выше. Под этой шкалой отображаются все доступные каналы анимации, и занятые, и незанятые. В верхней же части панели находятся несколько элементов управления, предназначенных для задания некоторых параметров дорожек и самой анимации.

Рисунок 1. Панель Timelines

"Но  ведь Dreamweaver позволяет работать одновременно  с несколькими временными шкалами.  Где же остальные шкалы?" Чтобы увидеть их, нужно выбрать соответствующий пункт комбинированного списка анимаций, показанного на рисунке 2.

Рисунок 2. Комбинированный список анимаций

Чтобы анимировать какой-либо из доступных  свободно позиционируемых элементов, нужно поместить его на шкалу времени, создав дорожку анимации. Для этого надо выделить требуемый свободный элемент, щелкнуть по нему правой кнопкой мыши и выбрать в контекстном меню пункт Add to Timeline. Вы также можете выбрать пункт Add Object контекстного меню временной линии или пункт Add Object to Timeline подменю Timeline меню Modify. И, наконец, вы можете просто нажать комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<T>.

После добавления в анимацию свободного элемента Dreamweaver выводит предупреждение, показанное на рисунке 3. Этим он хочет сказать, что может управлять в процессе анимации следующими параметрами свободного элемента:

• горизонтальной и вертикальной координатами левого верхнего угла (атрибуты LEFT и ТОР);
• шириной и высотой (атрибуты WIDTH и HEIGHT), причем работать это будет только в Internet Explorer;
• порядком перекрытия, иначе говоря, z-индексом (атрибут Z-INDEX);
• видимостью (атрибут VISIBILITY).