Реферат: Анимации на веб страницах
6. Простейшая анимация
Итак, за счет чего же достигается эффект анимации? Почему элемент страницы кажется движущимся по ней?
Дело в том, что координаты элемента периодически меняются. И меняются весьма быстро, не реже 12 раз в секунду, за счет чего мы и наблюдаем непрерывное движение. Такая частота выбрана оттого, что именно на ней человеческий глаз теряет способность различать отдельные приращения, "скачки" прерывистого движения. Короче говоря, за этим пределом прерывистое движение становится для человека визуально непрерывным. (На этом же принципе, кстати, работают кинематограф и телевидение.) Компьютеры у нас сейчас достаточно мощные, так что обеспечить такую частоту смены координат вполне реально.
Но мало всего лишь изменить координаты элемента. Нужно изменить их по особому закону, описывающему траекторию движения элемента. Если элемент движется по прямолинейной траектории, этот закон очень прост. В случае криволинейного движения он сильно усложняется. Поэтому не стоит создавать на своих страницах слишком сложные анимации: маломощный компьютер просто не "потянет" чересчур замысловатые траектории.
Закон, по которому изменяются координаты анимированного элемента, иначе говоря, его траектория, описывается особой функцией (назовем ее функцией траектории). Такая функция принимает некоторые параметры и возвращает координаты элемента. Она имеет вид:
{х, у, z} = f(Q, q, dq)
С возвращаемыми этой функцией результатами все просто, х, у и z — координаты анимированного элемента, соответственно, горизонтальная, вертикальная и порядок перекрытия (уже знакомый вам z-индекс). Конечно, функция, возвращающая сразу три координаты, - это общий случай. Обычно изменяется одна или две координаты элемента — х и у.
А вот с параметрами, принимаемыми функцией, все несколько сложнее. Всего, как вы видите, их три, и назначение их неочевидно. Рассмотрим все эти параметры по порядку.
Самый первый параметр — Q. Это длина траектории движения анимированного элемента. Она может измеряться в пикселах, миллиметрах, градусах или каких-либо относительных единицах, например процентах. Вообще, единица измерения зависит от самой траектории: для прямолинейной больше подойдут пикселы или миллиметры, а для круговой — градусы или радианы. Важно одно: параметр Q должен каким-то образом обозначать полную длину траектории, по которой будет двигаться наш элемент.
Второй параметр (q) обозначает позицию на траектории, занимаемую в данный момент времени нашим элементом. Иными словами, это расстояние в единицах измерения траектории Q, которое он уже "пробежал". Получив его, наша функция должна сказать: "элемент здесь" и, что называется, "ткнуть пальцем" в точку на его траектории.
Последний, третий параметр — dq. Он задает приращение, на которое будет меняться дистанция q при каждом "скачке" анимированного элемента. Beличина этого параметра задает скорость движения анимированного элемента.
Итак, что же должна делать функция траектории. Ниже перечислены все ее задачи в порядке выполнения.
1. Принять начальные параметры и выполнить предварительные установки (прежде всего, установить анимированный элемент в начальную точку траектории движения).
2. Вычислить значения координат анимированного элемента на основании значения q и переместить этот элемент в точку с вычисленными координатами.
3. Проверить, дошел ли элемент до конечной точки траектории. Для этого q сравнивается с Q, и, если они равны либо q больше Q, анимация останавливается.
4. Увеличить значение q на величину dq.
5. Перейти к шагу 2.
Это общий алгоритм, которому должны следовать все функции траектории, даже самые сложные. Фактически основная сложность заключается в реализации шага 2, то есть вычислении координат на основе значения q. Остальные шаги реализуются очень просто и не составят трудности даже для начинающего программиста.
В разговоре о простейшей анимации подразумевалось, что существует одна-единственная функция, реализующая ее. Реально для создания анимации может использоваться несколько программ-сценариев. Автор объединил их в одну функцию, чтобы вам было понятнее.
Предполагалось, что когда анимированный элемент достигает конца траектории (q становится равной или больше Q), анимация останавливается. На самом деле, функция траектории может продолжить работу. Она может, например, просто снова выполнить начальные установки, поместив анимированный элемент в начало траектории, и запустить анимацию снова. Но лучше всего инвертировать значение dq (изменить положительное значение на отрицательное и наоборот) и пустить анимацию "задом наперед". Такая анимация, проигрывающаяся несколько или бесконечное количество раз, называется зацикленной.
Конечно, зацикленная анимация выглядит эффектнее. Но злоупотреблять ей не стоит, особенно бесконечной.
7. Анимация реального времени
Рассмотрен способ создания на Web-странице простейшей анимации. Но дело в том, что в реальной жизни такая анимация применяется крайне редко. Дело в том, что вышеописанный способ создания анимации имеет только одно более чем сомнительное достоинство и два огромнейших недостатка.
Достоинство — простота, более того, очевидность реализации. Любой программист, даже малоквалифицированный, может сесть и в пять минут накропать сценарий, реализующий движение элемента по прямолинейной траектории. Да, он это сделает, даже если до этого ни разу не занимался Web-программированием.
Представим двоих интернетчиков, решивших посетить его страничку с анимацией. У одного компьютер десятилетней давности, старенький, заслуженный, едва-едва обрабатывающий современные сложные Web-странички, даже без мультимедийных "наворотов". У другого — мощнейшая наисовременнейшая машина, только что сошедшая со сборочных столов какого-нибудь известного "брэнда". Вот они заходят-таки на страничку, загружают ее и принимаются наблюдать за анимацией.
Компьютер первого посетителя с натугой загрузит ее и, треща жестким диском, начнет ни шатко ни валко выполнять сценарии, реализующие анимацию. Анимированный элемент худо-бедно движется по странице, посетитель доволен — работает. Теперь оставим его и взглянем на посетителя номер два. Его компьютер мгновенно загрузит страничку и мгновенно же выполнит все сценарии. Анимированный элемент пролетит по своей траектории так быстро, что человеческий глаз его движения даже не заметит.
Спрашивается, кому нужна такая анимация?
Но это полбеды. Беда настанет, если наш незадачливый программист решит сделать анимацию зацикленной, бесконечной. Теперь смотрите, что получится. Страница загружается в Web-обозревателе, интерпретатор начинает выполнять сценарии... и выполняет... выполняет... выполняет... А пока он их выполняет, пользователь ничего не сможет сделать со страничкой: ни щелкнуть по гиперссылке, ни даже прокрутить ее в окне. Единственный способ прервать затянувшееся "кино" — закрыть сам Web-обозреватель.
Но что делать? Ведь Web-программисты как-то реализуют анимацию на своих страницах, и она работает нормально, в смысле, не мешает пользователю прокручивать страницу и щелкать по ссылкам. Может, они знают какой-нибудь секрет?