• Анимировать глиф в формате SVG можно, применяя каскадные таблицы стилей (CSS). Рассмотрим визуальные эффекты в стилях CSS – согласно спецификации CSS версии 3, актуальной на 2021 г.

• Анимация движения (изменение координат объекта и размеров – приближение или удаление объекта относительно формата макета).

• Поворот rotate.

• Проявление fade in / out.

• 3D-трансформация.

Совмещение фильтров и их последовательное использование (запуск с задержкой в миллисекундах) в цикле воспроизведения анимации в стилях CSS позволяют добиться интересных визуальных эффектов при выборе и нажатии на выбранную функцию в интерфейсе.

Рисунок 2.8 – Пример анимации по клику на кнопку

Технически при нажатии (состояние: target) или при наведении (состояние: hover) происходит обработка стилями в CSS и предоставляет инструкции для вывода графики и анимации в заданных параметрах:

• ширина (width) и высота (height) анимированного блока задаются в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;

• цвет заливки блока:

– однотонная сплошная и плоская заливка:

1. в шестнадцатеричной (НЕХ) палитре:*

>background-color: #CCDD33

2. в палитре RGB:*

>background-color: rgb(255,255,255)

3. с добавлением полупрозрачности путем включения альфа-канала:*

>background-color: rga(255,255,255,0.5)

– многоцветный градиент:

>background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);

Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:

>background: #fff,

>background-color: rgb(255,255,255),

>background-color: rgb(255,255,255).

Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.

Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.

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

• подключение внешних библиотек отрисовки векторной графики;

• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).

Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.

Источник: http://markup.inmotus-design.ru/rk/index.php

Особенности этого функционального решения:

• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);

• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).

В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.

Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.