Руководитель проектов AFFINAGE Игорь Яковлев публикует в блоге «Нетологии» серию материалов об эластичном дизайне. Сегодня речь пойдет о роли SVG.
Что такое SVG
Scalable Vector Graphics — масштабируемая векторная графика. Реальное развитие началось с версии 1.1 опубликованной W3C в 2011 году. Анонс улучшенной версии 2.0, превосходящей возможности flash, намечен на 2017 год.
Благодаря языку разметки XML, легко встраивается в HTML-документ. С выходом версии 2.0 интернет заполонит SVG-анимация, SVG-фильтры, SVG-маски и прочие прелести. Кажется, это было когда флеш заполонил интернет. Скоро будет то же самое.
Но мы с вами люди образованные и «лезть в воду не зная броду» не собираемся, поэтому попытаемся выжать максимум из текущей и будущей ситуации.
Немного истории
Между смертью flash и «самопиаром» SVG был ещё такой формат FXG. Видимо поняв, что SVG не обогнать, Adobe закрыла FXG. Но приятный осадочек остался.
Именно из FXG, формата векторной графики для импорта/экспорта из различных программ Adobe, мы узнали, что можно не только описать векторный документ в виде XML, но и задать множество других параметров необходимых графическим редакторам: страницы, слои, анимация, правила вертикального совмещения объектов и прочее.
Почуяв неладное Microsoft, разрабатывает XAML для своих внутренних нужд (основанный на XML язык разметки для программирования приложений). И именно в этот момент SVG обретает второе дыхание.
К чему преамбулы, ближе к делу
SVG не теряет в качестве при масштабировании и не зависит от разрешения экрана. При помощи CSS3 и Javascript можно менять стили и атрибуты для SVG-элементов. Объекты SVG зачастую весят намного меньше растровых изображений.
Опустим перечисление SVG-элементов, коснёмся только одного. Наибольший интерес для нас представляет path, так как с его помощью можно нарисовать любую фигуру.
Возможность встраивания SVG в HTML даёт возможность управлять SVG-элементами и их атрибутами с помощью JS. На картинках ниже показано, что мы можем дотянуться не только до самих точек, а так же до кривых безье.
Любой графический редактор, обладающий возможностью работы с векторной графикой, имеет path-панель.
Наша задача нарисовать начальное и конечное положение кривых. А анимацию на html-странице описать Javascriptом.
Наши кривые с картинок в виде XML (они не с картинок).
Программирование анимации (изменение X, Y-координат у точек) будет выглядеть примерно так:
1. M 166.5 142.5 L 518 182.5 L 885.5 142.5
2. M 166.5 150 L 518 190 L 885.5 150
3. M 166.5 155 L 518 195 L 885.5 155
4.
5. M 166.5 350 L 518 170 L 885.5 350
6. M 166.5 355 L 518 175 L 885.5 355
7. M 166.5 362.5 L 518 322.5 L 885.5 362.5
Важно чтобы количество точек совпадало. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с 8-ю точками.
Следующий шаг научиться использовать для анимации функции плавности (они же ease-функции или кривые безье). Об этом в следующих материалах.
Причем тут эластичный дизайн
В далёком 2014 год, для нас это было феноменальным прорывом. Мы просто решили вырастить дерево!
В то время мы решили, что это яркий пример высокого технического уровня внедрения SVG-анимации и застолбили за собой право быть первыми в России. Так это или нет время покажет, но на достигнутом мы не остановились. Спустя время мы поняли, что интерфейсы могут быть более живыми, чем просто плоские иконки и линейная анимация. Так родилось понятие эластичного дизайна.
И в первую очередь, эластичный дизайн — это дизайн, который реагирует на действия пользователя. Эластичный дизайн не ограничивает свободу движений. И помогает пользователям совершать нужные действия. Эластичный дизайн идеально вписывается в направление «интерфейсов в одном окне», а также в пространственные интерфейсы.
Как сказал один наш клиент: «Как желе, дрожит от любого прикосновения».
Мы стоим на пороге, когда плоский дизайн обязан стать живым и отзывчивым на действия пользователя. Эластичных элементов будет становиться всё больше и больше.
Правила эластичного дизайна
-
Элементы не живут сами по себе. Каждый элемент зависит от другого, создавая пространство единой системы взаимосвязей.
-
Эластичный дизайн адаптируется под любые разрешения.
-
Каждый элемент дает обратную связь на действия пользователя. У пользователя не должно остаться сомнений о совершении того или иного действия.
-
Эластичный дизайн направлен в первую очередь на удобство интерфейсов.
Итог
Роль SVG в эластичном дизайне сводится к анимированию, гибкости, текучести, взаимозависимости, плавности, наложению слоёв… Вообщем сделать flat живым!
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
