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

Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели

Выбор технологического решения (стека) для анимации веб-интерфейса по умолчанию за исполнителем, если в ТЗ не прописаны четкие требования по выбору библиотек JS-скриптов и сопутствующих технологий.

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

Если требования заданы только по формату и цветопередаче изображений, исполнитель может предложить заказчику варианты решения задачи, указав их преимущества и недостатки – желательно в формате A или B, так проще понять и сделать выбор.

Разработка единой экосистемы электронных устройств для удовлетворения основных потребительских запросов – ключевое направление в развитии крупных федеральных ИТ-компаний (Яндекс и Mail.ru).

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

Это возможно отладить путем добавления стилей и вывода их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1]> документа >).

Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре RGB или HEX и наследоваться на всех типах платформ: устройства на iOS, Android, Windows и т. д. с фиксированными параметрами. Это требование и к цветовой схеме глифовых элементов интерфейса в формате SVG. Оно обеспечивает единый визуальный образ продуктов компании-производителя, фирменный стиль на всех поддерживаемых платформах.

Рисунок 2.11 – Наглядная демонстрация смещения элементов веб-интерфейса целевой страницы веб-сайта компании Platinum Data Recovery при адаптивном дизайне (слева – широкий экран компьютера, справа – адаптивный мобильный веб-интерфейс)

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

Пример A

Рисунок 2.12 – Архитектура интернет-магазина в CMS Bitrix

Пример B

Рисунок 2.13 – Архитектура корпоративного сайта в CMS WordPress

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