Хотя многие интерфейсные разработчики знакомы с масштабируемой векторной графикой (SVG) и веб-анимацией, тема может быть немного более туманной для начинающего разработчика. Анимация - это полезный инструмент, который помогает привлечь внимание посетителей и помогает пользователям весело и увлекательно перемещаться по сайту. Анимационная студия Телепорт занимается именно такой анимацией https://tz-animation.ru/animirovannye-video/. В этой статье представлены возможности SVG и CSS-анимации, в том числе советы для начинающих.
Вернемся к основам: растровые изображения против векторных изображений
Основными вариантами изображений на веб-сайте являются растровые изображения (PNG, JPEG и GIF) и векторная графика. Разница между ними заключается в том, что растровая графика состоит из сеток пикселей, в то время как векторная графика просто содержит код, который сообщает браузеру, как нарисовать фигуру.
Первый вариант может быть вашим лучшим вариантом, когда вы хотите отобразить фотографию, но он не является гибким и часто имеет большой размер файла и не может быть масштабирован бесконечно без потери качества.
SVG, с другой стороны, является лучшим вариантом для визуализации логотипов, иконок или даже инфографики. Он всегда острый на каждом устройстве, и его можно аккуратно анимировать. Именно об этом разнообразии анимационных техник мы и поговорим сегодня.
1. ICONFONTS
В iconfont каждый значок является "символом" в шрифте. Шрифт размещен на веб-сайте с помощью CSS и может быть стилизован. Этот метод позволяет вам иметь много различных значков с ограниченным размером файла. Iconfonts полностью поддерживаются всеми браузерами, но имеют некоторые ограничения:
Для каждого значка можно использовать только один цвет.
Значки масштабируются в целом, как изображение. Это может быть плохо, если вы хотите использовать тонкие линии: если вы сделаете значок в два раза больше, штрих будет иметь двойную толщину. Таким образом, вам нужно будет предоставить два значка: один для того, когда он отображается в небольшом размере, и один для большего размера.
Iconfonts кэшируются браузером. В зависимости от того, как вы его используете, это кэширование может быть большим преимуществом для загрузки страницы или крайним недостатком, потому что оно не меняется, когда вы этого хотите.
С помощью значка можно сделать все, что можно сделать с обычным символом: изменить размер, цвет, тени, поворот, непрозрачность, масштаб и так далее.
Укладка нескольких значков друг на друга-это простой способ по-прежнему создавать простые многоцветные значки.
Просто анимируйте их с помощью CSS3: значки могут перемещаться, вращаться, менять цвет и так далее.
2. ЧЕРТЕЖИ CSS
Простая графика, такая как прямоугольники, круги и треугольники, может быть легко создана только с помощью CSS и HTML. Эти фигуры могут быть анимированы с помощью CSS или JavaScript.
Целые наборы иконок могут быть построены с помощью CSS.
3. формат SVG
Масштабируемая векторная графика (SVG)-это язык на основе XML, описывающий браузеру, как должны быть нарисованы фигуры. Анимация их может быть выполнена в различных техниках. Однако, не все из них имеют хорошую поддержку браузера. Некоторые из вариантов, которые вы имеете для использования SVG online являются:
Встроенный в HTML-файл. Самый гибкий метод. Вы можете поместить атрибут class на части SVG-кода и отредактировать его с помощью CSS. Этот метод идеально подходит, когда у вас есть логотип, который нужно изменить в зависимости от размера экрана или событий. Популярная реализация состоит в том, чтобы показать обычный логотип на больших экранах и скрыть некоторые его части на меньших экранах. Вы также можете создать причудливый эффект наведения на них, например логотип, который превращается в дом.
Векторные изображения и их анимация могут улучшить пользовательский интерфейс веб-сайта при правильном использовании. Мы надеемся, что наши советы вдохновят вас на то, как использовать их для современного дизайна сайта. Как мы уже видели, контекст определяет, лучше ли использовать Iconfont, CSS-чертежи или SVG. В целом SVG лучше всего использовать для логотипов, иконок и простой графики. CSS-чертежи могут быть удобны для локализованного использования, но сложнее использовать в крупномасштабной системе проектирования. Iconfonts отлично подходят для простых значков на обычных веб-сайтах, так как они имеют некоторые ограничения.