Code meets art, and SVG animation is born

SVG profile

SVG (Scalable vector Graph) has been used more and more frequently in recent years, but SVG has been silent for a long time since its invention. Due to the insufficient support of browser manufacturers for SVG, there are few opportunities to use it in the Web. However, the compatibility and adaptability of SVG has led to a growing number of scenarios in which SVG can be used.

SVG is great for animation because it is made up of numbers and is essentially drawn using geometric shapes. On the Web, numbers are easy to manipulate and intuitive.

SVG has the following advantages: • Data visualization: Real data directly expresses the ideas people want, and it is easy to communicate and display complex ideas. • Responsive: SVG is a vector graph that is uniquely scalable and works well on a variety of screens. • Performance: Proper use of SVG in Web applications or pages can reduce page load resources, especially in responsive Web applications. • Operational DOM structure: SVG is structured like HTML, with an operational DOM. This means that users can use code to directly implement desired vector graphics, animate the DOM, and animate SVG.Copy the code

SVG DOM

<svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100" style="border: 1px solid black;">
  <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
  <circle fill="black" stroke="black" cx="170" cy="50" r="45"></circle>
  <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 279,79 248,94 254,62 230,39 263,35">
  </polygon>
  <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"></line>
  <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"></line>
</svg>
Copy the code

Let's take a look at the SVG structure first. Since it is interlinked with HTML, the SVG syntax is also familiar and easy to understand. In the root < SVG >, we see that both x and y values are 0, representing the starting point of the SVG coordinate system. Both width and height are specified, and you can see that they are the same as the last two arguments in the viewBox. In the code, rect represents a rectangle, circle represents a circle, Cx cy represents the coordinates of the center of the circle, r represents the radius, polygon can draw a graph connected by various points at will, and line represents a line.Copy the code

ViewBox

SVG's viewBox is a very powerful attribute, because it truly allows the SVG canvas to extend indefinitely, while simultaneously controlling and precisely defining SVG's visual space. The viewBox has 4 parameters that need to be set according to the order of x, y width and height. The value of the viewBox does not have units, because the space is not defined by pixels, but is a space that can be extended arbitrarily, so that it can adapt to many different sizes. As shown in figure 1-1, we regard the SVG background as a square paper, and define a coordinate system based on this square paper. The square paper itself is self-independent. We can change the width, height, or anything else on the grid paper without affecting the SVG itself on the grid paper. We can understand that all graphics are based on the viewBox coordinate system and drawn in the viewBox, and the viewBox automatically ADAPTS to the width and height of < SVG >.Copy the code

SVG animation

CSS animations


      
<svg id="svg-order" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="svg" transform="Translate (266.000000, 59.000000)" fill="# 000000">
      <path id="order"></path>
    </g>
  </g>
</svg>
<style>
 #svg-order {
  animation: name 2s infinite ease-in-out forwards;
}
@keyframes name {
  0% {
    transform: translateX(0);
  }
  50% {
    background: greenyellow;
    transform: translateX(100px) scale(2);
  }
  100% {
    background: hotpink;
    transform: translateX(200px); }}</style>
Copy the code

In the above example, you manipulate the DOM directly with CSS, adding CSS animations.

Sequence frame STEP to animate

Animation: splashit 1.8s steps(24) infinite;Copy the code

Sprite images produced by SVG are displayed by step sequence frames in CSS animation, which is similar to the production method of animation. The background is not changed, and the movement of characters in each frame forms a complex animation.

Through GreenSock, a third-party framework

<svg width="200px" height="500px" viewBox="0 0 200 500">
  <circle class="element" fill="black" cx="45" cy="45" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="95" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="145" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="195" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="245" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="295" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="345" r="25"></circle>
  <circle class="element" fill="black" cx="45" cy="395" r="25"></circle>
</svg>
<script>
  // TweenMax.to('.element', 2, {x: 100})
  // TweenMax.fromTo('.element', 2, {x: 0}, {x: 100})
  TweenMax.staggerTo('.element'.2, {x: 100}, 0.1)
</script>
Copy the code

By introducing GreenSock directly, you can manipulate the DOM directly with its powerful animation capabilities. Above is a method that moves 100px in the x direction.