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!

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

##Looking for exquisite svg patterns

Since 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.

Analyze svg pattern

Open

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.

For example:

<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:

At this time, an idea should be formed, since We can know which part of the pattern each element corresponds to, and we can operate on the DOM elements we want to animate!

TimelineLite/TimelineMax Tool

If you use CSS or JavaScript to process animations by yourself simply through id and className, it is still quite difficult, and more importantly, it takes a lot of time

So we have to borrow tools. Timeline (Lite|Max) and TweenMax are well-known

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:

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’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，来自我的文章封面

参考文章

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!