{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Узнайте, как создать плавную анимацию для вашего сайта, используя только небольшую разметку SVG и несколько стилей CSS.","type":"blockquote","key":"iuil"},{"data":{"image":{"id":"62b06c1587d89902d9048985"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6v35b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":376,"offset":0,"style":"ITALIC"}],"text":"Масштабируемая векторная графика (SVG) - это больше, чем просто файлы изображений. Как XML-приложение, SVG содержат разметку, которая выглядит и работает так же, как HTML. Вы также можете использовать их в сочетании с кодом CSS и JavaScript. Это позволяет анимировать файлы SVG, создавая сложные изображения, которые хорошо подходят для веб-дизайна и других динамических сред.","type":"unstyled","key":"3g033"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":149,"offset":0,"style":"ITALIC"}],"text":"Но как сделать SVG-анимацию? Начните с фигуры SVG, анимируйте ее с помощью CSS и, основываясь на этих принципах, используйте анимацию в своей работе.","type":"unstyled","key":"d9f0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация SVG с помощью HTML и CSS","type":"header-two","key":"18ec2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":181,"offset":0,"style":"ITALIC"}],"text":"Хотя вы можете использовать JavaScript для программной анимации SVG, CSS теперь также имеет хорошую поддержку анимации. Вы можете найти весь пример кода в CodePen для этого проекта.","type":"unstyled","key":"pvml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Построение изображения SVG внутри HTML","type":"header-two","key":"6ih02"},{"data":{"image":{"id":"62b06c86c7a4dc4d78e46d4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8svfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":140,"offset":0,"style":"ITALIC"}],"text":"Первым шагом в этом процессе является создание образа SVG, с которым вы будете работать. Разметку SVG можно найти на панели HTML на CodePen.","type":"unstyled","key":"1c4ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура SVG","type":"header-three","key":"8q12a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":418,"offset":0,"style":"ITALIC"}],"text":"Хотя SVG имеют формат, аналогичный HTML, теги, используемые для их создания, отличаются. SVG имеет открывающие и закрывающие теги (), которые могут содержать множество различных свойств. В нашем случае мы используем свойства id и viewBox. Свойство id работает как и любой другой HTML-идентификатор, предоставляя уникальный идентификатор для использования в CSS/JS. Свойство viewBox задает размер нашего SVG.","type":"unstyled","key":"35qb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n","type":"blockquote","key":"b57ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":214,"offset":0,"style":"ITALIC"}],"text":"Вместо этого можно использовать свойства width и height, как показано в следующем примере. Однако viewBox создает адаптивный SVG-файл, который будет соответствовать размеру окна просмотра, не нарушая его пропорций.","type":"unstyled","key":"e619c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n","type":"blockquote","key":"4uu90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фигуры SVG","type":"blockquote","key":"4mtp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":314,"offset":0,"style":"ITALIC"}],"text":"Вы можете создавать подробные изображения с помощью SVG, используя в своем распоряжении множество различных инструментов фигуры. В этом примере SVG используются три доступные фигуры, но есть много других. Каждая из фигур в этом примере имеет уникальный идентификатор, который анимации CSS могут использовать позже.","type":"unstyled","key":"ao65j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SVG Эллипс: это инструмент круга/овала. Он задает свойства радиуса оси y/x (rx/ry), цвета заливки и ширины обводки. Важно помнить, что радиус, который вы выберете с помощью этого инструмента, будет составлять половину диаметра формы.","type":"unordered-list-item","key":"drnjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"(После # нет пробела)","type":"unstyled","key":"4km9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":47,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"8dc99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SVG Rect: инструмент SVG rect создает квадрат или прямоугольник. Он имеет свойства для ширины/высоты, преобразования, цвета заливки и ширины обводки.","type":"unordered-list-item","key":"c9lqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9tq5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полигон SVG: используйте многоугольник SVG для задания определенного количества точек и создания произвольных фигур различных размеров. Многоугольник в примере является трехсторонним, что делает его треугольником, и вы можете увидеть положение каждой точки, построенной в его свойствах. Наряду с этим, у нас есть свойства для позиции, цвета заливки и ширины обводки треугольника.","type":"unordered-list-item","key":"f8orp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f66pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":73,"offset":0,"style":"ITALIC"}],"text":"Как только анимация будет создана, фигуры выстроятся рядом друг с другом.","type":"unstyled","key":"299p3"},{"data":{"image":{"id":"62b06f734666cc6dafbc18bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7i03u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":154,"offset":0,"style":"ITALIC"}],"text":"Эти три фигуры SVG являются одними из наиболее распространенных, но есть из чего выбирать. При работе с анимацией SVG можно использовать следующие фигуры:","type":"unstyled","key":"63gnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Круг SVG: эта форма похожа на эллипс, но всегда имеет равные радиусы X и Y.","type":"unordered-list-item","key":"a6gtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Линия SVG: линия SVG представляет собой сегмент одной линии с двумя точками, по одной на каждом конце.","type":"unordered-list-item","key":"8hm8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SVG Polyline: Полилинии похожи на базовые линии, только они могут иметь более двух точек.","type":"unordered-list-item","key":"3mj0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полигон SVG: многоугольники SVG похожи на прямоугольники, только они могут иметь более четырех точек, что делает возможными сложные фигуры.","type":"unordered-list-item","key":"dtsru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Svg Path: контуры SVG работают аналогично инструменту «Перо» в Adobe Photoshop. Линии могут соединяться как полилиния/многоугольник, но к ним также могут применяться кривые.","type":"unordered-list-item","key":"dbf92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как анимировать SVG с помощью CSS","type":"header-two","key":"o2jk"},{"data":{"image":{"id":"62b06fb7cbd91978655f2c10"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dqtd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":439,"offset":0,"style":"ITALIC"}],"text":"Теперь, когда у вас есть некоторые фигуры внутри вашего SVG, пришло время перейти к анимации CSS. Каждая из фигур имеет различную анимацию, чтобы продемонстрировать некоторые из имеющихся у вас вариантов, но есть еще много возможностей для изучения с вашими собственными проектами. Круг перемещается по экрану, углы квадрата становятся круглыми, а треугольник вращается. Все они используют ключевые кадры CSS для создания плавной анимации.","type":"unstyled","key":"aunut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перемещение круга с помощью преобразования и перевода","type":"header-three","key":"coq3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Круг в примере SVG перемещается из нижней части экрана в верхнюю часть экрана во время цикла анимации. Перед перемещением круга необходимо назначить анимацию с помощью свойства CSS:","type":"unstyled","key":"c7lfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"# circle {\n animation: circle_anim 2000ms linear infinite normal forwards\n}","type":"blockquote","key":"45udm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":25,"style":"BOLD"},{"length":7,"offset":102,"style":"BOLD"},{"length":8,"offset":121,"style":"BOLD"},{"length":12,"offset":170,"style":"BOLD"},{"length":18,"offset":215,"style":"BOLD"}],"text":"Первое слово в значении, circle_anim, является названием анимации. Он работает в течение двух секунд (2000 мс). Он имеет линейную кривую, которая сохраняет свою скорость постоянной и настроена на бесконечный цикл в прямом направлении. Можно использовать ключевые кадры для определения отдельных фаз анимации:","type":"unstyled","key":"9u0fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes circle_anim {\n 0% { transform: translate(155px, 305px) }\n 45% { transform: translate(155px, -123px) }\n 50% { transform: translate(-123px, -123px) }\n 55% { transform: translate(-123px, 728px) }\n 60% { transform: translate(155px, 728px) }\n 100% { transform: translate(155px, 305px) }\n}","type":"blockquote","key":"f4gac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":116,"style":"BOLD"}],"text":"В этой анимации шесть ключевых кадров, поэтому круг будет перемещаться в шесть разных мест в каждом цикле. Свойство transform: translate задает положение круга на каждом этапе. При 0% круг находится в середине экрана и перемещается вверх и вне поля зрения на 45%. На 50% он переместился влево от экрана, прежде чем переместиться ниже окна просмотра на 55%. Круг возвращается в горизонтальное положение на 60%, а анимация завершается на 100%, а круг возвращается в середину экрана.","type":"unstyled","key":"1hvi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация свойства радиуса границы площади","type":"header-three","key":"bgct4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":343,"offset":0,"style":"ITALIC"}],"text":"Квадрат в примере предлагает хорошую ссылку на общую анимацию свойств. Если вы знаете правильный синтаксис для использования, вы можете анимировать любое свойство CSS. Свойство border-radius является хорошей демонстрацией этого. Квадрат имеет острые углы, которые превращаются в закругленные углы, а затем снова возвращаются в квадратные углы.","type":"unstyled","key":"935ui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"# square { animation: square_anim 2000ms ease-in-out infinite normal forwards }","type":"blockquote","key":"bs2bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":90,"style":"BOLD"}],"text":"Квадратная анимация называется square_anim и имеет двухсекундное время выполнения. Кривая замедления выполнения делает анимацию медленнее в начале и конце, создавая плавный эффект.","type":"unstyled","key":"937i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes square_anim {\n 0% { rx: 0px; ry: 0px }\n 45% { rx: 40px; ry: 40px }\n 55% { rx: 40px; ry: 40px }\n 100% { rx: 0px; ry: 0px }\n}","type":"blockquote","key":"7beno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":247,"offset":0,"style":"ITALIC"}],"text":"Как видите, эта анимация имеет четыре ключевых кадра. Радиус границы X и Y изменяется от 0 до 40 пикселей от 0% до 45%, делая паузу с 40 до 55 пикселей. Затем он возвращается к 0px для каждого радиуса к тому времени, когда анимация достигает 100%.","type":"unstyled","key":"kqa9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поворот треугольника SVG с помощью преобразования","type":"header-three","key":"5jvm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":309,"offset":0,"style":"ITALIC"}],"text":"Окончательная анимация SVG в примере является самой простой, треугольник вращается вокруг своей центральной точки. Фигура завершает полный оборот каждые две секунды и продолжает работать бесконечно. Он имеет кривую замедления, которая приводит к замедлению анимации в конце. Анимация называется triangle_anim.","type":"unstyled","key":"fcoj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"# triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }","type":"unstyled","key":"avdec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":169,"offset":0,"style":"ITALIC"}],"text":"Эта анимация имеет два ключевых кадра, один на 0%, а другой на 100%. Свойство Transform rotate превращает треугольник из 0deg в 0% в 360deg в 100%, создавая полный спин.","type":"unstyled","key":"dfkh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes triangle_anim {\n 0% { transform: translate(644px, 297px) rotate(0deg) }\n 100% { transform: translate(644px, 297px) rotate(360deg) }\n}","type":"blockquote","key":"9rr0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как анимировать другие свойства","type":"header-three","key":"asecf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":406,"offset":0,"style":"ITALIC"}],"text":"Три анимации, рассмотренные выше, являются хорошей отправной точкой при работе с SVG, но вы, вероятно, захотите продвинуть это дальше. Правило анимации CSS можно использовать для настройки практически любого значения свойства, которое можно присвоить SVG. Это включает в себя базовые значения, такие как размер и позиционирование, а также более сложные значения, такие как границы, тени и режимы наложения.","type":"unstyled","key":"1s0a0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":267,"offset":0,"style":"ITALIC"}],"text":"В редких случаях, когда CSS не может выполнить эту работу, вы можете использовать код JavaScript для анимации изображений SVG. Вы можете найти множество руководств, которые помогут вам в этом, как только вы почувствуете, что готовы сделать следующий шаг с вашими SVG.","type":"unstyled","key":"a6ng0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание собственной анимации SVG","type":"header-two","key":"9s21c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":299,"offset":0,"style":"ITALIC"}],"text":"Независимо от того, являетесь ли вы веб-дизайнером, разработчиком программного обеспечения или просто творческим человеком, анимация SVG может быть веселой и удовлетворительной. Вы можете найти множество ресурсов в Интернете, которые могут помочь вам с веб-анимацией, как только вы освоите с основы.","type":"unstyled","key":"9inp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"#программированиеснуля #программирование #css #веб-разработка #вебдизайн #векторнаяграфика #анимация #анимация #компьютерная анимация #svg ","type":"unstyled","key":"as627"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ydY8oxvJxTmiDnH3p8dS"}],"entityMap":{}},"mentions":[]}