Узнайте, как создать плавную анимацию для вашего сайта, используя только небольшую разметку SVG и несколько стилей CSS.
Масштабируемая векторная графика (SVG) - это больше, чем просто файлы изображений. Как XML-приложение, SVG содержат разметку, которая выглядит и работает так же, как HTML. Вы также можете использовать их в сочетании с кодом CSS и JavaScript. Это позволяет анимировать файлы SVG, создавая сложные изображения, которые хорошо подходят для веб-дизайна и других динамических сред.
Но как сделать SVG-анимацию? Начните с фигуры SVG, анимируйте ее с помощью CSS и, основываясь на этих принципах, используйте анимацию в своей работе.
Анимация SVG с помощью HTML и CSS
Хотя вы можете использовать JavaScript для программной анимации SVG, CSS теперь также имеет хорошую поддержку анимации. Вы можете найти весь пример кода в CodePen для этого проекта.
Построение изображения SVG внутри HTML
Первым шагом в этом процессе является создание образа SVG, с которым вы будете работать. Разметку SVG можно найти на панели HTML на CodePen.
Структура SVG
Хотя SVG имеют формат, аналогичный HTML, теги, используемые для их создания, отличаются. SVG имеет открывающие и закрывающие теги (<svg></svg>), которые могут содержать множество различных свойств. В нашем случае мы используем свойства id и viewBox. Свойство id работает как и любой другой HTML-идентификатор, предоставляя уникальный идентификатор для использования в CSS/JS. Свойство viewBox задает размер нашего SVG.
<!-- SVG with a responsive size -->
<svg id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG content -->
</svg>
Вместо этого можно использовать свойства width и height, как показано в следующем примере. Однако viewBox создает адаптивный SVG-файл, который будет соответствовать размеру окна просмотра, не нарушая его пропорций.
<!-- SVG with a static size -->
<svg id="MUOSVGAnimation" width="800" height="600">
<!-- SVG content -->
</svg>
Фигуры SVG
Вы можете создавать подробные изображения с помощью SVG, используя в своем распоряжении множество различных инструментов фигуры. В этом примере SVG используются три доступные фигуры, но есть много других. Каждая из фигур в этом примере имеет уникальный идентификатор, который анимации CSS могут использовать позже.
- SVG Эллипс: это инструмент круга/овала. Он задает свойства радиуса оси y/x (rx/ry), цвета заливки и ширины обводки. Важно помнить, что радиус, который вы выберете с помощью этого инструмента, будет составлять половину диаметра формы.
(После # нет пробела)
<ellipse id="circle" rx="100" ry="100" fill="# ffed00" stroke-width="0"/>
- SVG Rect: инструмент SVG rect создает квадрат или прямоугольник. Он имеет свойства для ширины/высоты, преобразования, цвета заливки и ширины обводки.
<rect id="square" width="200" height="200" transform="translate(300 200)" fill="# 05f"
stroke-width="0"/>
- Полигон SVG: используйте многоугольник SVG для задания определенного количества точек и создания произвольных фигур различных размеров. Многоугольник в примере является трехсторонним, что делает его треугольником, и вы можете увидеть положение каждой точки, построенной в его свойствах. Наряду с этим, у нас есть свойства для позиции, цвета заливки и ширины обводки треугольника.
<polygon id="triangle" points="15,-97 115,102 -84,102 15,-97"
transform="translate(0,0)" fill="# f00" stroke-width="0"/>
Как только анимация будет создана, фигуры выстроятся рядом друг с другом.
Эти три фигуры SVG являются одними из наиболее распространенных, но есть из чего выбирать. При работе с анимацией SVG можно использовать следующие фигуры:
- Круг SVG: эта форма похожа на эллипс, но всегда имеет равные радиусы X и Y.
- Линия SVG: линия SVG представляет собой сегмент одной линии с двумя точками, по одной на каждом конце.
- SVG Polyline: Полилинии похожи на базовые линии, только они могут иметь более двух точек.
- Полигон SVG: многоугольники SVG похожи на прямоугольники, только они могут иметь более четырех точек, что делает возможными сложные фигуры.
- Svg Path: контуры SVG работают аналогично инструменту «Перо» в Adobe Photoshop. Линии могут соединяться как полилиния/многоугольник, но к ним также могут применяться кривые.
Как анимировать SVG с помощью CSS
Теперь, когда у вас есть некоторые фигуры внутри вашего SVG, пришло время перейти к анимации CSS. Каждая из фигур имеет различную анимацию, чтобы продемонстрировать некоторые из имеющихся у вас вариантов, но есть еще много возможностей для изучения с вашими собственными проектами. Круг перемещается по экрану, углы квадрата становятся круглыми, а треугольник вращается. Все они используют ключевые кадры CSS для создания плавной анимации.
Перемещение круга с помощью преобразования и перевода
Круг в примере SVG перемещается из нижней части экрана в верхнюю часть экрана во время цикла анимации. Перед перемещением круга необходимо назначить анимацию с помощью свойства CSS:
# circle {
animation: circle_anim 2000ms linear infinite normal forwards
}
Первое слово в значении, circle_anim, является названием анимации. Он работает в течение двух секунд (2000 мс). Он имеет линейную кривую, которая сохраняет свою скорость постоянной и настроена на бесконечный цикл в прямом направлении. Можно использовать ключевые кадры для определения отдельных фаз анимации:
@keyframes circle_anim {
0% { transform: translate(155px, 305px) }
45% { transform: translate(155px, -123px) }
50% { transform: translate(-123px, -123px) }
55% { transform: translate(-123px, 728px) }
60% { transform: translate(155px, 728px) }
100% { transform: translate(155px, 305px) }
}
В этой анимации шесть ключевых кадров, поэтому круг будет перемещаться в шесть разных мест в каждом цикле. Свойство transform: translate задает положение круга на каждом этапе. При 0% круг находится в середине экрана и перемещается вверх и вне поля зрения на 45%. На 50% он переместился влево от экрана, прежде чем переместиться ниже окна просмотра на 55%. Круг возвращается в горизонтальное положение на 60%, а анимация завершается на 100%, а круг возвращается в середину экрана.
Анимация свойства радиуса границы площади
Квадрат в примере предлагает хорошую ссылку на общую анимацию свойств. Если вы знаете правильный синтаксис для использования, вы можете анимировать любое свойство CSS. Свойство border-radius является хорошей демонстрацией этого. Квадрат имеет острые углы, которые превращаются в закругленные углы, а затем снова возвращаются в квадратные углы.
# square { animation: square_anim 2000ms ease-in-out infinite normal forwards }
Квадратная анимация называется square_anim и имеет двухсекундное время выполнения. Кривая замедления выполнения делает анимацию медленнее в начале и конце, создавая плавный эффект.
@keyframes square_anim {
0% { rx: 0px; ry: 0px }
45% { rx: 40px; ry: 40px }
55% { rx: 40px; ry: 40px }
100% { rx: 0px; ry: 0px }
}
Как видите, эта анимация имеет четыре ключевых кадра. Радиус границы X и Y изменяется от 0 до 40 пикселей от 0% до 45%, делая паузу с 40 до 55 пикселей. Затем он возвращается к 0px для каждого радиуса к тому времени, когда анимация достигает 100%.
Поворот треугольника SVG с помощью преобразования
Окончательная анимация SVG в примере является самой простой, треугольник вращается вокруг своей центральной точки. Фигура завершает полный оборот каждые две секунды и продолжает работать бесконечно. Он имеет кривую замедления, которая приводит к замедлению анимации в конце. Анимация называется triangle_anim.
# triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }
Эта анимация имеет два ключевых кадра, один на 0%, а другой на 100%. Свойство Transform rotate превращает треугольник из 0deg в 0% в 360deg в 100%, создавая полный спин.
@keyframes triangle_anim {
0% { transform: translate(644px, 297px) rotate(0deg) }
100% { transform: translate(644px, 297px) rotate(360deg) }
}
Как анимировать другие свойства
Три анимации, рассмотренные выше, являются хорошей отправной точкой при работе с SVG, но вы, вероятно, захотите продвинуть это дальше. Правило анимации CSS можно использовать для настройки практически любого значения свойства, которое можно присвоить SVG. Это включает в себя базовые значения, такие как размер и позиционирование, а также более сложные значения, такие как границы, тени и режимы наложения.
В редких случаях, когда CSS не может выполнить эту работу, вы можете использовать код JavaScript для анимации изображений SVG. Вы можете найти множество руководств, которые помогут вам в этом, как только вы почувствуете, что готовы сделать следующий шаг с вашими SVG.
Создание собственной анимации SVG
Независимо от того, являетесь ли вы веб-дизайнером, разработчиком программного обеспечения или просто творческим человеком, анимация SVG может быть веселой и удовлетворительной. Вы можете найти множество ресурсов в Интернете, которые могут помочь вам с веб-анимацией, как только вы освоите с основы.
#программированиеснуля #программирование #css #веб-разработка #вебдизайн #векторнаяграфика #анимация #анимация #компьютерная анимация #svg
