Превратите свои статичные рисунки SVG в интерактивные виджеты и инфографику с Vue.js

SVG — это мощный и гибкий графический формат, который идеально вписывается в веб-среду. В отличие от форматов растровых изображений, таких как JPG, PNG или GIF, SVG основан на векторах и состоит из «реальных» объектов, которые вы можете выбирать и манипулировать любым удобным для вас способом. Так что даже с некоторыми базовыми сценариями статическое изображение можно анимировать и сделать интерактивным. И это будет предметом этого урока.

SVG и Vue: идеальный матч

Чтобы продемонстрировать, как можно создавать сценарии SVG, я выбрал Vue.js. Причина моего выбора в том, что, на мой взгляд, SVG и Vue идеально подходят друг другу. Во-первых, Vue поддерживает SVG из коробки. И, во-вторых, SVG, как и HTML, основан на XML, поэтому мы можем применить систему реактивности Vue к SVG и сделать ее интерактивной так же просто и удобно, как и с шаблонами HTML.

Краткое руководство по интеграции Vue и SVG

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

Для начала мы создадим базовый HTML-файл и включим фреймворк Vue. Затем мы помещаем SVG, которым хотим манипулировать, внутри.

Здесь у нас есть прямоугольный объект, атрибуты которого связаны с объектом данных в экземпляре Vue. У нас также есть слушатель события щелчка, который вызывает метод toggleStroke() . Поэтому, когда мы нажимаем на прямоугольник, обводка будет переключаться.

А вот код Vue:

Как видите, Vue и SVG очень легко комбинировать. Теперь давайте рассмотрим несколько более реалистичных и полезных примеров.

Пример первый: создание виджета таймера обратного отсчета

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

Чтобы нарисовать и анимировать прогресс, мы будем использовать объект круга SVG и его атрибут stroke-dasharray . Вы можете прочитать о технике кругового прогресса SVG здесь . Также, чтобы добавить некоторую структуру и приятный стиль, мы будем использовать компонент Card от Bulma . Поэтому убедитесь, что вы добавили фреймворк в ваш файл.

Мы начинаем с добавления компонента карты, а затем помещаем внутри заголовок с заголовком нашего виджета.

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

Здесь у нас есть прямоугольник, который служит фоном. Мы используем два круга, чтобы создать круговой прогресс. Мы размещаем их так, чтобы они идеально перекрывали друг друга. Мы устанавливаем атрибут fill первого круга в none и используем только его обводку в качестве контура для прогресса.

Чтобы создать иллюзию рисования круга, мы связываем атрибут stroke-dasharray второго круга с вычисляемым свойством dasharray() , которое мы создадим чуть позже. Кроме того, мы хотим, чтобы начальная точка рисунка была в 12 часов, а не в 3 часа, что является значением по умолчанию. Для этого мы поворачиваем точку, используя атрибут transform . Последний объект — это текст, который мы размещаем в центре круга. Для правильного отображения времени с formatTime() нулем мы применяем фильтр formatTime() , который мы создадим позже.

Далее нам нужно добавить элементы управления для минут и секунд.

Важными элементами управления здесь являются входные данные, которые мы связываем с соответствующими свойствами Vue с помощью директивы v-model . Мы также отключаем их, когда state установлено как started или paused . Наконец, мы добавляем слушатель события изменения, который будет вызывать метод updateTime() .

И, наконец, мы добавляем кнопки для управления таймером.

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

Пока что нам понадобится немного CSS, чтобы исправить интервал и выравнивание некоторых частей таймера.

А теперь пришло время добавить код Vue в уравнение.

Сначала мы определяем необходимые свойства в объекте данных и добавляем окружность в виде пользовательской опции экземпляра Vue. Последнее потому, что нам нужно, чтобы circumference была статичной, а не реактивной. Мы создаем dasharray() вычисляемый для вычисления значений атрибута stroke-dasharray .

Теперь давайте добавим методы:

Метод updateTime() обновляет значение свойства timeInSeconds каждом изменении значений.

Метод start() изменяет state на started и вызывает метод _tick() каждую секунду.

Метод _tick() обрабатывает правильное обновление progress , minute и second .

Метод pause() меняет state на paused и останавливает часы, очищая интервал.

Метод stop() изменяет state на stopped , останавливает часы и сбрасывает progress , minute и second .

И, наконец, мы добавляем фильтр formatTime() для правильного отображения времени.

Вот и все! Мы успешно использовали функции реактивности Vue для преобразования нашего статического рисунка SVG в интерактивный таймер обратного отсчета. Давайте перейдем к следующему примеру.

Пример второй: создание инфографики SVG

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

Я создал статические части инфографики в Illustrator, а затем экспортировал их как SVG. Затем я добавил динамические части вручную. Динамические части представляют собой три каркаса, которые имитируют представление одного и того же веб-дизайна на разных устройствах. Давайте создадим их сейчас.

Сначала давайте создадим объекты данных, необходимые для разных каркасов.

Каждый каркас состоит из шести прямоугольников, поэтому для каждого дизайна мы создаем отдельный объект данных с необходимыми значениями. В экземпляре Vue мы создаем еще один, который будет базовым объектом.

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

Далее мы создаем метод анимации с помощью Tween.js . Поэтому убедитесь, что вы добавили эту библиотеку в свой файл. Мы используем хук жизненного цикла Vue create created() для первоначальной анимации каркаса от базового объекта до каркаса дизайна ноутбука.

А теперь мы добавляем наложения на значки устройств, размещая над ними прозрачные прямоугольники SVG. Таким образом, область щелчка будет содержать целые значки, а не только их контуры. И, наконец, мы добавляем прослушиватели событий click, которые будут вызывать метод anim() с выбранным дизайном.

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

Вывод

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