Создание динамических анимаций с помощью SVGMorph и Greensock Animation Platform (GSAP)
Всем привет,
С днем Святого Валентина!
В этом уроке мы создадим динамическую анимацию с формой сердца, используя HTML, CSS и функцию SVGMorph от Greensock Animation Platform (GSAP). Давайте начнем!
Что такое SVGMorph и GSAP?
SVG Morph — это функция платформы анимации GreenSock (GSAP), которая позволяет вам преобразовывать фигуру из одного пути SVG в другой. С помощью этой функции вы можете анимировать элемент контура в графике SVG, переходя от одной формы к другой с течением времени.
GSAP — это библиотека JavaScript для создания высокопроизводительной анимации HTML5 и интерактивных возможностей. Он предоставляет надежный и эффективный набор инструментов для анимации веб-контента, включая как элементы DOM, так и графику SVG. GSAP широко известен как одна из лучших доступных анимационных библиотек и широко используется разработчиками и дизайнерами для создания привлекательных и интерактивных анимаций.
Вы можете найти дополнительную информацию, чтобы получить больше возможностей с помощью библиотеки GSAP здесь.
Пример HTML-кода:
Сначала создайте контейнер для анимации, как показано ниже:
<body> <h1>GSAP Morph SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-300 -100 1200 1200"> <path id="line" fill="transparent" stroke="orange" stroke-linejoin="round" stroke-width="10" d="M10 300L590 300" /> <path id="circle" d="M10,300a290,290 0 1,0 580,0a290,290 0 1,0 -580,0z" /> <path id="heart" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0–56.621 9.344–80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602–13.277–20.5–24.66–32.527–33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0–75.91 15.832–102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316–2.641 19.785–7.43 20.73–18.129 40.707–35.152 58.328–50.172 51.575–43.95 96.117–81.906 127.11–119.305C495.867 236.81 512 197.172 512 153.867c0–42.066–14.426–80.879–40.617–109.289zm0 0" /> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> </body>
Этот код представляет собой файл HTML, который использует библиотеку GSAP для анимации элемента SVG. В основном разделе тела есть элемент SVG с тремя путями.
Первый путь с идентификатором «line» — это горизонтальная линия, залитая прозрачным цветом и имеющая оранжевую обводку. Второй путь с идентификатором «circle» — это круг, а третий путь с идентификатором «heart» — это сердце.
Библиотека GSAP загружается из CDN, после чего следует блок скрипта. Этот блок сценария создает временную шкалу GSAP с повторяющимся циклом. Временная шкала настроена на преобразование пути «линия» в путь «круг», затем в путь «сердце» и, наконец, обратно в путь «line», при этом каждое изменение происходит через 1 секунду. Кроме того, нам по-прежнему нужен плагин MorphSVGPlugin.min.js, но этот плагин является привилегией Club GreenSock, которая недоступна в CDN. Вы можете загрузить его из своей учетной записи GreenSock и включить локально, как этот тег скрипта:
‹script src="/[YOUR_DIRECTORY]/MorphSVGPlugin.min.js"›‹/script›
Для этого эксперимента я использую CodePen, который поддерживает этот подключаемый модуль, добавляя MorphSVGPlugin.min.jsв JSв настройках пера, как показано ниже:
Пример кода CSS:
Для стилей CSS вы можете следовать примеру здесь, эти стили будут применяться ко всем элементам HTML на странице.
body {
margin: 1rem;
background: #000;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
svg {
width: 80vw;
}
path:not(#line) {
visibility: hidden;
}
margin: 1rem: устанавливает поле в 1rem вокруг элемента body.background: #000: устанавливает черный цвет фона.color: #fff: устанавливает белый цвет текста.display: flex: устанавливает тип отображения элемента body на гибкий.flex-direction: column: устанавливает направление гибкости на столбец.justify-content: center: центрирует дочерние элементы вдоль главной оси гибкого контейнера.align-items: center: центрирует дочерние элементы вдоль поперечной оси гибкого контейнера.
Стили для элемента svg устанавливают его ширину равной 80% ширины области просмотра.
Селектор path:not(#line) устанавливает видимость всех элементов пути, кроме элемента с идентификатором 'line', на скрытый.
Пример кода JavaScript:
Наконец, действия для обработки этой анимации следующие:
const timeline = gsap.timeline({ repeat: -1 }),
line = document.getElementById("line"),
circle = document.getElementById("circle"),
heart = document.getElementById("heart");
timeline
.to(line, { morphSVG: circle }, "+=1")
.to(line, { morphSVG: heart }, "+=1")
.to(line, { morphSVG: line }, "+=1");
В этом коде JavaScript объект timeline создается с использованием метода timeline GSAP, а для свойства repeat установлено значение -1, что заставит временную шкалу повторяться бесконечно.
Затем объявляются три переменные line, circle и heart, которые назначаются соответствующим элементам <path> в SVG с теми же значениями id.
Наконец, временная шкала настроена с тремя шагами анимации:
- Путь SVG элемента
lineанимируется, чтобы трансформироваться в путь, определенный в элементеcircle. - Затем SVG-путь элемента
lineанимируется, чтобы превратиться в путь, определенный в элементеheart. - Наконец, SVG-путь элемента
lineанимируется, чтобы вернуться к исходному пути, определенному в элементеline.
Каждый шаг анимации использует метод to GSAP и указывает свойство morphSVG для настройки анимации преобразования. Значение "+=1" в конце каждого шага означает, что анимация для этого шага начнется через 1 секунду после завершения анимации предыдущего шага.
Анимация демонстрируется в моем CodePen, как показано ниже:
Это завершает этот учебник. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать. Я надеюсь, что вы нашли это полезным и приятным. Спасибо за чтение и увидимся в следующий раз!
