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

{х, y, z} = f(Q, q, dq, t)

От уже знакомой нам функции она отличается тем, что принимает еще один параметр — t. Этот параметр — время. Иначе говоря, при расчете координат функция траектории учитывает текущее время. И анимация оказывается жестко привязанной к времени, которое везде течет одинаково, в отличие от тактовой частоты процессоров, которые различаются у разных компьютеров.

Как это реализуется? Дело в том, что новая функция выполняется не все время, пока работает анимация, а вызывается время от времени, тогда, когда нужно произвести очередной "скачок" анимации, и после этого прекращает свою работу, дожидаясь очередного вызова. Эта функция реализуется в виде сценария-обработчика внутреннего события — "тика" системного таймера.

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

Далее. Так как функция траектории вызывается только время от времени, а не работает постоянно, пользователь может нормально взаимодействовать с Web-страницей. Web-обозревателю между "тиками" таймера остается предостаточно времени, чтобы обработать пользовательские запросы.

Список задач новой функции траектории в порядке выполнения.

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

2. Вычислить значения координат анимированного элемента на основании значения q и переместить этот элемент в точку с вычисленными координатами.

3. Проверить, дошел ли элемент до конца траектории. Для этого q сравнивается с Q, и, если они равны либо q больше Q, выполняется переход к шагу 5.

4. Увеличить значение q на величину dq.

5. Остановить системный таймер и "отвязать" от его событий обработчик.

Для реализации этой функции используются два сценария. Один из них выполняется при загрузке страницы и реализует задачу шага 1. Второй -собственно обработчик событий системного таймера — реализует задачи шагов 2—5.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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