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

• HTML + SVG + CSS3 (опционально + PNG/JPG);

• HTML + SVG + JavaScript (опционально + CSS);

• HTML + SVG + SMIL.

Рассмотрим детально каждый вариант.

HTML во всех трех вариантах применения анимации SVG – это веб-страница для вывода графики в содержание источника.

Графика в формате SVG по определению есть масштабируемая векторная графика (Scalable Vector Graphics): отличная четкость отображения при любом масштабе, простота редактирования и легкость кода с точки зрения хранения в каталоге N изображений в SVG с возможностью оптимизации (сжатия) кода для минимизации потерь при загрузке на клиентском устройстве.

• Анимировать глиф в формате 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)