Разработка анимации для веб страниц. Использование необыкновенной анимации в веб — дизайне. Движения «полный вперёд» и «пошаговое изменение»
Нет никакой особой «фишки» в создании масштабной анимации. Хотя нет, есть: нужно потратить немало времени на её оптимизацию и тестирование. Так после нескольких лет экспериментов, постоянно упираясь в пределы производительности браузеров, мы вывели серию принципов дизайна и кодинга, которые позволят любому желающему украсить свой проект эффектной и производительной анимацией. Их использование позволит вам получить плавную работу страниц в десктопных и мобильных браузерах. И самое главное - всё это делается и обслуживается весьма просто.
Технология и реализация будут немного отличаться для каждого конкретного случая, но мы уверены, что наши общие принципы окажутся полезными практически в любой ситуации.
Что такое анимация?Анимации существовали ещё до появления Интернета. Для создания лучших из них можно потратить всю жизнь на обучение. Тем не менее, в этом деле тоже существуют закономерности. Мы обсудим некоторые типичные и не очень проблемы, с которыми сталкиваются дизайнеры при создании анимации для размещения в вэбе.
Для получения плавной анимации с 60 fps каждый кадр должен обрабатываться менее чем за 16 мс! Это малый промежуток времени, поэтому необходимо найти очень эффективные способы рендеринга каждого кадра для высокой производительности анимации.
Существует множество способов реализации веб-анимации. Например, кинолента существовала ещё до появления Интернета. Суть её в том, что вручную прорисованные кадры с минимальным различием демонстрировались несколько раз в секунду, создавая таким образом иллюзию движения у зрителя.
Twitter недавно использовали этот простой подход для их новой анимации сердца, прокручивая в заданной последовательности 26 кадров.
Полученная таким образом анимация слишком сложна в реализации и, на самом деле, недостаточно плавная.
Во многих случаях выгоднее использовать свойство CSS «transition» для автоматической анимации элемента при его изменении. Эта техника известна также как «tweening» и подразумевает создание анимации с автоматическим построением промежуточных изображений. Допустим, мы имеем 2 изображения одного объекта в различных положениях. Эффекты перехода CSS помогут создать анимацию изменения его состояния. Их использование выгодно тем, что можно в любой момент сбросить или обратить всю логику анимации. Это идеальный подход из разряда «установил и забыл». Отлично работает, к примеру, с различными интро-последовательностями или простыми взаимодействиями вроде активации анимации при наведении мыши.
Также анимация, построенная в CSS на ключевых кадрах, может служить идеальным фоном для выбранных областей страницы. К примеру, кольца из логотипа «Гироскопа» постоянно вращаются. Такой подход хорошо использовать для анимации движения различных механизмов.
Итак, с вводной закругляемся и переходим к основной части поста. Дадим несколько советов, которые помогут значительно повысить производительность и качество вашей анимации. Надеемся, они вам помогут.
#1 Не изменяйте никакие свойства кроме непрозрачности (opacity ) и преобразования (transform ) Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать!Следование этому базовому принципу повысит эффективность работы на 80%, даже в мобильном сегменте. Наверняка, вы уже слышали об этом раньше. Идея не оригинальная, но ей редко следуют. Она является веб-эквивалентом «ешьте здоровую пищу и выполняйте физические упражнения». Все слышали, знают, что это правильно, но мало кто соблюдает.
На самом деле, к использованию этого принципа довольно просто привыкнуть. Особую выгоду это принесёт тем, кто ранее делал анимации при помощи традиционных свойств CSS.
Например, если вам нужно сделать объект меньше, вы можете использовать свойство трансформации scale вместо изменения ширины/высоты. Если вам нужно переместить элемент, то не стоит возиться с изменением значений отступов, ведь такая анимация потребует перестройки макета страницы при каждом кадре. Лучше используйте простые свойства трансформаций для этого: transform : translateX или transform : translateY .
Почему это работает?Для человека, меняющего ширину, отступы и другие подобные параметры использование свойств трансформации может и не выглядеть выдающейся идеей. Визуально результат ведь схож. Но с точки зрения затрат вычислительной мощи компьютера, который будет всё это обсчитывать, использование transform выглядит в разы лучше.
Разработчики браузеров проделали огромную работу для оптимизации таких операций. Трансформации действительно эффективны, они экономят ресурсы видеокарт, отбрасывая необходимость повторного рендеринга элемента.
Можно сойти с ума, ожидая загрузки такой страницы: все углы скруглены, используются изображения, на всё положены тени и для полного счастья добавлено динамическое размытие элементов. Если такое происходит 1 раз, то несколько лишних миллисекунд ожидания роли не сыграют. Но как только весь контент будет выведен на экран, вы больше не захотите ждать пересчёта каких-либо значений для изменения страницы.
#2 Скрывайте контент на виду. Используйте «pointer-events» в CSS: значение «none» наряду с нулевой непрозрачностью для сокрытия элементовДанный метод плохо работает в старых браузерах, но если вы проектируете для webkit или других современных браузерных движков, то он сделает вашу жизнь намного проще.
В далёкие времена, когда анимации обрабатывались при помощи jQuery animate(), основная сложность при работе с эффектом fade заключалась в необходимости переключения значения свойства display: активировать none для прекращения эффекта в нужный момент. Слишком рано и анимация не будет завершена, слишком поздно и вы получаете невидимый элемент с нулевым значением opacity, перекрывающий страницу. Требовался обратный отклик для очистки экрана после завершения анимации.
Свойство CSS «pointer-events» (существует давно, но почему-то используют его нечасто) служит для того, чтобы сделать вещи нечувствительными к кликам мышью и другим взаимодействиям. Так, будто их вообще нет на странице. Это свойство может быть легко включено/выключено посредством CSS. При работе оно не прерывает анимацию и не влияет на рендеринг/видимость элементов.
Комбинируя эту вещь с нулевым значением opacity, мы получаем тот же эффект, что даёт «display: none», но без влияния на производительность при запуске новых циклов рендеринга анимации. Если необходимо скрыть элемент из поля зрения, я обычно выставляю нулевую непрозрачность и выключаю pointer-events. После этого могу забыть о нём, зная, что всё можно легко вернуть обратно и ничего не будет мешать производительности страницы.
Этот приём особенно хорошо работает с элементами, имеющими абсолютное позиционирование, поскольку в таком случае вы можете быть уверены в том, что они не оказывают никакого влияния на все остальные участки макета и элементы страницы.
Также это даёт вам намного большую свободу действий, поскольку выбор времени начала/прекращения анимации в таком случае может быть и не очень точным. Даже если вы немного ошибётесь с таймингами, ничего страшного не произойдёт. Пользователь просто не сможет ничего нажать до того, как анимация завершится. Всё будет идти так, как вы задумали.
#3 Не нужно анимировать всё подряд одновременно. Либо же используйте принцип хореографии.Одна анимация может быть плавной сама по себе, но, если одновременно отрабатывается несколько эффектов, это может испортить всю картину и снизить производительность. Создать плавно работающую демку очень просто, зато обеспечить приемлемый уровень производительности в составе целого сайта намного сложнее. Поэтому очень важно планировать появление анимации должным образом.
Вы захотите выстроить тайминги таким образом, чтобы все анимации запускались в разное время. Обычно 2-3 анимации могут работать без задержек одновременно, особенно если они стартуют с небольшим разбросом по времени. Более 3 одновременных (на глаз, но не по существу - минимальный разброс по времени должен быть) запусков почти наверняка вызовут лаги на экране.
Если на странице больше одной анимации, вам важно понять концепцию хореографии. Казалось бы, причём здесь танцевальный термин? Но понимание его сути в данном контексте очень важно для успешной анимации интерфейсов: вещи должны приходить на экран из правильного направления и в нужные моменты. Несмотря на то, что все они работают по отдельности, для зрителя они должны выглядеть как части одного хорошо спроектированного механизма.
Материал-дизайн от Google имеет некоторые по этому вопросу. Это, конечно, не единственно правильный путь, но он даёт пищу для размышлений и тестирования.
Хореография анимации очень важна, и её качественная постановка потребует большого количества экспериментов. Тем не менее, код для реализации задумки вряд ли получится очень сложным.
Я обычно заменяю один класс на родительском элементе (чаще всего на body) для того, чтобы вызвать кучу переходов, каждый из которых имеет свой параметр задержки (transition-delay). Делается это для того, чтобы каждый элемент появлялся в нужное мне время. С точки зрения кодинга вам стоит беспокоиться о значении лишь одной переменной вместо поддержания десятков таймингов в JavaScript.
Раскачивая одновременно серию элементов, можно довольно просто скомпоновать их хореографию. Это мощный подход, потому что всё это одновременно и выглядит хорошо, и работает быстро, лишь помните, что только 2-3 анимации можно запускать одновременно, и всё будет хорошо. Нужно распространить их на странице так, чтобы каждая отрабатывалась плавно и своевременно. Сет ваших анимаций должен восприниматься зрителем как непрерывный поток, а не цепочка разрозненных элементов. Единая плавная сцена.
Пример кода
Есть несколько простых методов, которые позволят раскачивать ваши элементы. Они являются очень удобными, особенно если вы используете длинную цепочку анимаций. Если цепочка включает менее 10 элементов, то я обычно указываю значения задержек в CSS. Это самый простой способ реализации.
Для более длинных последовательностей или очень динамично изменяющихся элементов тайминги могут устанавливаться динамически для всех элементов путём изменения значений переменных.
Как правило, используются 2 переменные: ваша базовая задержка и задержка по времени между каждым элементом. Такой баланс отыскать довольно сложно, но если вы попадёте на правильный набор чисел, то всё будет отлично.
#5 Используйте общий множитель для разработки в slow motion И ускорьте всё это позже.В дизайне анимации тайминг является нашим всем. 20% работы кроется в создании самих анимаций, а остальные 80% - в нахождении правильных параметров и таймингов для получения чётко синхронизированной и плавной сцены.
Особенно это актуально при работе над хореографией обширного множества элементов и попытках выжать максимум производительности. После замедления анимаций с такими сценами станет работать намного проще.
Если вы используете Javascript или какой-нибудь CSS-препроцессор вроде SASS, код должен быть достаточно простым для построения правильной структуры переменных.
Вы должны убедиться в удобстве кодовой конструкции, чтобы без проблем тестировать различные скорости и тайминги. Например, если анимация заикается даже на 1/10 скорости, вы, скорее всего, делаете что-то в корне неправильно. Если она идёт гладко при растяжении в 50 раз, то вопрос сводится к нахождению максимальной скорости, при которой она сможет плавно работать. Довольно трудно заметить проблемы на полной скорости, но если вы снизите её, то все они станут весьма очевидными.
Для настройки очень сложных анимаций либо же при поиске узких мест в производительности отслеживание процесса в замедленном темпе будет очень полезным.
Идея заключается в том, чтобы упаковать много красивых деталей в сцену при замедленной демонстрации, после чего ускорить всё это дело так, чтобы анимации выглядели идеально. Это очень тонкая работа, зато пользователи оценят детализацию и плавность происходящего на экране.
Эта фишка является действующей частью OS X: когда вы сворачиваете окно с программой, видите анимацию в замедленном темпе.
#6 Возьмите видео с записью вашего интерфейса и прокрутите, от третьего лица вы сможете увидеть большеИногда взгляд со стороны помогает видеть вещи более ясно, и видео является отличным способом добиться этого.
Некоторые люди создают видео в After Effects, после чего пробуют реализовать полученное на сайте. Я часто делаю с точностью до наоборот, пытаясь сделать хорошее видео на основе пользовательского интерфейса сайта.
В режиме реального времени довольно просто можно упустить какие-то моменты. Зато просмотр анимации в записи на медленной скорости снова и снова поможет выявить даже самые мелкие проблемы. При таком подходе всё становится очевидным.
Просмотр замедленных видео с моих страниц и корректировка проблемных участков стали важной частью моей работы. Можно, конечно, всё списывать на медленные браузеры, но зачастую, после тестирования и проведения оптимизации анимации начинают работать как по маслу. То есть всё решаемо при грамотном подходе.
#7 Активность Сети может привести к лагам. Вам нужно предварительно загрузить или блокировать большие HTTP -запросыИзображения выступают в этом плане решающим фактором, особенно если они большие по весу (к примеру, тяжёлый фон), или тонна маленьких (загрузка 50-100 аватаров, допустим), или просто большое количество контента (длинная страница с кучей картинок).
Во время первой загрузки страницы тонны вещей инициализируются и загружаются. Объявления, модули и другие сценарии 3 очереди загрузки ещё сильнее усугубляют ситуацию. Иногда задержка воспроизведения анимаций всего лишь на несколько сотен миллисекунд после загрузки остальных элементов страницы способна совершить чудо. Вы получите значительный прирост производительности.
Не стоит задействовать мега-оптимизацию без явной необходимости, хотя тяжёлая страница может потребовать установки очень точных задержек и таймингов анимации для плавной работы. В общем, нужно для начала загрузить настолько малое количество данных, насколько это возможно, потом подключить анимацию, а уже после неё продолжить загрузку остальной части тяжёлого контента страницы.
На страницах с большим количеством данных работа по оптимизации может занять немало времени. Анимация, работающая хорошо со статическим контентом, может начать сильно тормозить и разваливаться при одновременной загрузке с реальными данными. Если что-то выглядит вполне плавно работающим, но в некоторые моменты начинает лагать по неясной причине, следует проверить сетевую активность. Возможно, в эти моменты ваш канал занят другими загрузками. Убедитесь, что ваша сеть не выполняет несколько одновременных больших загрузок.
#8 Не нужно менять стандартную прокрутку. Идея замены скролла может показаться классной, но это не так на самом деле.Скроллинг на основе анимации популярен уже несколько лет, особенно если он сделан с применением параллакса и других спецэффектов. О его полезности можно спорить долго, а вот способы технической реализации такой задумки есть удачные и не очень.
Умеренно эффективным способом создания вещей из этой категории является определение оптимального шага прокрутки и выделение его в отдельное событие (event). Если же вы не знаете, что делаете, то лучше вообще не использовать такой скроллинг. Здесь легко ошибиться, да и поддерживать нормальный уровень производительности на страницах со сложным скроллингом - довольно хлопотное занятие.
Ещё худшей затеей выглядит замена стандартного скролла на так называемый scrolljacking (контент изменяется в такт прокрутке, пример - сайт Apple). Не делайте этого. Реализовать удачно такой эффект сложно, да и не всем пользователям он понравится.
Если у вас есть определённый опыт и желание создать свой скроллбар, сделайте его облегчённый прототип и протестируйте на работоспособность, прежде чем тратить время на полную разработку.
#9 Почаще тестируйте свои проекты на мобильных устройствах.Большинство веб-сайтов созданы на ПК. Чаще всего они тестируются на той же машине, на которой их разработали. Таким образом, мобильная версия сайта и производительность анимаций отходят на задний план. Некоторые технологии создания анимации (к примеру, canvas) не будут нормально работать на мобильных платформах.
Тем не менее, если анимация будет сделана и оптимизирована должным образом, то полученный от неё мобильный опыт использования может превосходить по качеству десктопный. Мобильная оптимизация раньше была очень сложной темой, но новые iPhone работают быстрее большинства ноутбуков. Если вы станете следовать приведённым выше советам, то сможете добиться внушительной производительности ваших анимаций и на мобильных устройствах.
Мобильная версия сайта - большая и очень важная его часть. Это может показаться странным, но я рекомендую в течение недели просматривать ваш сайт исключительно с телефона или планшета. В идеале вы не должны чувствовать, что получили наказание из-за невозможности добраться до десктопа. Если всё работает быстро, плавно и без нарушений задуманной структуры, то вы достигли цели. Если что-то идёт не так, нужно продолжать работу.
Продолжайте вносить конструктивные усовершенствования и улучшать производительность, пока разница в комфортности использования мобильной и десктопной версии сайта не исчезнет совсем.
Если вы заставите себя использовать мобильный сайт в течение недели, то, вероятно, в конечном итоге, оптимизируете его даже лучше, чем большую версию. Борясь с раздражением, используя его на регулярной основе, вы в полной мере ощутите проблемы, с которыми предстоит столкнуться вашим пользователям, и сможете устранить их до выхода проекта в широкие массы. Это избавит от множества проблем в будущем.
#10 Тестируйте проекты на разнообразных устройствахСуществует множество факторов, способных кардинально повлиять на производительность сайта на ПК и мобильных устройствах: разрешение экрана, количество пикселей в окне, старость железа и т. д.
Несмотря на то, что Chrome и Safari созданы на базе Webkit и имеют практически одинаковый синтаксис, у каждого из них свои собственные причуды. Любое обновление Хрома одновременно устраняет старые ошибки и привносит новые, так что вы должны постоянно держать руку на пульсе, как говорится.
Понятно, не все хотят идти по пути наименьшего сопротивления, делая сайты по нижнему общему знаменателю суммы багов, дабы не попасть в очередной просак после обновлений наиболее популярных браузеров. Поиск грамотных путей добавления усовершенствований и удаления некоторых из них для поддержания плавной работы сайта может быть очень полезным.
Я регулярно переключаюсь в работе между моим маленьким MacBook Air и большим iMac. Каждый такой цикл выявляет небольшие проблемы и указывает на необходимые усовершенствования. Это касается не только производительности работы анимации, но и дизайна сайта в целом, плотности информации, читаемости, структуры и т. д.
Модели мобильной и обычной версии сайта чаще всего отличаются дизайном структуры по ширине, высоте, плотности пикселей и другим свойствам. Знание особенностей операционных систем и аппаратных характеристик мобильных устройств может помочь в оптимизации, поскольку они сильно отличаются от таковых на ПК.
Перевод статьи https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29
Анимация — это изменения в движении. Она позволяет точнее отобразить окружающую нас жизнь. Вот почему люди часто говорят, что анимация для сайта оживляет его. Данная фраза довольно точно передает цель анимации в веб-дизайне.
Подобная иллюзия движения при правильном применении является свидетельством того, что пользователи сделали что-то. Что они успешно взаимодействовали с интерфейсом и вызвали какие-то изменения.
Анимация в Сети: Краткая историяДавайте взглянем на то, как анимация в интернете достигла своего нынешнего уровня. В значительной степени все началось благодаря гифкам…
Gif-файлы
появились еще в 1987 году. Так началась эпоха танцующих младенцев и других ужасов, которые лучше не вспоминать.
Тогда большинство людей еще и не задумывались над тем, как вставить анимацию на сайт
. В основном они хотели привнести немного жизни в «тишину» статических веб-страниц.
Когда возможности файлов в формате gif были исчерпаны, людям потребовались новые способы добавления анимации на сайты. И звука!
Flash позволил реализовать в интернете то, чего мы не знали раньше. Эта технология расширила творческие горизонты, создала рабочие места для людей в совершенно новой отрасли. А также дала нам веб-мультфильмы и Flash-игры .
Затем многие дизайнеры перешли на JavaScript-анимацию выпадающих меню и других элементов навигации. Другие разработчики использовали исключительно JavaScript , потому что FrontPage и DreamWeaver осуществляли подстановку изображений кнопок.
Но к середине прошлого десятилетия в W3C уже работали над тем, чтобы включить анимацию в CSS . В 2009 году была выпущена первая спецификация CSS-анимации .
Сейчас для анимации на сайте HTML мы можем задействовать аппаратное ускорение для визуализации, сочетая CSS-анимацию с SVG-файлами , библиотеками JavaScript , расширить основные функциональные возможности анимации и многое другое.
Анимация больше не является диковинкой для веб-дизайнеров. В кино она стала основой для нового способа рассказа. Для нас она становится платформой для эффективного проектирования взаимодействий:
Чем больше анимация основывается на открытых стандартах, тем больше людей могут видеть ее. И то, что при применении анимации для взаимодействий акцент все более смещается в эту сторону, это очень хорошо.
Типы веб-анимацииНедостаточно просто добавить анимацию для элементов веб-страницы и надеяться, что это автоматически повысит ее конверсию:
Необходимо тщательно взвесить аспект фактической реализации. Если анимация будет настолько тяжелой, что от нее будут виснуть мобильные устройства пользователей, у вас появится проблема. И не одна.
Начнем с того, что рассмотрим различные виды анимации, используемые в Сети.
Анимации элементов интерфейсаНа мой взгляд, самый полезный вид 3d анимации для сайта . Она позволяет пользователям понять, что их действие было принято. Их клик стал катализатором, необходимым для того, чтобы что-то случилось: переход на другую страницу, открытие окна в сайдбаре или модального, отправка сообщения на электронную почту.
Это очень важно с учетом того, что плоский дизайн становится все более популярным в Сети. Люди должны видеть разницу между элементами интерфейса и просто графикой. Задавая для элементов управления простую анимацию при взаимодействии, мы даем пользователям четко понять эту разницу.
Это может быть изменение цвета кнопки или ее смещение при наведении курсора. Данная категория также включает в себя анимацию, которая задает «всплывание » сайдбаров на странице или появление модальных окон:
Это анимация для сайта , с помощью которой можно дать понять пользователям, что что-то происходит в фоновом режиме.
Ее полезность была доказана давно, когда были изобретены графические пользовательские интерфейсы. Она начиналась с того, что курсор мыши превращался в песочные часы, а также с прогресс-баров. Apple в свое время ввела «вращающийся пляжный мяч смерти «, а у Windows была анимация файлов, перелетающих из одной папки в другую при копировании:
Эти подходы были реализованы в интернете, как только это стало возможно, и не без оснований. Когда люди не понимают, что происходит, они продолжают нажимать кнопку или вводить текст. Но если бы они могли увидеть, что процесс запущен, этого бы не произошло.
Анимация повествованияНа сегодняшний день повествование историй с помощью анимации вышло за рамки мультипликации. Речь вообще не идет о мультфильмах. Скорее о сайтах, которые построены таким образом, что, когда пользователь взаимодействует с ними (например, с помощью прокрутки страницы вниз ), запускается анимация, которая рассказывает историю.
В качестве примера данной анимации на сайте HTML можно привести страницы, которые демонстрируют новый продукт, «собирая » его на экране перед вашими глазами. Другие больше похожи на мультфильмы, в которых маленькие символы указывают на то, что нужно сделать, чтобы увидеть следующий кадр:
Посмотреть пример
Эффективность такой анимации довольно спорна. Как правило, она не предназначена для улучшения юзабилити, а только чтобы произвести впечатление на пользователя и дать ему некоторое представление о теме страницы. Она используется, чтобы показать преимущества товара или рассказать об истории создания компании.
Два моих любимых примера на эту тему связаны с брендами, которые имеют большой опыт работы с подобными вещами: Apple и Sony . Страница, посвященная Mac Pro при прокрутке вниз, показывает, что находится под «капотом » этого устройства:
Посмотреть пример
Компания Sony продемонстрировала несколько различных устройств, части которых компонуются друг с другом в разных комбинациях.
Декоративная анимация
Посмотреть пример
Декоративная анимация для сайта должна быть полностью скрыта. Покажите ее после того, как люди последуют призыву к действию. Также можно включить небольшую анимацию, которая запускается только один раз, когда пользователь делает что-то конкретное. Например, наводит курсор мыши на что-то маленькое в шапке / подвале сайта.
Простой поиск в Google покажет, что есть несколько сайтов, на которых что-то происходит с помощью кода Konami. Другие ресурсы включают в себя известные пасхальные яйца Google , и один из них — photojojo.com :
Посмотреть пример
Прокрутите любую страницу до конца вниз, и появится симпатичный динозавр, который «сфотографирует вас «. Более того, на страницах, содержащих эту анимацию, так же парит из стороны в сторону воздушный шарик.
Анимация в рекламеДобавьте звук, и вы почувствуете приступ ненависти к этой рекламе… это тоже рефлекторное действие.
Это почти неизбежно. Если нужно заставить людей смотреть на рекламные блоки, анимация — это отличный способ. Если бы анимированная реклама не работала, мы бы ее не использовали.
Но с подобной gif анимацией для сайта связана та же проблема, что и с декоративной: она отвлекает пользователя от его цели. В мире онлайн-продаж отвлечение внимания может быть подобно смерти.
Реализация анимацииТехнические аспекты реализации имеют значение, но не зависимо от того, используете ли вы gif , видео, CSS , SVG или даже Flash , существуют принципы, которые более важны.
Производительность, производительность, производительностьПроблема заключается в том, что до сих пор в сети встречаются сайты, использующие новейшие технологии, но анимация на них все равно дергается.
У меня стоит видеокарта Nvidia GTX 750 TI , которая обошлась мне приблизительно в $200. И с ней-то анимация точно не должна проигрываться прерывисто. Но я все равно встречаю в Сети сайты, заходя на которые ловлю себя на мысли: «Марио работает быстрее, чем этот сайт «.
Теперь представьте себе, если бы кто-то зашел на такой сайт со слабенького планшета или смартфона. Этот пользователь никогда бы больше не имел дела с таким медленным сайтом. Если есть только два варианта: медленная анимация или никакой анимации, лучше оставить только голый интерфейс.
Это уже не говоря о сайтах, на которых так много анимации и различных спецэффектов, что им нужны загрузочные панели с индикаторами прогресса. Никто не захочет ждать, пока загрузится 3d анимация для сайта , чтобы увидеть информацию, которая им нужна.
А теперь я дам небольшой технический совет: там, где можно задействовать аппаратное ускорение, CSS почти всегда лучше, чем JavaScript . Всякий раз, когда есть выбор, используйте анимацию на основе CSS , а JS применяйте в качестве запасного варианта.
Начните с малогоЕсли рассматривать анимацию с точки зрения инструмента проектирования, то лучше начать с малого. С одной стороны, небольшая и ненавязчивая анимация работает лучше. С другой стороны, чтобы быть полезной, масштабная и кричащая анимация должна иметь более вескую цель, чем просто «хорошо выглядеть «.
Большинство сайтов вообще не нуждается в какой-либо анимации кроме той, которая применяется, чтобы сделать использование элементов интерфейса «реальным » и естественным. Перед тем, как начать «разбрасывать » на своем сайте параллакс, как конфетти, спросите себя, улучшит ли это опыт взаимодействия пользователей.
В большинстве случаев ответ будет «нет «. Конечно, есть и исключения. Но в подавляющем большинстве лучше просто анимировать кнопки, создать скрытую, всплывающую панель навигации, а «адскую » анимацию вызывать уже после того, как пользователь заполнит и отправит контактную форму.
Продолжительность анимации должна быть небольшойАнимация для сайта должна быть быстрой, или, вернее, она должна проигрываться быстро. Я говорю не о производительности, а о фактическом времени, в течение которого объект находится в движении.
Представьте себе, как мы взаимодействуем с реальными объектами. Иногда мы двигаем их быстрее, иногда медленнее. Скорость, с которой мы взаимодействуем с объектом, может зависеть от его размера, цели, с которой мы с ним взаимодействуем. Но чаще всего мы берем вещи и передвигаем их довольно быстро.
«Миллисекунды » — это, как правило, то количество времени, которое должна занимать анимация интерфейса. Немного дольше, и люди начинают терять терпение, сердиться на свой компьютер или на ваш товар. Необходимо использовать небольшую продолжительность анимации, иначе она будет казаться медленной.
Это особенно актуально для элементов, которые люди должны использовать по несколько раз. Любая анимация на сайте HTML теряет свою привлекательность, когда вынужден смотреть ее в десятый раз.
Слово «анимация» происходит от древне-латинского слова «анима» , что означает “душа” . Попытки вдохнуть жизнь в статичные искусственные объекты появились тысячи и тысячи лет назад, когда Пигмалион попытался разбудить свое творение – статую очаровательной Галатеи.
Сегодня анимация стабильно укоренилась в веб-дизайне и, кажется, отличным дополнением для многих элементов сайта. Она приносит больше жизни в дизайн или может иногда наоборот все испортить? Давайте выясним, какие преимущества может дать анимация вашему веб-сайту и в каких случаях лучше ее избегать?
КАК ПОЯВИЛАСЬ АНИМАЦИЯ В ВЕБ-ДИЗАЙНЕ?
Анимация появилась в сети довольно давно. Сначала были малюсенькие .GIF -файлы с различных движущихся изображений и видеоклипов. Это был темный период с массой мигающих открыток, танцующих кошек и других вещей, которые бы мы предпочли не видеть.
В те далекие времена, никто не рассматривал анимацию как средство повышения юзабилити веб-сайта . В основном она использовалась для украшения или просто для удовольствия. Сегодня, вы можете использовать анимационные эффекты, чтобы улучшить навигацию сайту и его юзабилити.
Совсем недавно, все анимированные элементы и эффекты на сайтах, были созданы с помощью технологии Flash. На тот момент, это была революционная технология, хотя она была очень тяжелой и значительно увеличивала время загрузки сайта. В наши дни, анимация создается с использованием более легкого способа кодирования JavaScript и CSS, которые помогают добавлять движущиеся элементы на сайт, не перегружая его. И, что важнее, анимация сегодня используются для улучшения UX, а не просто для удовольствия. Это выдающийся инструмент для веб-дизайнеров, которые могут помочь сделать сайт лучше и проще в использовании.
УЛУЧШЕНИЕ ЮЗАБИЛИТИ С АНИМАЦИЕЙ
Во многих случаях анимационные эффекты используются для привлечения внимания пользователя к важным деталям, а так же, чтобы помочь ему принять правильное решение в отношении кликабельности элементов, из числа других вещей.
Таким образом, многие веб-сайты используют эффект тряски для форм входа или регистрации, чтобы указать своим пользователям на ошибку. Например, введение неправильной информации или неверного пароля. Эта тенденция имитирует человека, трясущего головой, говоря «нет».
Есть много других способов использования анимации для улучшения UX. Она может быть использована в навигации, чтобы отделить категории от подкатегорий или в мульти-выборе, когда все остальные элементы постепенно исчезают, кроме выбранного.
E
TECHEVENT – САЙТ С АНИМИРОВАННЫМИ ЭЛЕМЕНТАМИ
Анимации могут быть использованы, чтобы направлять пользователя по всему сайту и даже заставить их купить что-либо. Добавление интерактивных элементов и привлечение внимания пользователей к ним с помощью эффектов анимации, может помочь бизнес-сайтам повысить свои конверсии и
ROI.
ИНТЕРАКТИВНЫЙ САЙТ A
PPS
Сайт
сторителлинг
может также извлечь выгоду из анимации. Она может помочь в демонстрации пользователям, что необходимо сделать в следующем шаге или как выбрать, куда идти дальше.
ИСПОЛЬЗОВАНИЕ АНИМАЦИИ В МАТЕРИАЛЬНОМ ДИЗАЙНЕ
Анимация в веб-дизайне - это хороший ход, который может оказаться чрезвычайно полезным, если не используется только в декоративных целях. UI и UX дизайнеры сейчас часто используют анимацию для совершенствования своего рабочего процесса. Даже Гугл понимает важность такого движения для юзабилити. Так и появился материальный дизайн .
Материальный дизайн становится все более и более модным и сегодня он используется в различных приложениях и веб-дизайне. Секрет его популярности кроется в высоком внимание к тому, как объект или элемент воспринимаются. Как движение может рассказать пользователю больше об этом элементе и том, как его использовать.
В своем «Руководстве по материальному дизайну» Google утверждает, что движение может сообщить пользователям, что объект легкий, тяжелый, гибкий, и даже большой или маленький. Анимация должна быть использована, чтобы предоставить пользователям больше понимания того, какова природа объекта, а, следовательно, как он может и должен быть использован в дизайне.
Гугл идет дальше со своей анимацией и рекомендует использовать движущиеся элементы, которые изменяют свою скорость и продолжительность в зависимости от того, какую цель или эффект вы хотите получить. Таким образом, компания Google применяет входящие и исходящие элементы, которые появляются на экране, когда они должны привлечь внимание, или исчезают с экрана, когда они больше не нужны.
СОВЕТЫ ПО АНИМАЦИИ, ИСПОЛЬЗУЕМОЙ НА ВЕБ-САЙТАХ
При реализации анимации на вашем сайте, вы должны так же тщательно изучить все подводные камни. Анимированные элементы могут до сих пор вредить производительность сайта и UX.
Во-первых, вы должны хорошо проверить, если анимация не замедляет работу вашего сайта , скорость загрузки и общую производительность. Это может быть выявлено с помощью простого сравнения вашего сайта с анимацией и производительностью тяжеловесной игры для ПК. Если игра работает более плавно на вашем рабочем столе, чем веб-сайт – это должна послужить причиной для пересмотра используемой анимации.
The Happy Forecast Website
Используйте CSS при создании анимации для вашего веб-сайта. JQuery является идеальным и используется во многих проектах, но он может очень замедлить производительность вашего веб-сайта. Код CSS позволяет создавать несложные анимации, которые будут хорошо выглядеть на любом устройстве, не перегружая дизайн и делая его выполнение отличным.
Убедитесь, что ваша анимация отзывчива . Отзывчивость веб-сайта является обязательной, если вы хотите добиться успеха. А если он работает и отлично смотрится только на экране рабочего стола - вы можете проиграть битву за пользователей. Существует множество инструментов, которые позволяют создавать отзывчивую анимацию (например, Adobe After Effects или Invision) и сайтостроители (Webflow и MotoCMS), которые включают отзывчивые анимированные эффекты в свой рабочий процесс. Они предлагают различные виды анимации, которые могут использоваться внутри сайта, улучшить его юзабилити и дизайн.
Анимация должна привлекать внимание , но не слишком много. Убедитесь, что движение не отнимает слишком много времени и не длится слишком долго на экране. Это особенно важно, если мы говорим об элементах, с которыми пользователи должны часто взаимодействовать. Один или два раза это может быть весело, но при частом использовании анимация становится надоедливой.
Laerepenger Website
Начните с использования мелких движущихся элементов на сайте. На самом деле, анимация - это всего лишь средство достижения цели, но не сама цель. Вы не должны включать ее везде, где только захочется. Помните - использование должно быть оправданным.
Лучше всего включить анимацию в элементы пользовательского интерфейса или объекты, с которыми пользователи взаимодействуют чаще всего. Такие как навигационное меню или форма подписки. И подумайте хорошо, прежде чем добавлять подпрыгивающее поле или скользящий образ: как это повлияет на пользовательский опыт, улучшит ли взаимодействие с сайтом?
Анимация отлично подходит для создания незабываемого дизайна. Она по-прежнему широко используется в веб-дизайн, несмотря на различные мелкие проблемки со скоростью загрузки или зависанием. Но главное, что вы должны помнить при внедрении анимированных элементов – это их влияние на юзабилити. А вот где и в каком количестве интегрировать анимацию в ваш сайт – зависит только от вас.
Ну и в конце, несколько примеров, когда анимация была использована с точным попаданием в цель.
Kikk Website
Nodeplus Digital Agency 
Creative Cruise 
Animated Scenery Vintage Farm 
Pomade Digital Agency 
Анимация элементов Web-страниц
Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Вы можете создавать простую анимацию на Web-страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям. Причем никакой модификации HTML-кода, кроме добавления соответствующих сценариев, не требуется (конечно, если соответствующие элементы на странице уже созданы).
Такая анимация может служить двум задачам. В простейшем случае она позволит оживить Web-страницы, сделать их привлекательнее, завлечь посетителя на сайт. (Количество посетителей - это единственная мера качества того или иного интернет-ресурса.) Также она позволит создать учебные пособия, которые можно выложить в Интернет или распространять на компакт-дисках. (Преподаватели школ и прочих учебных заведений - это для вас!) К несчастью, Web-дизайнеры мало используют такую интересную возможность.
Было сказано, что, кроме написания сценариев, собственно реализующих анимацию, и привязки их к определенным событиям, никакой особой переделки HTML-кода не требуется. Однако написание сценариев - задача, довольно сложная сама по себе. Мало того, что для этого нужно знать сам язык программирования JavaScript, следует хорошо представлять себе, как работают внутренние механизмы программы Web-обозревателя и как получить к ним доступ, чтобы использовать потом в своих нуждах. Кроме того, необходимо знать, как реализуется анимация, за счет чего элемент страницы будет казаться движущимся. И, конечно же, нужно иметь художественный вкус и - обязательно! - чувство меры.
Хорошо! С художественным вкусом и чувством меры проблем нет. Но есть проблемы с JavaScript и внутренними механизмами Web-обозревателя. Точнее сказать, мы не знаем ни того, ни другого. И все же очень хотим создать на своих страницах какую-нибудь, хотя бы простенькую, анимацию. Что делать?
Воспользоваться Dreamweaver. Он предоставляет очень удобный способ создания анимированных элементов без углубления в JavaScript и темные недра Web-обозревателя. Вы просто указываете траекторию движения того или иного элемента, после чего задаете некоторые параметры - и сразу же получаете результат. Dreamweaver сам создает необходимые JavaScript-сценарии и помещает их в HTML-код страницы. Удобно, правда?
Давайте же выясним, как все это делается. Но не сейчас. В настоящее время нам нужно узнать кое-что еще. А именно о программах-сценариях, их назначении и о том, как создается анимация. Не пугайтесь: мы с вами не будем писать сценарии вручную (пусть это делает Dreamweaver), а просто поговорим об основных принципах, которые знать в любом случае.невредно.
Введение в Web-сценарии
Зачем нужны сценарии? Чтобы преодолеть ограничения HTML. He все, конечно, - только одно.
Ограничения HTML
Так в чем же ограничивает нас HTML? Зачем понадобилось придумывать еще один язык? Нельзя ли обойтись без него?
В общем, можно. Обходились же мы на протяжении целых одиннадцати глав обычным HTML, и ничего! Но дело в том, что странички-то мы делали неинтерактивные, т. е. не взаимодействующие с пользователем, не меняющие свое содержимое в ответ на его действия. Для таких страниц хватит и "чистого" HTML. А как только вы захотите "научить" страницу взаимодействовать с пользователем, т. е. сделать интерактивной, вы сразу упретесь в непреодолимую стену.
А все потому, что HTML не позволяет задать поведение страницы в ответ, скажем, на щелчок мыши по одному из ее элементов. С его помощью задается только ее внешний вид. И этим он в корне отличается от "классических" языков программирования, описывающих как раз поведение.
Собственно, HTML - и не язык программирования, а язык описания Web-страниц - и не более. Он описывает, как должна выглядеть информация в окне Web-обозревателя, только и всего. Причем, этот внешний вид жестко стандартизирован; Web-дизайнер, как вы уже поняли, значительно сильнее ограничен в своих возможностях, чем дизайнер-полиграфист. Особых вольностей на Web-страницах он не сделает. (Фреймы, таблицы разметки и каскадные таблицы стилей CSS снимают многие ограничения, но не все.)
Конечно, такие ограничения обусловлены благой целью - обеспечением совместимости и единообразия внешнего вида страниц на любой компьютерной платформе. Но кому нужна совместимость такой ценой!
Вы можете сказать, что любая Web-страница и так йвляется интерактивной, т. к. реагирует на щелчки по гиперссылкам. Но это не интерактивность, а стандартное поведение, заданное HTML. Интерактивность - это когда в ответ на перемещение курсора мыши за ним "бежит" картинка, когда при щелчке на фотографии внизу появляется ее описание, когда прямо на страничке "тикают" цифровые часы. Вот это настоящая интерактивность: в первом и втором случаях страница реагирует на действия пользователя, а в третьем - на события внешней среды. (Здесь под внешней средой подразумевается операционная система; работающий в ней системный таймер заставляет идти нарисованные часы.) И обычный HTML не может ее обеспечить.
Чтобы преодолеть этот недостаток "чистого" HTML, были придуманы два пути.
Первый путь - это специальные, как правило, нестандартные, "фирменные", теги, расширяющие возможности языка. В подавляющем большинстве случаев они добавляют Web-страницам интерактивные возможности. Например, нестандартный парный тег . . ., поддерживаемый Internet Explorer, позволяет создать на странице "прокручивающийся" текст. Но, согласитесь, эти расширения ограничивают Web-дизайнера теми возможностями, что вложили в них разработчики Web-обозревателя. И вы не сможете заставить текст в элементе не прокручиваться, а последовательно менять цвета - разработчики Internet Explorer этого не предусмотрели.
Мы хотим сами задавать поведение элементов страниц в ответ на действия пользователя. Мы хотим сами контролировать их поведение, держать все нити управления в своих руках. HTML их нам предоставить не может; ограничения, обусловленные самой его природой, - стена, преодолеть которую невозможно. Однако, если стену нельзя перепрыгнуть, ее можно обойти. Так мы и сделаем.
Web-сценарии
Второй путь - внедрение в HTML-код особых программ, написанных на "классических" языках программирования, т. е. описывающих поведение элементов. Такие программы называются сценариями (или скриптами от англ, script - сценарий). (Почему они так называются? Можете считать, что эти программы описывают сценарии поведения какого-нибудь элемента при наступлении того или иного события.) Эти программы помещаются в HTML-код с помошыо особого, специально для такого случая стандартизированного комитетом WWWC парного тега . . .. 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-сценариев.
В частности, если требуется, чтобы при наведении курсора мыши на изображение внизу появлялось его краткое описание, нужно сделать следующее. Под изображением помещается свободно позиционируемый элемент, содержащий текст описания, и этот элемент делается невидимым. Далее пишутся два сценария, привязанные к событиям, возникающим при наведении курсора мыши на графическое изображение и при "уводе" его прочь. Первый из этих сценариев делает элемент с описанием видимым, второй - невидимым. После этого написанные сценарии привязываются к соответствующим событиям, происходящим в элементе графического изображения. Вот и все.
Не будем рассматривать конкретные детали реализации этого эффекта. Во-первых, «ни слишком зависят от выбора языка программирования, а первый (и, кстати, последний в этой книге) сценарий JavaScript мы напишем и изучим в главе 13. Во-вторых, в данный момент требуется анимировать элемент страницы, т. е. заставить его двигаться.
В большинстве интерактивных Web-страниц большая часть сценариев представляет собой как раз обработчики событий. Именно они реализуют большую часть логики поведения страницы при взаимодействии с пользователем. (Хотя существует определенный процент сценариев, выполняемых сразу же после расшифровки; в основном, это код, производящий всяческие предустановки.) Такой подход, когда почти вся программа представляет собой обработчики событий, называется событийно-управляемым программированием.
Но мы отвлеклись. Давайте все же вернемся к нашей анимации. А разговор о программировании продолжим в главе 13, посвященной как раз Web-сценариям и работе с ними в среде Dreamweaver.
Основные принципы анимации
Наконец-то дошла очередь и до анимации. Рассмотрим некоторые базовые понятия, без которых в дальнейшем нам не обойтись.
Не раз уже говорилось, что анимировать можно только свободно позиционируемые элементы. Не забывайте это. Только свободные элементы могут быть помещены в любое место страницы, и лишь они могут управляться из сценариев. Запомните это.
Простейшая анимация
Итак, за счет чего же достигается эффект анимации? Почему элемент страницы кажется движущимся по ней?
Дело в том, что координаты элемента периодически меняются. И меняются весьма быстро, не реже 12 раз в секунду, за счет чего мы и наблюдаем непрерывное движение. Такая частота выбрана оттого, что именно на ней человеческий глаз теряет способность различать отдельные приращения, "скачки" прерывистого движения. Короче говоря, за этим пределом прерывистое движение становится для человека визуально непрерывным. (На этом же принципе, кстати, работают кинематограф и телевидение.) Компьютеры у нас сейчас достаточно мощные, так что обеспечить такую частоту смены координат вполне реально.
Но мало всего лишь изменить координаты элемента. Нужно изменить их по особому закону, описывающему траекторию движения элемента. Если элемент движется по прямолинейной траектории, этот закон очень прост. В случае криволинейного движения он сильно усложняется. Поэтому не стоит создавать на своих страницах слишком сложные анимации: маломощный компьютер просто не "потянет" чересчур замысловатые траектории.
Закон, по которому изменяются координаты анимированного элемента, иначе говоря, его траектория, описывается особой функцией (назовем ее функцией траектории). Такая функция принимает некоторые параметры и возвращает координаты элемента. Она имеет вид:
{х, у, z} = f(Q, q, dq)
С возвращаемыми этой функцией результатами все просто, х, у и z - координаты анимированного элемента, соответственно, горизонтальная, вертикальная и порядок перекрытия (уже знакомый вам z-индекс). Конечно, функция, возвращающая сразу три координаты, - это общий случай. Обычно изменяется одна или две координаты элемента - х и у.
А вот с параметрами, принимаемыми функцией, все несколько сложнее. Всего, как вы видите, их три, и назначение их неочевидно. Давайте же рассмотрим все эти параметры по порядку.
Самый первый параметр - Q. Это длина траектории движения анимированного элемента. Она может измеряться в пикселах, миллиметрах, градусах или каких-либо относительных единицах, например процентах. Вообще, единица измерения зависит от самой траектории: для прямолинейной больше подойдут пикселы или миллиметры, а для круговой - градусы или радианы. Важно одно: параметр Q должен каким-то образом обозначать полную длину траектории, по которой будет двигаться наш элемент.
Второй параметр (q) обозначает позицию на траектории, занимаемую в данный момент времени нашим элементом. Иными словами, это расстояние в единицах измерения траектории Q, которое он уже "пробежал". Получив его, наша функция должна сказать: "элемент здесь" и, что называется, "ткнуть пальцем" в точку на его траектории.
Последний, третий параметр - dq. Он задает приращение, на которое будет меняться дистанция q при каждом "скачке" анимированного элемента. Beличина этого параметра задает скорость движения анимированного элемента.
Итак, что же должна делать функция траектории. Ниже перечислены все ее задачи в порядке выполнения.
Это общий алгоритм, которому должны следовать все функции траектории, даже самые сложные. Фактически основная сложность заключается в реализации шага 2, т. е. вычислении координат на основе значения q. Остальные шаги реализуются очень просто и не составят трудности даже для начинающего программиста.
В разговоре о простейшей анимации подразумевалось, что существует одна-единственная функция, реализующая ее. Реально для создания анимации может использоваться несколько программ-сценариев. Автор объединил их в одну функцию, чтобы вам было понятнее.
Предполагалось, что когда анимированный элемент достигает конца траектории (q становится равной или больше Q), анимация останавливается. На самом деле, функция траектории может продолжить работу. Она может, например, просто снова выполнить начальные установки, поместив анимированный элемент в начало траектории, и запустить анимацию снова. Но лучше всего инвертировать значение dq (изменить положительное значение на отрицательное и наоборот) и пустить анимацию "задом наперед". Такая анимация, проигрывающаяся несколько или бесконечное количество раз, называется зацикленной.
Конечно, зацикленная анимация выглядит эффектнее. Но злоупотреблять ей не стоит, особенно бесконечной. Почему - вы сейчас узнаете.
Анимация реального времени
Мы только что рассмотрели способ создания на Web-странице простейшей анимации. Но дело в том, что в реальной жизни такая анимация применяется крайне редко. Более того, автор категорически не рекомендует вам даже пытаться ее сделать.
Почему? Дело в том, что вышеописанный способ создания анимации имеет только одно более чем сомнительное достоинство и два огромнейших недостатка.
Достоинство - простота, более того, очевидность реализации. Любой программист, даже малоквалифицированный, может сесть и в пять минут накропать сценарий, реализующий движение элемента по прямолинейной траектории. Да, он это сделает, даже если до этого ни разу не занимался Web-программированием.
Но пусть он только попробует выложить свое творение в Сеть!
Давайте представим двоих интернетчиков, решивших посетить его страничку с анимацией. У одного компьютер десятилетней давности, старенький, заслуженный, едва-едва обрабатывающий современные сложные Web-странички, даже без мультимедийных "наворотов". У другого - мощнейшая наисовременнейшая машина, только что сошедшая со сборочных столов какого-нибудь известного "брэнда". Вот они заходят-таки на страничку, загружают ее и принимаются наблюдать за анимацией.
Компьютер первого посетителя с натугой загрузит ее и, треща жестким диском, начнет ни шатко ни валко выполнять сценарии, реализующие анимацию. Анимированный элемент худо-бедно движется по странице, посетитель доволен - работает. Теперь оставим его и взглянем на посетителя номер два. Его компьютер мгновенно загрузит страничку и мгновенно же выполнит все сценарии. Анимированный элемент пролетит по своей траектории так быстро, что человеческий глаз его движения даже не заметит.
Спрашивается, кому нужна такая анимация?
Но это полбеды. Беда настанет, если наш незадачливый программист решит сделать анимацию зацикленной, бесконечной. Теперь смотрите, что получится. Страница загружается в Web-обозревателе, интерпретатор начинает выполнять сценарии... и выполняет... выполняет... выполняет... А пока он их выполняет, пользователь ничего не сможет сделать со страничкой: ни щелкнуть по гиперссылке, ни даже прокрутить ее в окне. Единственный способ прервать затянувшееся "кино" - закрыть сам Web-обозреватель.
Но что делать? Ведь Web-программисты как-то реализуют анимацию на своих страницах, и она работает нормально, в смысле, не мешает пользователю прокручивать страницу и щелкать по ссылкам. Может, они знают какой-нибудь секрет?
Да, знают. И заключается этот секрет в том, что они используют немного другую функцию траектории:
{х, y, z} = f(Q, q, dq, t)
От уже знакомой нам функции она отличается тем, что принимает еще один параметр - t. Этот параметр - время. Иначе говоря, при расчете координат функция траектории учитывает текущее время. И анимация оказывается жестко привязанной к времени, которое везде течет одинаково, в отличие от тактовой частоты процессоров, которые различаются у разных компьютеров.
Как это реализуется? Дело в том, что новая функция выполняется не все время, пока работает анимация, а вызывается время от времени, тогда, когда нужно произвести очередной "скачок" анимации, и после этого прекращает свою работу, дожидаясь очередного вызова. Эта функция реализуется в виде сценария-обработчика внутреннего события - "тика" системного таймера.
Таким образом, анимация оказывается четко привязанной к времени. И на стареньком компьютере посетителя номер один, и на суперсовременной машине номера два анимированный элемент будет двигаться с одной и той же скоростью. (Конечно, на более мощном компьютере анимация, возможно, будет выполняться плавнее, но с той же скоростью, что и на более мощном.)
Далее. Так как функция траектории вызывается только время от времени, а не работает постоянно, пользователь может нормально взаимодействовать с Web-страницей. Web-обозревателю между "тиками" таймера остается предостаточно времени, чтобы обработать пользовательские запросы.
Давайте приведем список задач новой функции траектории в порядке выполнения.
Для реализации этой функции используются два сценария. Один из них выполняется при загрузке страницы и реализует задачу шага 1. Второй -собственно обработчик событий системного таймера - реализует задачи шагов 2-5.
Такая анимация, привязанная к системному таймеру, а не к процессору, называется анимацией реального времени. Именно она и применяется для создания движущихся элементов на Web-страницах. Простейшая анимация, описанная нами ранее, практически нигде не используется. Вы уже поняли, почему.
Анимация - подход Dreamweaver
Описанный выше способ создания анимации с помощью сценариев, реализующих функцию траектории, обладает множеством достоинств. Такие сценарии имеют очень малый размер и очень быстро выполняются, т. к. программист имеет возможность написать функцию траектории наиболее оптимальным способом. Однако у них есть один огромный недостаток -негибкость. Фактически для изменения траектории движения анимирован-ного элемента нужно писать новый сценарий, реализующий новую функцию траектории.
Но негибкость - не единственный недостаток этого способа создания анимации. Если анимированный элемент должен совершать достаточно сложное движение, реализующий эту траекторию сценарий получается очень большим и медленным. И чем сложнее траектория, тем больше и медленнее получается сценарий.
Третий недостаток - сложность реализации сложных траекторий. Извините за тавтологию, но это так. Малоопытные программисты, особенно не имеющие серьезной математической подготовки, обычно ограничиваются простенькими траекториями, как правило, прямолинейными. Максимум, на что они отваживаются, - это простой эллипс. А ведь для некоторых задач, которые будут рассмотрены ниже, нужны как раз довольно сложные траектории движения. И обойтись простыми траекториями весьма проблематично.
Однако и из этого положения есть выход. На помощь неопытным программистам, не владеющим высшей математикой, придет новый вид функции траектории, принимающей всего два параметра: массив ключевых точек траектории и, естественно, текущее время:
{х, у, z} = f()
Насчет времени все понятно, но что такое массив ключевых точек? Ничего сложного: это набор точек, с помощью которого задается траектория движения нашего анимированного элемента. Поясним это более подробно.
Предположим, что нам нужно создать очень сложную анимацию, когда элемент страницы движется по весьма причудливой траектории. При этом высшей математикой мы не владеем, поэтому вывести формулу этой траектории не сможем. Однако мы придумали вот что.
Можно сделать немного по-другому. Прежде всего, пометим и пронумеруем ключевые точки прямо на нарисованной траектории. Далее отдельно по линейке прямую и проставим на ней координатную шкалу времени, проградуировав ее, скажем, в секундах. Отметим вдоль этой шкалы напротив соответствующих делений точки начала и конца анимации, проведем между ними линию потолще и назовем ее дорожкой анимации. После этого останется только пронумеровать ключевые точки и проставить их на дорожке напротив соответствующих отметок времени. В результате мы получим набор точек, координаты и время прохождения которых можно легко вычислить (соответственно, на нарисованной схеме и временной шкале). Согласитесь, так много нагляднее.
Мы начертили траекторию движения нашего элемента на миллиметровой бумаге, после чего выделили на данной траектории нужное количество ключевых точек, которые ее, собственно, и создают (точки перегиба, начало и конец траектории и т. п.), и выписали их координаты на отдельную бумажку. Далее, зная время, за которое анимированный элемент пройдет всю траекторию, мы можем выяснить, в какой момент времени он появится в той или иной ключевой точке. Осталось только выписать эти значения времени на ту же бумажку, проставив их напротив координат соответствующих точек. Вот мы и получили массив ключевых точек, который можно передать новой функции траектории.
Этот подход и используется 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-сценариев и, при желании, позаимствовать оттуда парочку ваших находок. Поэтому, если вы собираетесь применять в учебных пособиях какие-либо ноу-хау, лучше реализуйте их в обычной, откомпилированной программе, Взломать которую гораздо труднее.
Вот три случая, когда анимация будет очень полезна. А в ряде случаев и необходима. Если же ваш случай к ним не относится, лучше обойтись обычными Web-страничками, больше внимания уделив их содержимому.
Создание анимации в Dreamweaver
Вот и пришла пора нашей любимой программы - Dreamweaver. Сейчас будет рассказано, как она поможет в создании анимированного элемента. А в качестве элемента, который мы будем "оживлять", возьмем заголовок страницы default2.htm, созданной в главе 11.
Но, прежде всего, условимся о терминологии, используемой в Dreamweaver. Знание ее поможет нам в дальнейшей работе. Итак:
- набор анимированных элементов, чье движение синхронизировано относительно одной и той же временной шкалы, назовем анимацией. Это нужно нам, потому что одна Web-страница может содержать несколько независимых анимаций, т. е. наборов анимированных элементов, синхронизированных относительно независимых временных шкал;
- полоска, проходящая из точки начала анимации одного из элементов в точку ее конца, пусть называется дорожкой анимации. Этот термин мы уже ввели и теперь его закрепим. Дорожка показывает, когда анимиро-ванный элемент начнет двигаться и когда он остановится;
- свободное пространство на временной шкале анимации, которое может быть занято дорожкой, будет называться каналом. Количество доступных каналов определяет максимальное количество дорожек в одной анимации, а значит, максимальное количество входящих в нее анимированных элементов.
Вот и все термины. Теперь откроем страницу default2.htm в окне документа и начнем...
Создание простейшей анимации
Для работы нам сразу же понадобится панель Timelines, в которой отображаются все анимации, созданные на Web-странице. Чтобы вывести эту панель на экран, включите пункт-выключатель Timelines в подменю Others меню Window или нажмите комбинацию клавиш +. Сама панель Timelines показана на рис. 12.1.
Как видите, панель Timelines находится в еще одном доке, занимающем нижнюю часть главного окна Dreamweaver. Это значит, что мы можем скрыть панель Timelines (и любые другие панели, которые вы поместите в док), если она нам не нужна, щелкнув по кнопке скрытия дока, а потом вернуть ее на экран.
Большую часть этой панели занимает временная шкала, но проградуиро-ванная не в секундах, а в кадрах анимации - так удобнее. Значения времени (в кадрах) написаны на серой временной шкале, расположенной выше. Под этой шкалой отображаются все доступные каналы анимации, и занятые, и незанятые. В верхней же части панели находятся несколько элементов управления, предназначенных для задания некоторых параметров дорожек и самой анимации.
Рис. 12.1. Панель Timelines
"Но ведь Dreamweaver позволяет работать одновременно с несколькими временными шкалами, - скажете вы. - Где же остальные шкалы?" Чтобы увидеть их, нужно выбрать соответствующий пункт комбинированного списка анимаций, показанного на рис. 12.2.
Рис. 12.2. Комбинированный список анимаций
Работой с несколькими разными анимациями мы займемся потом. А сейчас давайте создадим одну из них, самую простую.
Чтобы анимировать какой-либо из доступных свободно позиционируемых элементов, нужно поместить его на шкалу времени, создав дорожку анимации. Для этого выделим требуемый свободный элемент, щелкнем по нему правой кнопкой мыши и выберем в контекстном меню пункт Add to Timeline. Вы также можете выбрать пункт Add Object контекстного меню временной линии или пункт Add Object to Timeline подменю Timeline меню Modify. И, наконец, вы можете просто нажать комбинацию клавиш +++.
После добавления в анимацию свободного элемента Dreamweaver выводит предупреждение, показанное на рис. 12.3. Этим он хочет сказать, что может управлять в процессе анимации следующими параметрами свободного элемента:
- горизонтальной и вертикальной координатами левого верхнего угла (атрибуты LEFT и ТОР);
- шириной и высотой (атрибуты WIDTH и HEIGHT), причем работать это будет только в Internet Explorer;
- порядком перекрытия, иначе говоря, z-индексом (атрибут Z-INDEX);
- видимостью (атрибут VISIBILITY).
Рис. 12.3. Предупреждение, выводимое Dreamweaver после добавления свободного элемента в анимацию
Это значит, что вы можете управлять местоположением, размерами и видимостью свободного элемента. Как видите, возможностей, предлагаемых Dreamweaver для анимации, даже больше, чем мы думали.
Теперь закройте данное предупреждение нажатием кнопки ОК. Если вы не желаете больше его видеть, перед закрытием включите флажок Don"t show me this message again.
Наконец, после всех треволнений, мы увидим в списке панели Timelines новую дорожку (рис. 12.4). Она отображается в виде светло-синей полосы, на которой написано имя свободного элемента, которому она принадлежит. По обеим сторонам данной полосы можно заметить светлые кружки. Это ключевые точки; их пока всего две: начало и конец траектории. Первая ключевая точка - начало - находится на первом кадре; это значит, что анимация для данного элемента начнется с первого кадра. Вторая ключевая точка - конец траектории - находится на пятнадцатом кадре; там наш анимированный элемент перестанет двигаться.
Рис. 12.4. Новая дорожка анимации
Вы можете выбирать как ключевые точки (в данном случае они выделяются темно-синим цветом), так и саму дорожку (в этом случае она вся становится темно-синей), просто щелкая по ним мышью. Более того, вы можете щелкнуть по любому месту на дорожке анимации, выделив таким образом какой-либо ее кадр. В этом случае на временной шкале появится маркер выделенного кадра, показанный на рис. 12.5.
Рис. 12.5. Маркер выделенного кадра
Если вас не устраивает местоположение дорожки анимации, вы можете легко его изменить. Для этого "ухватите" мышью дорожку (не ключевые точки!) и перетащите ее вдоль шкалы, пока она не займет нужную позицию. Например, вы можете заставить анимацию начинаться с десятого кадра, а заканчиваться - двадцать пятым. Также вы можете изменять длину дорожки, а значит, продолжительность анимации, перетаскивая на необходимую позицию теперь уже ключевые точки. И, разумеется, вы можете удалить ненужную дорожку, выделив ее и нажав клавишу или выбрав пункт Remove Object контекстного меню или подменю Timeline меню Modify.
Ну что ж, давайте проверим свежесозданную анимацию. Нажимаем клавишу , чтобы загрузить страницу defaiilt2.htm в Web-обозревателе, и... наблюдаем совершенно неподвижное изображение. В чем же дело?
А дело в том, что начало и конец траектории движения нашего анимиро-ванного заголовка совпадают, т. е. никакой траектории нет, заголовок все время стоит в одной точке! Мы забыли задать траекторию!!!
Ну, ничего. Это не страшно. Сейчас мы все исправим.
Траектория в Dreamweaver задается следующим образом. Каждая ключевая точка представляет собой как бы "снимок" того состояния, в котором будет пребывать анимированный элемент. Выбрав ключевую точку, вы задаете нужные параметры свободно позиционируемого элемента (координаты, размеры и видимость), a Dreamweaver их запоминает, создавая тем самым данный "снимок". Исходя из этих снимков, он сам вычисляет все промежуточные состояния анимированного элемента, в которых он будет находиться между ключевыми точками. Поэтому, чтобы создать анимацию любой сложности, вам достаточно будет задать необходимые параметры нужных элементов страницы только в ключевых точках анимации. Dreamweaver сам сделает все остальное.
Предположим, наш заголовок будет "выплывать" из нижнего правого угла страницы и перемещаться прямо на свое законное место. Поскольку траектория его движения очень проста (прямая линия), для ее задания мы нуждаемся всего в двух ключевых точках. В первой ключевой точке заголовок находится в нижнем правом углу страницы, а во второй - в ее верхней части, там, где он и должен быть. В этих точках мы и должны задать параметры нашего заголовка, точнее, всего два параметра - горизонтальную и вертикальную координаты. (Наш заголовок во время движения не меняет ни размеры, ни видимость.)
Выделим первую ключевую точку, находящуюся в начале дорожки, щелкнув по ней мышью. Далее "захватим" заголовок (свободный элемент Header) мышью и переместим его в правый нижний угол страницы, в начало его траектории. Теперь выделим вторую ключевую точку. Здесь нам менять ничего не нужно, т. к. заголовок уже стоит на своем месте. Вот, собственно, и все.
На рис. 12.6 показано то, что у нас получится после всех этих манипуляций. Хорошо видна тонкая серая линия траектории, отображаемая в окне документа, если в окне документа выделен анимированный элемент Header. Причем анимированный элемент будет находиться в том месте траектории, которое мы выделим на дорожке анимации. Так, если выделить вторую ключевую точку, он перескочит на свое законное место в верхней части страницы. А если выделить какую-либо промежуточную точку между первой и второй ключевыми точками, он займет соответствующее этой точке место.
Рис. 12.6. Готовая траектория анимированного элемента (выделена первая ключевая точка)
Вот теперь можно и проверить наше творение. Загрузите получившуюся страницу в Web-обозревателе и посмотрите, что получится. А получится... все то же самое - опять-таки неподвижный заголовок. Что же мы на этот раз забыли?
Чтобы анимация запустилась сразу после загрузки страницы Web-обозревателем, Dreamweaver должен создать небольшой сценарий, который, собственно, ее и запускает. Но, по умолчанию, он этого не делает. Он предполагает, что вы хотите, чтобы анимация проигрывалась в ответ на действие пользователя, например щелчок по изображению. Но нам-то нужно, чтобы заголовок начинал свой путь сразу же, как только страница будет загружена. Для этого нам придется сделать соответствующие установки.
Сделать их очень просто. Вернемся в панель Timelines и включим флажок Autoplay, расположенный в верхней части этой панели. Dreamweaver, по своему обыкновению, выдаст очередное предупреждение, что сейчас в код страницы будет добавлен соответствующий сценарий. Избавьтесь от этого предупреждения, нажав кнопку ОК; если не хотите больше его видеть, можете включить перед этим флажок Don"t show me this message again. Вот теперь все на самом деле готово. Загрузите страницу в Web-обозреватель и убедитесь в этом.
Ура! Заработало!
Анимированный заголовок бодро пробежит заданную нами траекторию и замрет прямо над своей тенью. Конечно, плохо, что тень существует независимо от него, но мы это вскоре исправим. Не совсем хорошо также и то, что заголовок перемещается под остальными свободно позиционируемыми элементами, но вы можете исправить это прямо сейчас, просто изменив его z-индекс. Сохраним полученную страницу. И продолжим...
Более сложная анимация
Все-таки нехорошо, что заголовок и его тень (свободный элемент Headershadow) существуют отдельно. Давайте сделаем так, чтобы тень, пока заголовок движется к ней, была невидима на экране и появлялась лишь в самый последний момент. Для этого нам необходимо будет добавить свободный элемент, создающий эту тень, в анимацию, создав еще одну анимационную дорожку.
Выберите свободный элемент Headershadow и добавьте его в анимацию. Как это сделать, вы уже знаете. Получившийся результат можно увидеть на рис. 12.7.
Проследите, чтобы обе дорожки находились точно друг под другом. Если вторая дорожка получилась смещенной относительно первой, измените ее местоположение и (или) размер.
Рис. 12.7. Две дорожки анимации
Для тени мы не будем создавать траекторию движения, т. к. она не движется, а стоит на месте. Она должна просто появляться, когда заголовок "дойдет до точки". Поэтому никуда ее не перемещайте. А просто измените параметр видимости.
Итак, в начале траектории движения заголовка (первая ключевая точка) тень должна быть невидимой. Поэтому выделите первую ключевую точку второй дорожки и задайте в редакторе свойств значение hidden для параметра Vis. Теперь тень останется невидимой до тех пор, пока мы не изменим значение параметра видимости во второй ключевой точке (конец траектории движения заголовка). Так как по умолчанию параметр Vis имеет значение inherit ("наследование" видимости у родителя), а родитель (сама Web-страница) у нас видимый, специально задавать это значение во второй ключевой точке нам не нужно. На всякий случай проверьте, что на конце временной линии тень видима (параметр Vis должен иметь значение inherit или visible).
Сохраните результат вашей работы и откройте его в Web-обозревателе. Теперь тень будет скромно "прятаться", пока не "подъедет" ее "хозяин".
Все! Надоели нам прямолинейные, как трамвайные рельсы, траектории движения наших элементов. Хотим чего-нибудь извилистого и зигзагообразного, как пресловутый путь к истине. Пусть наш заголовок в своем пути "наверх" обходит всю Web-страницу. Это будет выглядеть эффектнее, да и мы заодно проверим, так ли хорош этот Dreamweaver, как его расхваливают.
Что ж, Dreamweaver достойно выдержит испытание извилистостью. И давайте в этом убедимся. Но сначала слегка удлиним траекторию, скажем, до 50 кадров. "Захватим" мышью вторую ключевую точку дорожки заголовка и переместим ее до соответствующего деления временной шкалы. И не забудем сделать то же самое с дорожкой элемента-тени!
Вот теперь можно и попетлять.
Как вы помните, ключевые точки, собственно, и задают траекторию движения анимированного элемента. Добавим также, что траектория его движения должна задаваться минимальным количеством ключевых точек. Для прямой, как мы уже убедились, вполне хватает двух точек, для изломанной линии - трех, а для окружности их понадобится, как минимум, десятка два, чтобы движение анимированного элемента выглядело более-менее плавным. В общем, Dreamweaver, приняв от вас набор ключевых точек, должен построить такую траекторию движения анимированного элемента, которая вам необходима. И количество таких точек, как указывалось, должно быть минимальным.
Исходя из этого правила, построим новую траекторию движения нашего анимированного заголовка. Если вы хотите, чтобы он двигался по криволинейной траектории, проставьте на дорожке анимации достаточно большое количество ключевых точек. Проще всего сначала нарисовать нужную траекторию на бумаге, расставить ключевые точки, а уже потом реализовывать это в Dreamweaver.
Но, предположим, что все это мы уже сделали. Теперь нам необходимо реализовать траекторию, что называется, в коде, поместив несколько ключевых точек на дорожку анимации. Как это сделать?
Прежде всего установите маркер выделенного кадра (см. рис. 12.5) на то деление временной шкалы, где будет находиться первая из вновь создаваемых ключевых точек. Для этого щелкните мышью по дорожке напротив нужного деления. Далее щелкните на этом месте правой кнопкой мыши и выберите в появившемся контекстном меню пункт Add Keyframe. Вы также можете выбрать одноименный пункт в подменю Timeline меню Modify или просто нажать клавишу . На дорожке в этом месте появится новая ключевая точка (рис. 12.8).
Рис. 12.8. Ключевая точка, помещенная на дорожке анимации (в данный момент выделена)
Теперь проверим, выделена ли наша новая ключевая точка, и, если нет, выделим ее. После этого активизируем окно документа и переместим заголовок в то место на траектории, где он должен находиться в настоящий момент. Тонкая серая линия, обозначающая траекторию движения заголовка, тотчас изогнется, следуя за заголовком (рис. 12.9).
Остальные ключевые точки траектории помещаются на дорожку анимации точно таким же образом. Поместите их и задайте для них новое положение анимированного заголовка. Изобретите траекторию посложнее, чтобы заставить Dreamweaver работать по-настоящему. Если вы поставили ключевую точку не в том месте, в котором хотели, выделите ее и выберите пункт Remove Keyframe контекстного меню. (Также вы можете выбрать одноименный пункт в подменю Timeline меню Modify.) После этого протестируйте страницу с новой анимацией в Web-обозревателе. Вы увидите, что заголовок следует точь-в-точь по траектории, которую вы для него задали.
Рис. 12.9. Положение анимированного заголовка в новой ключевой точке
Здесь есть один интересный момент. Вы можете удивиться, что мы зачем-то создавали на дорожке анимации новые ключевые точки вместо того, чтобы поставить маркер на нужный кадр и просто переместить на необходимое место анимированный заголовок. Однако в этом случае мы переместили бы на другое место всю траекторию движения нашего заголовка, вместе с начальной, конечной и всеми промежуточными ключевыми точками. Попробуйте так сделать - и вы сами все поймете.
Создание траектории вручную, путем расстановки на дорожке анимации ключевых точек и задания новых параметров анимированного элемента в этих ключевых точках годится только для относительно простых случаев. В самом деле, создайте-ка таким образом что-либо более сложное, чем простая дуга! К тому же, даже опытный Web-дизайнер далеко не с первого раза сделает именно ту траекторию, какая ему нужна. Как раз для таких случаев Dreamweaver предоставляет замечательную возможность просто нарисовать нужную траекторию в окне документа. При этом он сам сформирует дорожку анимации и расставит на ней требуемое количество ключевых точек.
Давайте испытаем эту возможность. Только сначала выполним несколько подготовительных действий. Прежде всего, выделим последнюю ключевую точку (конец) траектории и запомним или запишем конечные координаты заголовка. Это нужно для того, чтобы впоследствии, когда мы создадим новую анимацию, точно его позиционировать. После этого удалим дорожку анимации заголовка, но оставим дорожку анимации его тени. Для этого выделим необходимую дорожку и выберем пункт Remove Object в контекстном меню. Теперь осталось только поставить заголовок в начало его предполагаемой траектории - и можно приниматься за дело.
Выделим заголовок и щелкнем по нему правой кнопкой мыши. В появившемся контекстном меню выберем пункт Record Path. Вы также можете выбрать пункт Record Path of Layer контекстного меню панели Timelines; этот пункт становится доступным, если в окне документа выделен какой-нибудь свободный элемент. Кроме того, в подменю Timeline меню Modify также доступен пункт Record Path of Layer. Как видите, Dreamweaver предоставляет вам несколько возможностей сделать свой выбор.
Что произойдет после этого? Ничего. Кроме того, что при перемещении заголовка за ним будет тянуться тонкая серая линия - Dreamweaver начнет отслеживать и записывать его траекторию. А как только вы отпустите кнопку мыши, устанавливая заголовок в конец его траектории, он создаст новую дорожку анимации. После этого вам останется только выставить координаты заголовка в его конечной точке, воспользовавшись значениями, записанными (запомненными) ранее, и "растянуть" либо "сузить" дорожку
Рис. 12.10. Сложная траектория
анимации тени, чтобы она была равна дорожке своего "хозяина", иначе тень будет появляться раньше или позже, чем заголовок закончит свой извилистый путь.
Полученный результат вы можете увидеть на рис. 12.10. Сохраните страницу default2.htm, откройте ее в Web-обозревателе и посмотрите на результат ваших трудов.
Ну, вот и все. Мы познакомились с основными возможностями, предлагаемыми Dreamweaver для создания анимации. Более сложные анимации, включающие в себя множество элементов, согласованно движущихся по разным траекториям, создаются аналогичным образом. Только тогда вам предстоит несколько больше работы по заданию траекторий, выставлению параметров в ключевых точках анимации и согласованию движения аними-рованных элементов.
А сейчас мы познакомимся еще с некоторыми возможностями, предоставляемыми Dreamweaver Web-аниматорам. Они помогут вам сделать свою работу быстрее и проще.
Управление анимациями
Вы уже знаете, что Dreamweaver позволяет создавать несколько одновременно работающих и независимых друг от друга анимаций. Они могут работать как синхронно, так и асинхронно, создавая на Web-странице настоящие хороводы анимированных элементов. Конечно, если анимированных элементов на странице немного, вполне можно обойтись и одной анимацией. Но если их количество превышает десяток, значительно удобнее работать с несколькими независимыми анимациями, каждая из которых охватывает небольшую группу элементов, чем пытаться "запихать" их в одну анимацию. Впрочем, это дело вкуса...
Сейчас давайте рассмотрим средства управления этими независимыми анимациями.
Вы уже знаете, что в панели Timelines в данный момент отображается только одна анимация. Чтобы переключиться на другую, выберите соответствующий пункт уже знакомого вам комбинированного списка анимаций, показанного на рис. 12.2.
Чтобы создать новую анимацию, выберите пункт Add Timeline контекстного меню панели Timelines. Также вы можете выбрать одноименный пункт подменю Timeline меню Modify. Если вы теперь откроете комбинированный список анимаций, вы увидите, что в нем появился новый пункт.
По умолчанию Dreamweaver присваивает вновь создаваемым анимациям имена вида Тimelinе. Если же вы хотите дать какой-либо анимации более вразумительное имя, введите его прямо в комбинированный список анимаций. Другой способ - выберите пункт Rename Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. После этого на экране появится диалоговое окно Rename Timeline (рис. 12.11). Введите новое имя анимации в единственное поле ввода этого диалогового окна и нажмите кнопку ОК.
Рис. 12.11. Диалоговое окно Rename Timeline
Чтобы удалить ненужную анимацию, переключитесь на нее, использовав список анимаций, и выберите пункт Remove Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. Имейте, однако, в виду, что самую первую анимацию, создаваемую Dreamweaver при первом открытии панели Timelines, удалить нельзя - вместо удаления Dreamweaver ее просто очистит.
В верхней части панели Timelines находятся несколько еще не знакомых нам элементов управления. Рассмотрим некоторые из них.
Поле ввода Fps служит для задания частоты кадров анимации, определяющей скорость ее проигрывания. Эта величина измеряется в кадрах в секунду (по-английски - frames per second, или fps). Значение по умолчанию - 15.
Флажок Autoplay вам уже знаком. Он сигнализирует Dreamweaver, что в код страницы нужно добавить сценарий, запускающий анимацию сразу же после того, как страница будет загружена в окне Web-обозревателя. По умолчанию этот флажок отключен, и включить его начинающие пользователи Dreamweaver часто забывают. Поэтому, если ваша анимация почему-то не работает, прежде всего, проверьте, включили ли вы этот флажок.
Флажок Loop зацикливает анимацию. Если он включен, анимация будет проигрываться бесконечное число раз. Если его включить, Dreamweaver выведет еще одно из несметного множества своих сообщений; пока что просто закройте его. По умолчанию этот флажок выключен.
И, наконец, группа из трех кнопок и поля ввода, расположенная правее комбинированного списка анимаций, служит для перемещения между отдельными кадрами. Давайте рассмотрим его подробнее (рис. 12.12).
Рис. 12.12. Набор элементов управления, служащий для перемещения между кадрами анимации
Кнопки, на которых изображены направленные в разные стороны стрелки, позволят вам перемещаться по отдельным кадрам анимации. Предположим, вы выделили первую ключевую точку анимации (начало траектории), находящуюся на первом кадре. Если вы щелкнете кнопку со стрелкой вправо, то переместитесь на второй кадр. При этом на втором кадре анимации в панели Timelines будет установлен маркер выделенного кадра, а анимированный заголовок в окне документов переместится на один "скачок". Щелкая дальше на кнопке со стрелкой вправо, вы будете перемещаться все дальше к концу траектории. Если же вы щелкнете на кнопке со стрелкой влево, то переместитесь на предыдущий кадр.
Кнопку со стрелкой вправо вы можете использовать для предварительного просмотра созданной анимации прямо в окне, документа, не открывая страницу в Web-обозревателе. Для этого поставьте на нее курсор мыши, нажмите левую кнопку и не отпускайте. При этом вы будете перемещаться с кадра на кадр вперед по траектории; в панели Timelines по дорожке будет перемещаться маркер, а в окне документа - анимированный элемент. Отпустите кнопку, когда "прокрутите" анимацию до конца. К сожалению, более удобного способа предварительного просмотра анимации Dreamweaver не предлагает.
Кнопка, на которой нарисована стрелка влево, упирающаяся в препятствие, служит для быстрого перемещения на самый первый кадр.
Если вам нужно переместиться прямо на какой-то кадр анимации, известный по номеру, вы можете просто ввести этот номер в поле ввода, расположенное между кнопками-стрелками, и нажать клавишу . Нужный кадр будет тотчас найден и выделен.
С анимациями мы разобрались. Теперь давайте посмотрим, какие Dreamweaver предоставляет возможности для управления отдельными дорожками и кадрами.
Вы можете вырезать и копировать дорожки в буфер обмена Windows, а также вставлять их в другие каналы текущей анимации или вообще в другую анимацию на любой Web-странице. Чтобы вырезать выделенную дорожку, выберите пункт Cut контекстного меню или меню Edit либо нажмите комбинацию клавиш +. Чтобы скопировать выделенную дорожку, выберите пункт Сору в этих же меню либо нажмите комбинацию клавиш +. Ну, а чтобы вставить находящуюся в буфере обмена дорожку в один из уже занятых каналов, добавив к уже существующей дорожке, выберите пункт Paste или нажмите комбинацию клавиш +. К сожалению, вставить дорожку в свободный канал вы не сможете.
Внимание!
Dreamweaver помещает в буфер обмена не только дорожку анимации, но и свободно позиционируемый элемент, для которого она была создана, со всеми его параметрами и содержимым. И если вы вставляете эту дорожку в другую страницу, которая уже содержит свободно позиционируемый элемент с таким же именем, Dreamweaver присваивает эту дорожку ему. Если же такого элемента на странице нет, он будет создан по образу и подобию скопированного.
После того как вы вставили новую дорожку из буфера обмена, вы можете захотеть присвоить ее другому свободному элементу. Dreamweaver предоставляет вам и такую возможность. Выберите пункт Change Object в контекстном меню или подменю Timeline меню Modify. После этого на экране появится диалоговое окно Change Object, показанное на рис. 12.13. Выберите нужный элемент в раскрывающемся списке Object to Animate и нажмите кнопку ОК.
Рис. 12.13. Диалоговое окно Change Object
Иногда бывает необходимо растянуть какой-либо участок дорожки на несколько кадров или, наоборот, сузить. Для этого служат пункты Add Frame и Remove Frame, находящиеся в контекстном меню и подменю Timeline меню Modify. Первый пункт вставляет кадр в то место на дорожке, где находится маркер выделенного кадра, а второй - удаляет оттуда кадр.
Вот и все об анимации свободно позиционируемых элементов.
Анимация графических изображений
Выше мы с вами рассмотрели анимацию свободно позиционируемых элементов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать невидимыми. С обычными, фиксированными элементами такого не сделать.
Правда, у этого правила есть одно исключение. Можно анимировать графические изображения, и Dreamweaver предоставляет такую возможность. Но изменяться в процессе анимации может только имя отображаемого файла (атрибут SRC тега ).
Однако даже этого часто бывает достаточно. В самом деле, изменяя имя графического файла, можно создавать анимации с быстро сменяющимися кадрами. (Фактически, таким образом можно проигрывать на Web-странице настоящий фильм, не прибегая к созданию видеофайла, даже в формате "анимированный GIF".) Нужно будет только запастись необходимым количеством графических файлов, содержащих разные фазы анимации, но это уже проблема Web-художника.
Как же анимировать графическое изображение? Очень просто. Давайте создадим новую страничку и назовем ее 12.1.htm. Она не будет иметь отношения к сайту Sample site 1, но позаимствует из него графические файлы.
Поместите на эту страницу графическое изображение. В качестве отображаемого файла задайте Email.gif, находящийся в папке Pics, вложенной в папку Samplel (в ней расположены файлы сайта Sample site 1). Это совсем просто, поэтому нет смысла пускаться в длительные объяснения.
Теперь создадим новую дорожку анимации для вновь созданного изображения. Выделим его и выберем пункт Add Object в контекстном меню панели Timelines (в контекстном меню графического изображения такого пункта нет). После этого Dreamweaver выведет очередное сообщение, предупреждающее, что он может управлять только параметром имени отображаемого файла (рис. 12.14). Закройте его, нажав кнопку ОК.
Рис. 12.14. Предупреждение, выводимое Dreamweaver после добавления графического изображения в анимацию
Внешне созданная для графического изображения дорожка анимации не отличается от таковой для свободно позиционируемого элемента. Поэтому автор советует задавать для каждого анимируемого элемента страницы уникальное имя. Имя графического изображения можно задать в поле ввода Image редактора свойств.
Установим продолжительность анимации в пять секунд или 75 кадров (5 секунд умножить на 15 кадров в секунду). Для этого перетащим влево правую границу (вторую ключевую точку) дорожки до отметки "75" на шкале времени. И зададим новый графический файл, который отобразится во время достижения второй ключевой точки. Для этого проверим, выделена ли вторая точка, и изменим содержимое поля ввода Src редактора свойств так, чтобы оно указывало на файл Email2.gif, также находящийся в папке Pics, вложенной в папку Samplel. Данный файл будет отображен при достижении конца... нет, не траектории, а дорожки (ведь изображение не движется).
Осталось включить флажок Autoplay и загрузить страницу 12.1.htm в Web-обозревателе. Через пять секунд после окончания загрузки страницы изображение, отображаемое в ней, изменится, - наша анимация работает.
Если вам нужно последовательно сменить несколько изображений (фаз анимации), создайте соответствующее количество ключевых точек на дорожке. В каждой из этих ключевых точек установите нужное значение поля ввода Src.
Недостатки анимации, основанной на Web-сценариях, и их преодоление
Напоследок поговорим о недостатках опробованного нами способа создания анимаций на Web-страницах. И выясним, когда стоит его применять, когда можно ограничиться обычными видеофайлами, а когда можно обойтись вообще без всякой анимации.
Самый главный недостаток анимаций, основанных на Web-сценариях, -это... нет, отнюдь не несовместимость со старыми программами Web-обозревателей. (Хотя, несовместимость тоже следует принимать в расчет.) Это "тяжесть" необходимого для их обработки программного обеспечения, его ресурсоемкость и не очень высокое быстродействие. Это может быть критично, если среди посетителей вашего сайта будет много обладателей старых, маломощных компьютеров, на которых оно будет работать очень медленно, из-за чего анимация станет воспроизводиться рывками. Если вообще будет...
Как вы помните, Web-сценарии выполняются не самим Web-обозревателем, а специальной программой-интерпретатором, являющимся по отношению к Web-обозревателю внешней программой. Интерпретатор, расшифровывающий код сценария и исполняющий его, довольно требователен к ресурсам. Мало того, что нужно где-то хранить код сценария, исходный и расшифрованный, и свои данные, так еще нужно обрабатывать и сохранять данные самого сценария. И чем больше и сложнее сценарии, тем больше интерпретатор требует системных ресурсов.
В качестве решения этой проблемы можно только посоветовать не создавать без нужды сложных анимаций. Однако если уж без них не обойтись, стоит подумать о том, чтобы создать специальную версию сайта вообще без использования анимации и вообще сценариев. Тогда обладатели старых программ и (или) маломощных компьютеров смогут посещать ее, а счастливые владельцы современной техники получат удовольствие от "полновесной" версии сайта. Такой подход используется очень часто; почти все крупные и популярные интернет-проекты имеют "бессценарную" версию как раз на такой случай.
Есть и другой путь. Если ваша анимация представляет собой набор последовательно сменяющихся картинок или элемент, движущийся по небольшой площади страницы, попробуйте реализовать ее в виде видеофильма. Практически все программы Web-обозревателей, за исключением совсем уже старых, поддерживают формат "анимированный GIF-файл". Этот формат используется в Web-графике так долго, что даже подмял под себя некоторые стандарты, например стандарт на рекламные баннеры. Существует огромное количество программ для создания анимации в формате GIF. А для помещения такой анимации на Web-страницу вам нужен только хорошо знакомый тег - и никаких сценариев!
Точно так же можно обойти проблему несовместимости со старыми программами.
Но есть еще одна проблема, решение которой весьма затруднительно. Это проблема авторских прав на программный код. Точнее, проблема охраны этих самых авторских прав.
Давайте рассмотрим обычные программы, которыми вы пользуетесь. Это могут быть популярнейший текстовый редактор Microsoft Word, проигрыватель мультимедийных файлов Nullsoft WinAmp, игра Quake 3 или сама операционная система Windows. Все эти программы были созданы с использованием компилируемых языков программирования, т. е. программа, написанная на каком-либо языке программирования (C++, Pascal или Assembler), была откомпилирована в набор инструкций центрального процессора и сохранена в файле с расширением ехе. Впоследствии, если пользователь запустит этот файл, он будет исполняться непосредственно центральным процессором, без участия каких-либо программ-интерпретаторов.
Предположим, вы написали программу на компилируемом языке и хотите ее продавать. Причем продавать за большие деньги, т. к. в программе используется несколько принадлежащих вам ноу-хау. Если теперь хакер-злоумышленник захочет посмотреть, каков же принцип работы вашей программы, он потерпит неудачу. Дело в том, что читать машинный код процессора - занятие не для слабонервных. Далеко не всегда возможно просто понять, что он делает. А уж восстановить по нему исходный код программы абсолютно невозможно. (Хотя, если очень хочется, можете попытаться. Однако положительный результат этих попыток опять же не гарантирован.)
Программы Web-сценариев пишутся на интерпретируемых языках программирования. Это значит, что в Web-странице такие программы находятся прямо в виде исходного кода. Любой JavaScript-программист может без труда получить доступ к этому коду и выяснить, как работает программа. А это значит, что никаких секретов в JavaScript-коде не утаишь.
Выход из этой ситуации один: не реализовывать в качестве сценария сложные авторские алгоритмы. Интернет - среда, открытая по определению, и распространять по ней закрытую, секретную информацию весьма проблематично. С другой стороны, на то они и секреты, чтобы хранить их от любопытных глаз, которых во Всемирной паутине более чем достаточно.
Есть, вообще-то, еще один недостаток, но он свойствен не самой анимации, основанной на Web-сценариях, а подходу, предлагаемому Dreamweaver. Дело в том, что необходимый для создания анимации набор Web-сценариев помещается в секцию HTML-заголовка страницы (тег ). Из этого следует, что если вы используете для создания страниц шаблоны, вы можете создать анимированные (и вообще любые свободно позиционируемые) элементы только в самом шаблоне, но никак не в созданных на его основе страницах. Dreamweaver просто не даст вам этого сделать. В самом деле, секция заголовка - это неизменяемая область, а поместить какой-либо код в неизменяемую область Dreamweaver вам не позволит. Имейте это в виду. Хотя, конечно, вы можете отказаться от анимации или "открепить" страницу от шаблона, а потом уже делать с ней все, что вам заблагорассудится.
Кино закончилось. Да здравствует кино!
Как видите, создание анимации на Web-странице - задача довольно простая, если, конечно, вы работаете в среде Dreamweaver. Вы только задаете траекторию движения нужного элемента, a Dreamweaver делает всю остальную работу по "вдыханию" в него "жизни". Если хотите посмотреть, что же он делает с вашей страницей в этом случае, посмотрите исходный HTML-код в режиме отображения кода. Вы будете удивлены, сколько всего сделал Dreamweaver только для того, чтобы заголовок вашей страницы сдвинулся с места, какие огромные Web-сценарии он для этого создал.
Web-сценарии... Сколько мы уже говорили о них! А могут ли они что-нибудь еще, кроме того, что двигать элементы страниц взад-вперед? Конечно! Как раз следующая глава будет посвящена только Web-сценариям...
Анимация перестала быть просто мультфильмами. От полноэкранных движущихся изображений, до эффектов наведения указателя – анимация появляется повсюду. Анимация – это модно, забавно и интересно.
Преграды, стоящие на пути ее реализации начинают исчезать. С той скоростью интернета, и простотой создания всего, от простых движений, или глупых gif, до продолжительных анимационных роликов, анимация превратилась в практический и полезный инструмент веб-дизайна.
ОсновыАнимация начинается тогда, когда во что-то, созданное в неподвижной или двухмерной форме вдыхается жизнь, и оно начинает двигаться согласно законам физики. Например, когда мультяшный персонаж идет из одного конца экрана в другой, или как прыгающая, словно шарик, иконка загружающегося приложения на Mac.
Дисней – это почти синоним анимации. В начале 1980-х, два аниматора этой компании написали книгу, в которой обозначили 12 принципов анимации. Эта книга, «Illusion of Life: Disney Animation», написанная Френком Томасом и Оли Джонстоном и до сих пор не потеряла актуальности.
Вот эти принципы:
Веб-анимация часто сохраняется в форматах GIF, CSS, SVG, WebGL, или как видео. Анимацией может быть что угодно, от простого подчеркивания, которое появляется при наведении указателя на слово, до полноэкранного видео или фонового изображения. Как и в случае с любой другой техникой дизайна, анимация может быть как изящной, так и неизбежной.
Тенденции, появляющиеся в этом годуС каждым днем анимации в веб дизайнах становится всё больше. Небольшая, простая анимация может быть вовлекающей и интересной; пользователь может даже и не думать о том, что это анимация. Крупномасштабная анимация может быть интересным, вовлекающим визуальным эффектом. Но слишком большое количество движения может привести к полному хаосу.
Трендовой анимацию делает реалистичность. В сегодняшнем ландшафте, с таким количеством минималистских и плоских стилей, пользователям нужно больше визуальных подсказок, которые говорили бы им, что делать. Небольшое количество анимации может подтолкнуть пользователя в нужном направлении, не изменив при этом общую эстетику. Она вносит порядок в дизайн, не предоставляющий пользователям достаточное количество визуальных подсказок. В этом случае, анимация становится посредником между простотой и юзабилити.
Веб анимация делится на две простые категории: большая анимация и маленькая.
Большая анимация часто предстает в виде длинных роликов, занимает значительную часть экрана, и имеет характеристики небольшого видео. Такой тип анимации служит центральной частью всего дизайна. Обычно, пользователям не приходится выполнять каких-либо действий, чтобы увидеть движение. Если вы внимательно посмотрите на анимацию сайта Studio Meta (первый скриншот ниже), то заметите, что изображения увеличиваются, пока вы читаете текст.
Маленькая анимация – это небольшие кусочки, которые вы замечаете по мере взаимодействия с веб-сайтом. Маленькая анимация – это акцент, делающий вклад в общую эстетику, но не являющийся центральной частью дизайна. На сайте Генри Брауна (второй скриншот), глаза на иллюстрации моргают.
Проблема каждого тренда, включая этот – понимание того, когда его нужно использовать. Анимация может быть отличным помощником, но не в каждом проекте. Анимация должна быть плавной, не механичной и дерганной. Она должна служить определенной цели, и не мешать контенту.
Основная причина использования анимации – улучшение юзабилити. Простая анимация может объяснять пользователю какую кнопку нужно нажать, или куда идти дальше.
Вторая причина – эстетика. Анимация может быть отличной «декорацией». Подобного рода декоративная анимация может рассказывать историю, или создавать эмоциональную связь между интерфейсом и пользователем. Целью анимации может быть возбуждение визуального интереса, и сохранение вовлеченности на более продолжительное время.
Перевод статьи Кэрри Казинс
