Создание анимированных SVG-баннеров

От автора: я не занимаюсь дизайном и маркетингом. Я разработчик софта, но, будучи предпринимателем, я занимаюсь всем подряд. Я трачу много времени на создание зарисовок и поиски в Google , чтобы понять, что как работает, и я хотел бы поделиться своими навыками в дизайне и создании анимированной SVG-рекламы.

Преимущества SVG

SVG или Scalable Vector Graphic, или по-русски «масштабируемая векторная графика» — основанная на XML структура, с помощью которой можно создавать фигуры, линии и цвета на изображении так, чтобы изображение можно было просматривать на любом экране без потери качества. SVG плохо подходит для фотографий. С его помощью можно делать рисунки, текст и простые фигуры.

Это удивительная платформа для анимации, так как эта же CSS-технология, используемая для анимации в вебе, также умеет анимировать разметку для SVG.

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

Спецификация

Дэвид дал нам стандартное место под баннер в верхней части контента. Реклама должна быть адаптивной от мобильных размеров и до десктопа, вплоть до стандартного разрешения 728px на 90px.

Наша реклама должна быстро описать TrackJS и то, как мы можем помочь. Мы проверяем ваш JS-код на баги и предоставляем отчет об ошибках, если они есть. Нужно понять, как преподнести это коротко, но с долькой юмора.

Мы должны быть ответственными рекламодателями:

Смотрите демо

Моя первая анимированная реклама

Я хотел создать что-то, что отталкивалось бы от «жучков». У нас было несколько файлов Adobe Illustrator, в которых жучок раздавливался для предыдущего стикера, который, возможно, можно использовать повторно. Может быть, жучки будут пролетать над рекламой и давиться кнопкой «free trial».

Я полез в интернет, чтобы понять, как это сделать. Я создал SVG-элемент в файле HTML и начал изучать. Сначала я задал высоту и ширину баннера. Удвойте размеры для viewBox (окно для рисования), чтобы изображение смотрелось четко на дисплеях с большим разрешением.

Так я получил крутой серый блок! Небольшое достижение.

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

Дальше я добавил кнопку, но экспортировал ее отдельным SVG, чтобы потом ей можно было управлять отдельно. Код получился примерно такой:

Анимирование SVG с помощью CSS

Добавим парочку анимаций. Я экспортировал анимацию жучка из Adobe Illustrator в SVG и вытянул путь. Мне нужно было несколько жуков, но я не хотел использовать копии одного пути, так как он был довольно громоздким. К счастью, я нашел элемент SVG Symbol, который позволяет объявлять фигуры, из которых можно создавать несколько экземпляров. Что мне и нужно.

Символы создаются через тег use, я создал три символа. Каждому я добавил трансформацию и сжал их до 0%, чтобы скрыть их по умолчанию.

Я написал пару CSS-анимаций. Очень удобно, что CSS можно вставить сразу в SVG. Правила нужно обернуть в синтаксис CDATA, чтобы они превратились в валидный XML (хотя большинство браузеров не смотрят на это).

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

Точно так же я экспортировал раздавленного жука из Adobe Illustrator и вставил его в SVG. Я добавил другую keyframe-анимацию, в которой кнопка появлялась сверху вниз. Анимация настолько быстрая, что кажется, будто кнопка раздавливает жуков.

Следующее поколение

Создавать первую анимацию было довольно весело, и я много чему научился с SVG. Эта реклама крутилась несколько месяцев, пора ее обновить. В этот раз я хотел показать историю, в которой описывалось бы, как JS внедряется в наши приложения теми или иными путями, и когда он ломается, возникают неприятные ошибки. JS случается.

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

animate вместо CSS

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

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

Ссылка на SVG в виде object

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

Если бы мы ссылались на SVG-файл через теш , это создало бы строгие рамки между SVG и DOM. Как следствие, событие load не сработает после загрузки SVG в кэш, и анимация проиграется всего один раз.

Смотрите демо

Заключение

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

Веб становится лучше с каждым днем. Я горжусь тем, что могу сделать его лучше и пофиксить баги, когда веб ломается. С радостью помогу и вам. Забирайте совершенно бесплатный триал на TrackJS уже сегодня.

Автор: Todd Gardner

Источник: //davidwalsh.name/

Редакция: Команда webformyself.

Комментарии Вконтакте: