Home > Article > Web Front-end > Quickly use svg to draw beautiful animations!
I often see heroes using SVG to draw incredible animations on Codepen
. 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!
Open Codepen
, click the build
button in the interface, you can use animation to build a house, and let it rise with smoke!
##Looking for exquisite svg patternsSince we can’t draw it ourselves, we will look for ready-made libraries. There are many svg libraries. Websites such as Flaticon, iconfont, Iconfinder or icons8 will provide many free svg patterns.Demo address: https://codepen.io/johnYu243/pen/bGBVEwv
Analyze svg patternOpen
devtoolObserve the svg pattern, you will see the following The result:
elementpath
and
circle are both
DOM elements of svg , respectively represent the lines and circles in the svg pattern.
<path></path>The content of d in the above code: M represents moving the pen to (10, 25), then L draws a line to (10, 75), and finally Go back to the starting point and draw a triangle. Through devtool, we can see which part of the pattern each
path corresponds to:
GreenSock Animation Platform (GSAP for short) The createable timeline (timeline) launched by the well-known GreenSock 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 with Ease Visualizer to 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:
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’s from
and staggerFrom
, 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 from scaleX
being 0, with center as the starting point for deformation, and uses Power2.easeOut
to 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 to from
, except that staggerFrom
can put multiple CSS Selectors at once, and use the stagger
attribute to set the Selector in the array At what time difference will it appear?
For detailed API parameters, please refer to the Official Document
Then go back to our SVG, and with the help of devtool, we need to remove the CSS Selector# of the internal elements of the svg. ## It's very easy. Find the corresponding DOM element in the element panel, right-click, select
Copy -> 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。我们在页面添加一个按钮来调用动画:
<!--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 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,来自我的文章封面
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!