предисловие
часто вCodepenЯ видел, как герои используют SVG для рисования невероятных анимаций. Мне всегда было любопытно, как они работают. Я всегда чувствовал, что это требует глубокого понимания SVG и самостоятельного рисования этих шаблонов SVG.
Но на самом деле это не так.Сегодня я научу вас простому трюку, чтобы быстро реализовать svg анимацию!
ОткрытьCodepen, нажмите в интерфейсеbuildкнопку, вы можете использовать анимацию, чтобы построить дом, и пусть он поднимает немного дыма! 🏭
Ищем красивые шаблоны svg
Так как сами нарисовать не можем, то найдем готовые библиотеки, есть много библиотек svg, напримерFlaticon,iconfont,Iconfinderилиicons8Другие сайты предоставят множество бесплатных шаблонов svg.
Анализ шаблонов SVG
ОткрытьdevtoolСоблюдайте шаблон svg, и вы увидите следующий результат:
elementВнутриpathа такжеcircleэто все свгDOM元素, которые представляют собой линии и круги в шаблоне svg соответственно.
Например 🌰:
<path d="M 10 25
L 10 75
L 60 75
L 10 25">
Содержимое d в приведенном выше коде: M представляет перемещение пера к (10, 25), затем L рисует линию к (10, 75) и, наконец, возвращается к исходной точке, чтобы нарисовать треугольник.
Devtool, мы видим, что каждыйpathКакая часть картины соответствует:
В это время должна сформироваться идея.Поскольку мы знаем, какой части шаблона соответствует каждый элемент, мы можем работать с элементами DOM, которые мы хотим анимировать!
Инструменты TimelineLite/TimelineMax
Если просто использовать CSS или JavaScript для обработки анимаций по id и className, то это все равно достаточно сложно, а главное занимает много времени
Так что нам приходится заимствовать инструменты, Timeline(Lite|Max) и TweenMax хорошо известны.Платформа анимации GreenSock (сокращенно GSAP)Представлена возможность создавать временные шкалы в качестве контейнеров для анимаций или других временных шкал, что упрощает управление всей анимацией и точное управление временем.
GSAP даже предоставляет намEase VisualizerЧтобы показать эффект каждой функции Ease, прикрепите, кстати, код:
Несколько простых строк кода могут привести к следующим результатам:
Начало работы с GSAP
Функция API GSAP очень мощная👍, и связанные с ней сообщества:Официальная документация сайта,Форум,Китайское руководство TimelineMax
В начале сборки дома 🌰 я в основном использовал TimelineMaxfromа такжеstaggerFrom, этим двум API нужно только установить начальное значение, и он завершит анимацию движения в течение указанного времени:
tl.from("#House > rect:nth-child(24)", 1, {
scaleX: 0,
transformOrigin: "center",
ease: Power2.easeOut
})
На этом шаге мы будем использовать CSS Selector.#House > rect:nth-child(24)Этот элемент изscaleXНачните с 0, возьмите центр (центр) за начальную точку деформации, используйтеPower2.easeOut, возвращается в исходное состояние через одну секунду и выполняет анимацию.
.staggerFrom(
["#House > path:nth-child(34)", "#House > path:nth-child(32)"],
0.8,
{
scaleY: 0,
transformOrigin: "bottom",
ease: Bounce.easeOut,
stagger: 0.2
},
0,
"scene1+=0.5"
)
а такжеfromпохоже, простоstaggerFromВы можете поместить несколько селекторов CSS одновременно, используяstaggerЭто свойство задает разницу во времени, при которой должен появиться селектор в массиве.
Подробные параметры API см.официальная документация
Затем вернитесь к нашему SVG, с помощью devtool нам нужно вынуть элементы внутри svgCSS SelectorОчень просто, найдите соответствующий элемент DOM на панели элементов, щелкните правой кнопкой мыши, выберитеCopy -> Copy selector, вы можете скопировать непосредственно в селектор CSS для этого элемента:
Теперь, когда мы можем получить селектор CSS для любой части svg и знаем, как использовать GSAP API для анимации движения, пришло время собрать все это вместе!
Давайте сначала настроим базовый макет. Как правило, когда svg помещается непосредственно в пустой HTML-код, большинство шаблонов будет близко к верхнему левому углу страницы. Мы можем применитьmargin: 0 autoОтцентрируйте его, и он будет приятно смотреться, и вы также можете добавить дополнительные отступы. Мы добавляем кнопку на страницу для запуска анимации:
<!--html part-->
<button onclick="animateBike()"> Build! </button>
<!--css part-->
<style>
#Capa_1 {
margin: 0 auto;
display: block;
width: 256px;
height: 100%;
}
</style>
Затем мы используемTimelineMaxкоторый предоставилstaggerFromиспользуйте devtool, чтобы найти колесные части скутера, скопируйте их CSS-селектор и поместите его вstaggerFromВ параметрах функции задайте оси x и yscaleвсе начинаются с 0, поcenterрост, принятиеBounce.easeOutФункция легкости и четыре селектора начинаются сstagger: 0.2Значение свойства как разница во времени для появления анимации движения:
const tl = new TimelineMax();
tl.staggerFrom(
[
"#Capa_1 > g > path:nth-child(1)",
"#Capa_1 > circle:nth-child(7)",
"#Capa_1 > path:nth-child(6)",
"#Capa_1 > circle:nth-child(5)"
],
1,
{
scaleY: 0,
scaleX: 0,
transformOrigin: "center",
ease: Bounce.easeOut,
stagger: 0.2
}
)
Всего несколько строк кода, и мы можем заставить наш скутер двигаться!
codepen补间是一个术语，用于描述逐帧序列，有时也称为"中间"。 在那个地方，一个动作导致下一个动作产生一个流畅的动作。
Идеальная анимация
Вы можете думать о TimelineMax как о временной шкале, где анимации выполняются в определенном порядке, аstaggerFromЗатем несколько элементов DOM могут быть запущены в порядке небольшой разницы во времени одновременно.Кроме того, мы также можем установить некоторые флаги, чтобы указать, какие анимации ждать до завершения других анимаций.
Наконец, проявите творческий подход и используйте различные API, чтобы выполнить набор комбо 👊:
codepenВывод 🎉
Увидев это, вы хотите попробовать?
В общем, мне самому она показалась довольно интересной, и я надеюсь, что она будет более или менее полезна тем, кто прочитает эту статью.
Напоследок хочу поделиться с вами крутымdemo, с обложки моей статьи