СОВРЕМЕННЫЕ ТЕХНОЛОГИИ АНИМАЦИИ В ВЕБ-ДИЗАЙНЕ

Культура и искусство

Правильная ссылка на статью:

Дадьянова И.Б. — Современные технологии анимации в веб-дизайне // Культура и искусство. - 2022. - № 2. DOI: 10.7256/2454-0625.2022.2.36463 URL: https://nbpublish.com'llbrary_read_article.php?id=36463

Современные технологии анимации в веб-дизайне

Дадьянова Ирина Борисовна

кандидат социологических наук

доцент, кафедра информационных технологий и компьютерного дизайна, Санкт-Петербургский

государственный университет культуры

191028, Россия, г. Санкт Петербург, ул. Моховая, 14, кв. 32 И newspaper2004@yandex.ru

Статья из рубрики "Электронная культура и интернет"

DOI:

10.7256/2454-0625.2022.2.36463

Дата направления статьи в редакцию:

15-09-2021

Аннотация: Предметом данного исследования выступают анимационные технологии в современной визуальной культуре, их роль и значение в веб-дизайне и тенденции развития. Цель исследования определение роли анимации в современной визуальной культуре, в целом, и в веб-дизайне, в частности. К основным задачам можно отнести, во-первых, анализ тенденций развития сферы анимации, применяемой в веб-дизайне; во-вторых, выделение ключевых характеристик веб-анимации и составление классификации основных анимационных форм; в-третьих, анализ технологического аспекта разработки веб-анимации с приведением конкретных примеров инструментальных средств, реализующих ту или иную технологию. В ходе исследования были использованы как общелогические методы исследования (анализ и синтез, дедукция и индукция, обобщение), так и методы систематизации научных знаний -типологизация и классификация. Новизна исследования заключается в переосмыслении значения анимационных технологий в современной визуальной культуре. В результате исследования были выделены специфические особенности веб-анимации, ее роль в современном веб-дизайне, основные сферы применения, формы, методы и приемы. Также был проанализирован технологический аспект создания веб-анимации, представлена классификация современных веб-технологий, позволяющих решать различные задачи, стоящие перед веб-анимацией.

Ключевые слова: Визуальная культура, Компьютерные технологии, Информатика, Анимация, Анимационные эффекты, Веб-анимация, Графический интерфейс,

Проектирование веб-сайта, Веб-технологии, Интернет

На сегодняшнем этапе общественного развития анимация прочно заняла свое место в современной визуальной культуре и получила широкое распространение в различных сферах деятельности - рекламе, бизнесе, образовании. Попов Е.А. утверждает, что «экспансия компьютерных технологий в область культуры и искусства рубежа XX и XXI веков способствовала переходу анимации на новый, более масштабный и качественный уровень, требующий аналитического изучения новых видов произведений анимации и их взаимовлияния с ранее сформировавшимися». [8, с-211

Термин «анимация» происходит от латинского "anima" - душа. С французского animation переводится как «одушевление». Под анимацией понимается «вид пространственно-временного искусства, художественный образ, основанный на одушевлении любых

объектов, посредством приписывания им движения». [12, с-701 Также анимацию можно определить как «вид художественного творчества, относящийся к категории аудиовизуальных искусств, отличительной особенностью которого становится "оживление", наделение "душой" образа, созданного искусственно, посредством

разнообразных техник и средств выразительности». [8, с-421

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

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

Существует два направления развития анимации - некоммерческая (авторская) и коммерческая. Авторская анимация занимается поиском новых художественных ценностей, новых выразительных форм и средств для выражения творческой идеи создателя. Коммерческая или массовая анимация, предназначенная для широкого круга зрителей, имеет своей основной целью - продвижение товаров и услуг и завоевание коммерческих рынков.

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

или услуги более подробно, с деталями, в интересных ракурсах и с иллюстрациями. с.2671

На текущий момент, одной из наиболее востребованных сфер веб-дизайна является

сфера разработки интерфейсов, поскольку грамотно спроектированный интерфейс позволяет сделать взаимодействие пользователя с веб-сайтом более эффективным и комфортным. [11, с-3421

Не так давно технология Adobe Flash являлась доминирующей в сфере веб-анимации, однако реализовывала, как правило, развлекательную и рекламные функции, поскольку на основе flash-технологии разрабатывались в основном промо-сайты, игры и анимированные баннеры. С приходом технологий HTML5 в сочетании CSS3 анимированные объекты стали неотъемлемой частью эффективного интерфейса. Анимация интерфейса включает в себя различные изменения характеристик объекта -его размера, положения в пространстве, прозрачности, цвета, формы и проч. - в ответ на действие пользователя или запрограммированное событие. [9, с-3421

Рассмотрим основные функции анимации объектов, интегрированных в интерфейс вебсайта или приложения:

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

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

- стилистическая. С художественной точки зрения, создание уникального визуального образа на основе анимации выделяет веб-сайт среди остальных, помогает отстроиться от

конкурентов. [1, с' 581

Внешний вид анимационных эффектов можно привести к следующей классификации:

- анимация при прокрутке страницы, поочередное появление новых элементов. Полоса прокрутки выступает в виде временной шкалы;

- анимация изменения макета заключается страницы при изменении размеров окна;

- анимация слоев. Слои, анимация;

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

в динамическом перемещении элементов

в каждом слое - отдельная

элементов интерфейса, побуждающих к

наложенные друг на друга,

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

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

приложением. [3, с' 113]

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

Рисунок 1 - Анимированная иллюстрация, демонстрирующая различия между двумя шрифтами, с сайта-лендинга, посвященного шрифту Baskerville (здесь и далее для иллюстраций используются работы студентов кафедры информационных технологий и

компьютерного дизайна СПбГИК).

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

статичный текст. —с'421] Также анимация позволяет фокусировать внимание пользователя и направлять его действия в нужное русло. К качественной анимации интерфейса предъявляются особые требования: она должна быть функциональной, проработанной и не раздражать пользователя чрезмерно активным дизайном.

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

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

процесса на глазах пользователя.

5Гпйа о&ащвна Гмгэцииком. оптимальный во; п-^ нота ею го 5.7 ¿г

Рисунок 2 - Фрагмент анимированного веб-комикса, посвященного преимуществам использования велосипеда в городских условиях.

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

НАДОЕЛИ V НАДОЕЛИ СКУЧНЫЕ ФОТО?

Рисунок 3 - Оформление главной страницы рекламного сайта с использованием

анимации.

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

мотивацию к совершению целевых действий (пример, анимационное сопровождение всех шагов регистрации пользователя).

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

анимаций, воспроизводимых подряд. [5, с' 3791

анимации дают больше возможностей в создании придвинутых анимации, чем CSS. [9, с' 2691

собственного языка программирования, носящего название SMIL. [10, с-221]

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

Что касается различных инструментальных средств создания веб-анимации, то они, в большинстве своем представлены различными внешними библиотеками, такими как GreenSock (GSAP), ScrollMagic, Velocity.js, Mo.js, Anime.js и прочие. Мощным инструментом для разработки трехмерных анимаций является библиотека Three.js. Для создания и рендеринга веб-анимаций также часто используется программа Adobe After Effects.

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

Будучи популярным конструктором сайтов, Readymag позволяет анимировать элементы веб-сайта, применять базовые эффекты анимации (масштабирование, изменение прозрачности, перемещение, поворот), настраивать время и скорость анимации, последовательность прокрутки, привязки к событиям. Webflow - конструктор,

позволяющий создавать сложные многоходовые анимации без написания кода. Г2, с-1741

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

Библиография

2. Вейтман В. Программирование для Web. М.: Издательский дом "Вильямс", 2010. 368 с.

3. Гарретт Д. Веб-дизайн. Элементы опыта взаимодействия. СПб.: Символ-плюс, 2015. 192 c.

4. Грант К. CSS для профи. СПб.: «Питер», 2019. 496 с.

5. Макфарланд Д.С. Новая большая книга CSS. СПб.: Питер, 2017. 720 с.

6. Маркотт, И. Отзывчивый веб-дизайн: № 1. М.: Манн, Иванов и Фербер, 2012. 176 с.

7. Кравцов Н. История анимации: как рождается искусство. М.: ЛитРес Самиздат, 2019. 220 c.

8. Попов Е.А. Анимационное произведение: типология и эволюция: дис. ... канд. искусствоведения: 17.00.09. Санкт-Петербургский гос. Университет профсоюзов, Санкт-Петербург, 2011. 198 с.

10. Робсон Э. Изучаем HTML, XHTML и CSS. СПб.: Питер, 2019. 720 с.

11. Сырых Ю. Современный веб-дизайн. Настольный и мобильный. М.: Диалектика, 2019. 384 c.

12. Юмашев Д.О. Анимация в системе средств массовой информации: развитие коммуникативного потенциала анимации//Научный ведомости Белгородского государственного университета. Серия: Гуманитарные науки. 2015. Том 27, № 18 (215). С. 68-72.

13. Яцюк О. Г. Мультимедийные технологии в проектной культуре дизайна: гуманитарный аспект: дис. ... доктора искусствоведения: 17.00.06. ВНИИТЭ, М.: 2009. 447 с.

Результаты процедуры рецензирования статьи

В связи с политикой двойного слепого рецензирования личность рецензента не раскрывается.

Со списком рецензентов издательства можно ознакомиться здесь.

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

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

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

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

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

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

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

Результаты процедуры повторного рецензирования статьи

В связи с политикой двойного слепого рецензирования личность рецензента не раскрывается.

Со списком рецензентов издательства можно ознакомиться здесь.

В журнал «Культура и искусство» автор представил свою статью «Современные технологии анимации в веб-дизайне», в которой проведено исследование современных анимационных технологий и возможностей их применения.

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

Актуальность исследования обусловлена тем, что современные компьютерные технологии уже нашли широкое практическое применение во всех сферах жизнедеятельности, включая область культуры и искусства, и нуждаются в научной систематизации и анализе, следовательно, в этом и заключается научная новизна исследования. Теоретическим обоснованием исследования стали работы таких исследователей как Е.А. Попов, Д.О. Юмашев, О.Г. Яцюк и др. Эмпирической базой исследования послужили образцы работ студентов кафедры информационных технологий и компьютерного дизайна СПбГИК.

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

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

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

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

Анализируя типы анимации в современных веб-сайтах, автор дает следующую классификацию: анимированные элементы интерфейса; анимация ожидания, анимация повествования.

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

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

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

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

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

Представленный в работе материал имеет четкую, логически выстроенную структуру, способствующую более полноценному усвоению материала. Этому способствует также адекватный выбор соответствующей методологической базы. Библиографический список исследования состоит из 13 источников, что представляется достаточным для обобщения и анализа научного дискурса по исследуемой проблематике.

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