Основные принципы анимации

Содержание

Введение………………………………………………………………………

ГЛАВА 1. Анимация на web-страницах……...……………………………...

Введение в Web-сценарии…………………………………………………...

Ограничения HTML…………………………………………………………

Web-сценарии………………………………………………………………..

События………………………………………………………………………

Основные принципы анимации…………………………………………….

Простейшая анимация………………………………………………………

Анимация реального времени………………………………………………..

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

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

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

Более сложная анимация……………………………………………………

Управление анимациями…………………………………………………….

Анимация графических изображений……………………………………..

Недостатки анимации, основанной на Web-сценариях,

и их преодоление…………………………………………………………….

Заключение…………………………………………………………………..

Список литературы………………………………………………………….

 

 

Введение

Данная контрольная работа, затрагивает тему «Анимация на webстраницах». Анимация на web страницах служит чаще всего для украшения. Иногда анимация применяется для поэтапного представления информации - в отдельных кадрах последовательно отображается слова какой-нибудь надписи или открывается все больший фрагмент изображения. Этот эффект привлекает и удерживает внимание наблюдателя. Типовым форматом записи анимации для web страниц является GIF. В контрольной работе будут рассмотрены такие пункты, как: введение в Web-сценарии, ограничения HTML, web-сценарии, события, основные принципы анимации, простейшая анимация, анимация реального времени, анимация — подход Dreamweaver, создание анимации в Dreamweaver, создание простейшей анимации, более сложная анимация, управление анимациями, анимация графических изображений, недостатки анимации, основанной на Web-сценариях, и их преодоление.

 

 

 

ГЛАВА 1. Анимация на w eb-страницах

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

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

Было сказано, что, кроме написания сценариев, собственно реализующих анимацию, и привязки их к определенным событиям, никакой особой переделки HTML-кода не требуется. Однако написание сценариев — задача, довольно сложная сама по себе. Мало того, что для этого нужно знать сам язык программирования JavaScript, следует хорошо представлять себе, как работают внутренние механизмы программы Web-обозревателя и как получить к ним доступ, чтобы использовать потом в своих нуждах. Кроме того, необходимо знать, как реализуется анимация, за счет чего элемент страницы будет казаться движущимся. И, конечно же, нужно иметь художественный вкус и — обязательно! — чувство меры.

Хорошо! С художественным вкусом и чувством меры проблем нет. Но есть проблемы с JavaScript и внутренними механизмами Web-обозревателя. Точнее сказать, мы не знаем ни того, ни другого. И все же очень хотим создать на своих страницах какую-нибудь, хотя бы простенькую, анимацию. Надо воспользоваться Dreamweaver. Он предоставляет очень удобный способ создания анимированных элементов без углубления в JavaScript и темные недра Web-обозревателя. Нужно просто указать траекторию движения того или иного элемента, после чего задать некоторые параметры — и сразу же получается результат. Dreamweaver сам создает необходимые JavaScript-сценарии и помещает их в HTML-код страницы.

Введение в Web-сценарии

Зачем нужны сценарии? Чтобы преодолеть ограничения HTML. He все, конечно, — только одно.

Ограничения HTML

Так в чем же ограничивает нас HTML? Зачем понадобилось придумывать еще один язык? Нельзя ли обойтись без него?

В общем, можно.  Для таких страниц хватит и "чистого" HTML. А как только вы захотите "научить" страницу взаимодействовать с пользователем, то есть сделать интерактивной, вы сразу упретесь в непреодолимую стену.

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

Собственно, HTML — и не язык программирования, а язык описания Web-страниц — и не более. Он описывает, как должна выглядеть информация в окне Web-обозревателя, только и всего. Причем, этот внешний вид жестко стандартизирован; Web-дизайнер, как уже понятно, значительно сильнее ограничен в своих возможностях, чем дизайнер-полиграфист. Особых вольностей на Web-страницах он не сделает. (Фреймы, таблицы разметки и каскадные таблицы стилей CSS снимают многие ограничения, но не все.)

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

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

Чтобы преодолеть этот недостаток "чистого" HTML, были придуманы два пути.

Первый путь — это специальные, как правило, нестандартные, "фирменные", теги, расширяющие возможности языка. В подавляющем большинстве случаев они добавляют Web-страницам интерактивные возможности. Например, нестандартный парный тег <MARQUEE>. . .</MARQUEE>, поддерживаемый Internet Explorer, позволяет создать на странице "прокручивающийся" текст. Но, нужно согласиться, эти расширения ограничивают Web-дизайнера теми возможностями, что вложили в них разработчики Web-обозревателя. И не суметь заставить текст в элементе <MARQUEE> не прокручиваться, а последовательно менять цвета — разработчики Internet Explorer этого не предусмотрели.

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

Web-сценарии

Второй путь — внедрение в HTML-код особых программ, написанных на "классических" языках программирования, то есть описывающих поведение элементов. Такие программы называются сценариями (или скриптами от англ, script — сценарий). (Почему они так называются? Можете считать, что эти программы описывают сценарии поведения какого-нибудь элемента при наступлении того или иного события.) Эти программы помещаются в HTML-код с помошыо особого, специально для такого случая стандартизированного комитетом WWWC парного тега <SCRIPT>. . .</SCRIPT>. Web-обозреватель, "расшифровывая" такой HTML-код, читает сценарии и либо выполняет их сразу же, либо "откладывает в долгий ящик", чтобы выполнить после наступления какого-либо события.

Именно после "открытия" второго пути в интерактивность всемирная паутина стала "живой", а многие Web-дизайнеры стали по совместительству еще и Web-программистами.

Для того чтобы писать сценарии, были специально созданы несколько языков программирования, называемых языками написания сценариев (или скриптовыми языками). Наибольшую популярность из них получили всего два: JavaScript и VBScript.

Язык JavaScript был разработан в фирме Netscape на основе известного "классического" языка программирования Java. Поэтому впервые поддержка языка JavaScript появилась именно в Web-обозревателе Netscape Navigator 2.0. Microsoft Internet Explorer начал поддерживать JavaScript с версии 3.0. Кроме того, в фирме Microsoft был разработан свой диалект JavaScript под названием JScript, отличающийся от "прародителя" только наличием нескольких новых команд. Поэтому эти два языка очень часто не различают, называя их одинаково — JavaScript.

Язык VBScript был разработан в Microsoft в качестве "адекватного ответа" на JavaScript. Этот язык поддерживается только Internet Explorer, начиная с версии 4.0. Из-за своей "несовместимости" VBScript не получил большого распространения в Web, но завоевал прочные позиции в серверном программировании, а именно, написании активных серверных страниц Microsoft ASP (см. главу 15). В настоящее время для написания Web-сценариев он практически не применяется.

Кроме JavaScript и VBScript, были попытки использования для написания Web-сценариев языков Perl, Python и некоторых других. Однако сколько-нибудь широкого распространения эти языки не получили.

В настоящее время практически везде для написания сценариев применяется язык JavaScript. Он достаточно прост для изучения и предоставляет разработчику весьма обширные возможности. Кроме того, написанные на нем программы невелики по объему, что актуально в эпоху безраздельного господства медленных каналов связи.

Для поддержки языка сценариев используется так называемый интерпретатор (или виртуальная машина) языка. Web-обозреватель выделяет сценарии из HTML-кода страницы и передает его на выполнение интерпретатору. Последний анализирует код сценариев, расшифровывает их и выполняет, передавая результат выполнения обратно Web-обозревателю.

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

Языки сценариев называются интерпретируемыми, так как написанные на них программы расшифровываются при каждом выполнении. Этим они коренным образом отличаются от компилируемых языков (C++, Pascal, Java и многих других). Написанные на компилируемых языках программы расшифровываются однократно и преобразуются в машинный код, который выполняется самим процессором компьютера, без помощи интерпретатора. Для такого преобразования используются специальные программы, называемые компиляторами. Конечно, откомпилированный код выполняется значительно быстрее, но специфика Web-программирования такова, что в нем могут применяться только интерпретируемые языки.

Ну, вот и все о языках программирования, на которых пишутся Web-сценарии. Теперь поговорим о том, как эти Web-сценарии выполняются.

События

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

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

Что же нам делать с этими событиями, спросите вы? Обрабатывать.

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

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

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

Основные принципы анимации

Наконец-то дошла очередь и до анимации. Рассмотрим некоторые базовые понятия, без которых в дальнейшем нам не обойтись.

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

Простейшая анимация

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

Дело в том, что координаты элемента периодически меняются. И меняются весьма быстро, не реже 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 (изменить положительное значение на отрицательное и наоборот) и пустить анимацию "задом наперед". Такая анимация, проигрывающаяся несколько или бесконечное количество раз, называется зацикленной.

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