Векторная графика для начинающих: теория и практика технического дизайна - страница 13

>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-скрипте веб-приложения разработчиками продукта.

Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).