Популярным применением векторной графики считается создание рекламных заставок и анимационных блоков на основе 2D векторной графики в формате SVG.
Еще в начале 2000-х годов пользовалась популярностью векторная анимация технологии Adobe Flash, требующая установки плагина для браузеров при отображении анимационных роликов.
Технологический прогресс вытеснил технологию Flash: отчасти на это повлиял основатель корпорации Apple Стив Джобс путем публикации открытых писем и директив разработчикам компании в 2010 году. Так в открытом письме Стива Джобса по поводу отказа в поддержке технологии Flash приводятся следующие доводы (в переводе из первоисточника с англ.).
Стив Джобс
Вероятно речь шла о необходимости установки специального плагина для отображения Flash в пользовательских устройствах, в наличии технологических «дыр» в языке ActionScript для обработки анимаций, которым злоумышленники могли воспользоваться в корыстных целях по отношению к пользователям, что могло нанести серьезный ущерб имиджу бренда Apple в случае поддержки технологии Adobe Flash.
Как известно после 2010 года стал набирать обороты рост мобильного интернета, популярность смартфонов среди пользователей серьезно возросла, анимация в видео-формате применялась для рекламы товаров и услуг в промо-сайтах и постепенно ниша Flash стала замещаться функционалом SVG (сокращение от термина Scalable Vector Graphics).
Если внимательно посмотреть на «кардио» кривую функции потребительских поисковых запросов в Google.Search с 2004 года по запросу: SVG+animation, очевидно что кривая спроса стала расти с начала 2011 г.
Источник: Google.Trends
Тогда пришло время для замещения вытесненной с рынка Adobe Flash.
Естественно возникает ряд вопросов, связанных с SVG анимацией. Давайте попробуем в них разобраться, опираясь на факты.
Для каких целей применима векторная SVG (2D) анимация?
Двухмерная векторная анимация получила обширный спектр применений. Выделим часть из них, чтобы дать первое представление для читателей.
-
Математические, физические и эконометрические зависимости в графиках динамических функций (знакомые всем со школьной скамьи).
Например, популярная библиотека графиков AmCharts.com использует формат SVG для моделирования графиков с динамическими эффектами воспроизведения для имитации движения на экране заданных метрик в столбцах гистограмм или кривых не-/линейных функций.
-
Имитация прорисовки линейных 2D-изображений для рекламной веб-анимации.
Для примера, рассмотрим библиотеку Vivus.js. Плавная линейная прорисовка композиции 2D изображения из источника SVG по заданным слоям (с заданной задержкой воспроизведения).
После первых двух примеров уже можно сделать первые выводы, что язык JavaScript (*.js) позволяет приводить в движение слои композиции изображения, заданного в векторном формате SVG, по заданному событию.
-
Анимация воспроизведения (трансформации) 2D-изображения в HTML-странице (например, логотипа компании).
Использование каскадных таблиц стилей CSS анимации с подключением классов к слоям SVG изображения, заданного inline (прямо в коде HTML-документа), позволяет манипулировать размером, поворотом, проявлением, цветами слоев SVG.
-
Мультипликация в композиции SVG-документа (технология SMIL).
Обширный функционал технологии SMIL, точнее дополнительного к основному функционалу SVG, позволяет задавать анимацию как в семантическом редакторе исходного кода с поддержкой спецификации SVG(+SMIL).
В 2016 году корпорация Google отменило преждевременный отказ от технологии SMIL по многочисленным просьбам пользователей, что позволило сохранить технологию в практическом коммерческом применении и продолжить ее использование и развитие для рекламных, мультипликационных и других целей разработчиков.
-
Анимация для видеоигр на платформе Unity.
Возможность импорта, редактирования и анимации динамических блоков для видеоигр на основе функционала онлайн-платформы Unity.
Функционал анимации SVG задает необходимый и достаточный набор инструментов, атрибутов и их свойств для создания двухмерных анимационных блоков для веб- и мобильной разработки. Да, именно SVG является технологией в контексте философии Google: mobile friendly для адаптивных интерфейсов, iOS и Android-устройств.
В принципе открытые спецификации SVG и SMIL позволяют самостоятельно начать изучение возможности векторной анимации для веб-разработки, но стоит уточнить, что в разделе «Графический дизайн» платформы «МоеНеМое» представлены вводные курсы: «Векторная графика» и «Технический дизайн». В них вы найдете отдельные лекции и практикумы с пошаговыми решениями с использованием анимации на основе HTML + SVG + CSS + JS, многоплановой промо-иллюстрации и SVG-маск и спрайтов для веб-интерфейсов.
Необходимый и достаточный объем знаний теории и практики по векторной графике, анимации и верстке промо-иллюстраций будет обеспечен слушателям курсов при последовательном прохождении данных курсов, чтобы освоить и начать самостоятельную работу на основе полученных технических компетенций графического дизайнера.
Желаем успеха в освоении двухмерной векторной SVG анимации с знаниями и практическими навыками от авторов-методистов образовательной платформы «МоеНеМое».