Анимация реального времени
Мы только что рассмотрели способ создания на Web-странице простейшей анимации. Но дело в том, что в реальной жизни такая анимация применяется крайне редко. Более того, автор категорически не рекомендует вам даже пытаться ее сделать.
Почему? Дело в том, что вышеописанный способ создания анимации имеет только одно более чем сомнительное достоинство и два огромнейших недостатка.
Достоинство – простота, более того, очевидность реализации. Любой программист, даже малоквалифицированный, может сесть и в пять минут накропать сценарий, реализующий движение элемента по прямолинейной траектории. Да, он это сделает, даже если до этого ни разу не занимался Web-программированием.
Но пусть он только попробует выложить свое творение в Сеть!
Давайте представим двоих интернетчиков, решивших посетить его страничку с анимацией. У одного компьютер десятилетней давности, старенький, заслуженный, едва-едва обрабатывающий современные сложные Web-странички, даже без мультимедийных "наворотов". У другого – мощнейшая наисовременнейшая машина, только что сошедшая со сборочных столов какого-нибудь известного "брэнда". Вот они заходят-таки на страничку, загружают ее и принимаются наблюдать за анимацией.
Компьютер первого посетителя с натугой загрузит ее и, треща жестким диском, начнет ни шатко ни валко выполнять сценарии, реализующие анимацию. Анимированный элемент худо-бедно движется по странице, посетитель доволен – работает. Теперь оставим его и взглянем на посетителя номер два. Его компьютер мгновенно загрузит страничку и мгновенно же выполнит все сценарии. Анимированный элемент пролетит по своей траектории так быстро, что человеческий глаз его движения даже не заметит.
Спрашивается, кому нужна такая анимация?
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.
Но это полбеды. Беда настанет, если наш незадачливый программист решит сделать анимацию зацикленной, бесконечной. Теперь смотрите, что получится. Страница загружается в Web-обозревателе, интерпретатор начинает выполнять сценарии… и выполняет… выполняет… выполняет… А пока он их выполняет, пользователь ничего не сможет сделать со страничкой: ни щелкнуть по гиперссылке, ни даже прокрутить ее в окне. Единственный способ прервать затянувшееся "кино" – закрыть сам Web-обозреватель.
Но что делать? Ведь Web-программисты как-то реализуют анимацию на своих страницах, и она работает нормально, в смысле, не мешает пользователю прокручивать страницу и щелкать по ссылкам. Может, они знают какой-нибудь секрет?
Да, знают. И заключается этот секрет в том, что они используют немного другую функцию траектории:
{x, y, z} = f(Q, q, dq, t)От уже знакомой нам функции она отличается тем, что принимает еще один параметр – t. Этот параметр – время. Иначе говоря, при расчете координат функция траектории учитывает текущее время. И анимация оказывается жестко привязанной к времени, которое везде течет одинаково, в отличие от тактовой частоты процессоров, которые различаются у разных компьютеров.
Как это реализуется? Дело в том, что новая функция выполняется не все время, пока работает анимация, а вызывается время от времени, тогда, когда нужно произвести очередной "скачок" анимации, и после этого прекращает свою работу, дожидаясь очередного вызова. Эта функция реализуется в виде сценария-обработчика внутреннего события – "тика" системного таймера.
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно.
Таким образом, анимация оказывается четко привязанной к времени. И на стареньком компьютере посетителя номер один, и на суперсовременной машине номера два анимированный элемент будет двигаться с одной и той же скоростью. (Конечно, на более мощном компьютере анимация, возможно, будет выполняться плавнее, но с той же скоростью, что и на более мощном.)
Далее. Так как функция траектории вызывается только время от времени, а не работает постоянно, пользователь может нормально взаимодействовать с Web-страницей. Web-обозревателю между "тиками" таймера остается предостаточно времени, чтобы обработать пользовательские запросы.
Давайте приведем список задач новой функции траектории в порядке выполнения.
- Принять начальные параметры и выполнить предварительные установки (установить анимированный элемент в начальную точку траектории движения, запустить системный таймер и привязать к его событиям сценарий-обработчик).
- Вычислить значения координат анимированного элемента на основании значения q и переместить этот элемент в точку с вычисленными координатами.
- Проверить, дошел ли элемент до конца траектории. Для этого q сравнивается с Q, и, если они равны либо q больше Q, выполняется переход к шагу 5.
- Увеличить значение q на величину dq.
- Остановить системный таймер и "отвязать" от его событий обработчик.
Для реализации этой функции используются два сценария. Один из них выполняется при загрузке страницы и реализует задачу шага 1. Второй – собственно обработчик событий системного таймера – реализует задачи шагов 2-5.
Такая анимация, привязанная к системному таймеру, а не к процессору, называется анимацией реального времени. Именно она и применяется для создания движущихся элементов на Web-страницах. Простейшая анимация, описанная нами ранее, практически нигде не используется. Вы уже поняли, почему.