Quickly use svg to draw beautiful animations!

I often see heroes using SVG to draw incredible animations onCodepen. I have always been curious about how they work. I always feel that this needs to be corrected. Only if you have a thorough understanding of SVG and draw those SVG patterns yourself can you make it move.

But that’s not the case. Today I will teach you a simple trick that will allow you to quickly implement an SVG animation!

OpenCodepen, click thebuildbutton in the interface, you can use animation to build a house, and let it rise with smoke!

Demo address: https://codepen.io/johnYu243/pen/bGBVEwv

devtoolObserve the svg pattern, you will see the following The result:

elementpathandcircleare bothDOM elements of svg, respectively represent the lines and circles in the svg pattern.

pathcorresponds to:

GreenSock Animation Platform (GSAP for short)The createable timeline (timeline) launched by the well-knownGreenSock Animation Platform (referred to as GSAP) is used as a container for animation or other timelines. This makes it easy to control the entire animation and precisely manage timing.

GSAP even provides us withEase Visualizerto show the effect of each Ease function, and also attaches the code:

Demo address: https://codepen.io/johnYu243/pen/jOVbMzX

A few simple lines of code can achieve the following effects:

Getting started with GSAP

GSAP’s API function is very powerful, and there are related communities:Official website documentation,Forum,TimelineMax Chinese Manual

In the initial house construction example, I mainly used TimelineMax’sfromandstaggerFrom, which Both APIs only need to set initial values, and they will complete the tween animation within the specified time:

tl.from("#House > rect:nth-child(24)", 1, { scaleX: 0, transformOrigin: "center", ease: Power2.easeOut })

In this step we will CSS Selector#House > rect:nth-child(24)This element starts fromscaleXbeing 0, with center as the starting point for deformation, and usesPower2.easeOutto return to the original state within one second and perform compensation. animation.

.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" )

is similar tofrom, except thatstaggerFromcan put multiple CSS Selectors at once, and use thestaggerattribute to set the Selector in the array At what time difference will it appear?

For detailed API parameters, please refer to theOfficial Document

Then go back to our SVG, and with the help of devtool, we need to remove theCSS Selector# of the internal elements of the svg. ## It's very easy. Find the corresponding DOM element in the element panel, right-click, selectCopy -> Copy selector, and you can directly copy it to the CSS Selector of the element:

现在我们能取得svg 中任意部分的CSS Selector，也知道怎么用GSAP API 来进行补间动画，现在是时候将其结合起来！

我们先调整下基本布局，一般在空白Html内直接放入svg时，图案大多会紧靠页面左上角，我们可以套用个margin: 0 auto将其置中，看起来会顺眼一些，你也能额外加些padding。我们在页面添加一个按钮来调用动画：

  Build!   

接着我们使用TimelineMax提供的staggerFrom函数，利用devtool将滑板车的轮子部分找出来，复制它们的CSS Selector，放入staggerFrom函数参数中，设定x与y轴的scale都从0开始，由center增长，采用Bounce.easeOut的ease function ，而四个Selector间以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 } )

简单几行代码，就能让我们的滑板车动起来！

演示地址：https://codepen.io/johnYu243/pen/poNjNzz

补间是一个术语，用于描述逐帧序列，有时也称为"中间"。 在那个地方，一个动作导致下一个动作产生一个流畅的动作。

完善动画

你可以把TimelineMax想像成时间轴，动画按指定顺序执行，而staggerFrom则可以同时让多个DOM元素以微小时间差的顺序启动，另外我们还可以设置一些Flag来指定要等到哪几个动画完成后，才接续其他动画。

最后，发挥自己的创意，使用各种API打出一套组合拳：

演示地址：https://codepen.io/johnYu243/pen/yLVYVey

结论

看到这里，跃跃欲试了吗？

总之，我自己觉得蛮有趣的，希望或多或少对读到这篇文章的人有点帮助。

最后给大家分享一个很酷的demo，来自我的文章封面

参考文章

GreenSock Animation Platform

How to Create Beautiful SVG Animations Easily

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of Quickly use svg to draw beautiful animations!. For more information, please follow other related articles on the PHP Chinese website!