CSS Анимирование иконок при помощи Sketch и SVG

Анимированные иконки могут придать вашему сайту или приложению больше жизни. В этом уроке мы покажем вам, как спроектировать иконки при помощи Sketch, SVG и CSS.

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

Даже самая простая анимированная иконка требует многочисленных технических моментов, поэтому я опишу каждый шаг этого урока, чтобы вы смогли работать с более сложными проектами. Для достижения нашей цели, вам необходимо иметь общее представление о том, как использовать Sketch, CodePen, HTML и CSS свойства transform и transition. Опыт работы с SVG вам не понадобится.

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

Sketch работает с векторными фигурами, это идеальный инструмент для экспорта проекта в SVG формате.

Если вы все еще не знакомы с SVG, крайне рекомендую с ним ознакомится и полностью перейти на его использование. Формат крайне эффективный, очень хорошо поддерживается браузерами, а также полностью векторный (качественное отображение при любом разрешении экрана). Более того, с каждым слоем в SVG можно манипулировать с помощью CSS или JavaScript, как и с обычными DOM объектами.

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

See the Pen SVG Attachments Icon by Peter Nowell (@pnowell) on CodePen.

Шаг 1

sketch подготовка

Запустите Sketch и создайте новый проект, с артбордом размером 60px на 60px, в нем мы будем создавать нашу иконку.

Шаг 2

sketch создание иконки

Наша иконка представляет собой набор файлов для кнопки загрузки. Она включает в себя три объекта - две фотографии и документ, которые будут состоять из прямоугольников. Для начала создайте три прямоугольника для каждого из объектов при помощи кнопки R. Затем залейте фигуры белым цветом и сделайте синюю обводку размером в 1px.

Шаг 3

sketch иконка

Для создания треугольника в углу документа, создайте еще один прямоугольник (12px, квадрат) с той же обводкой, но без заливки. Затем разместите его в верхнем правом углу большого прямоугольника, войдите в режим редактирования, чтобы открыть векторные точки. Нажмите на правой верхней точке вектора, а затем нажмите кнопку "Удалить", чтобы удалить её.

Шаг 4

sketch создание

Выберите форму треугольника и войдите в режим редактирования, убедитесь что в инспекторе выбран параметр "Round to Full Pixel Edges". Добавьте векторные точки на верхней и правой стороне формы, нажав на обводку.

Все точки должны быть прямыми (без изгибов Безье). Разместите эти точки с отступом в 12px на двух углах треугольника так, что бы они выстраивались в одну линию с точками основного прямоугольника. Затем удалите правый верхний угол основного прямоугольника.

Шаг 5

sketch треугольник

Выберите треугольник, а затем используйте инструмент Ножницы (Layer> Paths> Scissors) для удаления стороны с углом 45 градусов.

Шаг 6

sketch ножницы

Вставьте несколько прямоугольники высотой в 1px для создания строк текста на документе. Я использовал разную ширину, чтобы имитировать внешний вид выравнивания по левому краю текста.

Шаг 7

sketch формы

Обратите внимание, в окончательном дизайне иконок у каждого объекта есть некоторое белое пространство вокруг него? Мы могли бы просто продублировать каждый объект, и задать для них белую границу шириной 4px.

Однако, SVG поддерживает только одну рамку для одного слоя (до SVG 2), поэтому мы будем дублировать форму каждого объекта, а затем менять границу объекта находящегося на нижнем слое, шириной 4px и белого цвета. После этого сгруппируем все слои.

Шаг 8

sketch слои

Переименуйте все ваши слои. На самом деле это важный момент, поскольку это повлияет на SVG при экспорте. Sketch будет использовать имя каждого слоя, в качестве его идентификатора, следовательно каждому слою нужно задать уникальное имя, и в идеале без пробелов (дефис или camelCase).

Шаг 9

sketch поворот

Расположите и поверните группы по своему усмотрению. Затем используйте функцию 'Show Pixels' (Ctrl + P), чтобы оценить четкость иконки. Поскольку мы вращаем формы с тонкими границами, они никогда не будут идеально выровнены по пиксельной сетке, но мне нравится возиться со значениями позиционирования в инспекторе, благодаря чему повернутые формы выглядят наиболее четкими, на сколько это возможно.

Шаг 10

Для определения состояния иконки при наведении, продублируйте артборд, на котором расположите объекты ближе друг к другу и немного поверните. Запомните значения вращения для каждого объекта для нормального (неактивного) состояния и состояния при наведении - они понадобятся нам позже.

Шаг 11

sketch экспорт

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

Шаг 12

sketch позиция

Взгляните на значения X и Y в инспекторе, вычислите разницу между двумя состояниями для позиции Х и Y у каждого объекта (на сколько далеко смещается группа в направлениях по X и Y между двумя состояниями). Запишите эти значения ниже.

Шаг 13

sketch разгруппировка

Продублируйте монтажную область неактивного состояния и поворотом в 0 градусов. Выберите каждую группу в списке слоев и разгруппируйте их. Мы воссоздадим эти группы, используя SVG разметку гораздо более простым способом, чем использует Sketch по умолчанию.

Шаг 14

sketch экспорт файлов

Нажмите по названию артборда или слою из списка, и нажмите на кнопку 'Make Exportable' в правом нижнем углу инспектора. Выберите 'SVG' и экспортируйте файл.

Шаг 15

очистка файла svg

Теперь очистим наш SVG файл. Под капотом SVG находится та же разметка как и HTML. Откройте SVG в редакторе, вы сразу заметите много лишней разметки. Я часто удаляю контейнеры <g>, которые связывают артборд с Canvas в Sketch, сократите длинные десятичные значения до сотых и удалите пользовательские Sketch атрибуты.

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

Шаг 16

svg создание групп

Теперь мы создадим группы для каждого объекта (photo-1, photo-2, document), обернув соответствующие элементы тегами <g>...</g>, тоже самое что и с <div>...</div> в HTML. Добавьте класс для каждой группы, например: <g class="document-container">.

Шаг 17

svg css правила

Закончили с подготовительной работой, пришло время оживить иконку! Используйте классы групп, для написания CSS правил. Воссоздадим значения вращения для всех состояний и групп, которые мы записали ранее, с помощью свойств transform: rotate(градусы) и transform-origin: center center;

Как правило свойство transform требует префиксы, но если вы работаете в CodePen, специальная опция автоматически расставляет все необходимые префиксы.

Примечание: Firefox не поддерживает свойство transform-origin у SVG элементов, поэтому вращения будут происходить от верхнего левого угла элемента. Если вас не устраивает этот вариант, разработайте другую анимацию без вращения, специально для Firefox.

Шаг 18

svg css transition

Добавьте свойство transition для каждого объекта (например: transition: all .4s ease;). Это позволяет анимировать объекты при наведении курсора.

Шаг 19

svg при наведении css

Теперь давайте определим CSS свойства для каждого объекта при наведении. Если вы хотите использовать иконку на кнопке, как в нашем примере на CodePen, вы должны добавить псевдо-селектор :hover для кнопки.

Если вы хотите разместить иконку отдельно, добавьте :hover для SVG (.attachments- button:hover .document-icon {} или .attachments-icon:hover .document-icon {}).

Шаг 20

Свойство transform может принимать несколько функций (разделенные пробелом), мы будем использовать translate(x,y) для перемещение групп, а также rotate(градусы) для поворота.

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

Перевод статьи Animate icons with Sketch and SVG

Тэги: animateSVGsketch

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.