快速使用svg画出精美动画！

1. Introduction

SVG stands for Scalable Vector Graphics, it is a powerful and flexible way to represent graphics on the web. SVG is lightweight, and its resolution independent format allows it to look sharp on any screen size, making it an excellent choice for any web designer.

One of the great features of SVG is the ability to add animations to your graphics. In this article, we will explore how to quickly use SVG to create stunning animations that can make your website come alive.

2. Getting Started with SVG Animations

2.1 Creating an SVG Element

Firstly, we need to create an SVG element. We can do this either by creating an SVG file or embedding an SVG element in our HTML code. Let's embed the SVG element as follows:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

<circle cx="50" cy="50" r="40" fill="#39f" />
</svg>

The above code creates an SVG element with a viewbox of 0 0 100 100 and a circle with a center of 50,50 and a radius of 40. The circle is filled with the color #39f.

2.2 Animating the SVG Element

Now that we have created an SVG element, let's animate it. We can apply animations to SVG elements using CSS or Javascript. In this article, we will focus on using CSS animations to animate our SVG elements.

To create CSS animations, we need to define the keyframes of the animation using @keyframes. We can then apply the animation to the SVG element using animation.

Let's create an animation that changes the color of the circle from blue (#39f) to yellow (#ff0), and back again, continuously.

@keyframes circle-color {

  0% {
    fill: #39f;
  }
  50% {
    fill: #ff0;
  }
  100% {
    fill: #39f;
  }
}
circle {
  animation: circle-color 2s ease-in-out infinite;
}

In the above code, we have defined a keyframe called circle-color, which changes the fill color of the circle from blue to yellow and back to blue. We then apply the animation to the circle element using animation. We have set the duration of the animation to 2 seconds and set it to repeat infinitely using infinite.

3. Applying More Advanced Animations to SVG Elements

Now that we have created a basic animation, let's look at some more advanced animations that can be applied to SVG elements.

3.1 Transformations

Transformations allow us to manipulate the position, rotation, and scale of an SVG element. We can apply transformations using CSS or Javascript.

Let's create an animation that rotates the circle element continuously.

@keyframes circle-rotate {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
circle {
  animation: circle-rotate 2s linear infinite;
}

In the above code, we have defined a keyframe called circle-rotate, which rotates the circle from 0 degrees to 360 degrees. We then apply the animation to the circle element using animation. We have set the duration of the animation to 2 seconds and set it to repeat infinitely using infinite.

3.2 Path Animations

Path animations allow us to animate an SVG element along a specified path. We can use the <animateMotion> element to achieve this.

Let's create an animation that moves the circle element along a path.

 <path id="path1" d="M0,0 Q50,-100 100,0 T200,0" fill="none" />

<circle cx="0" cy="0" r="10">
  <animateMotion dur="4s" repeatCount="indefinite">
    <mpath xlink:href="#path1"/>
  </animateMotion>
</circle>

In the above code, we have created a path element called path1, which defines a quadratic Bezier curve. We then create a circle element that we want to move along the path. We achieve this by using <animateMotion> to move the circle along the path defined by path1. We have set the duration of the animation to 4 seconds and set it to repeat infinitely using repeatCount.

4. Conclusion

In conclusion, SVG animations are a powerful and flexible way to create stunning graphics and animations on the web. In this article, we have explored how to quickly use SVG to create basic and advanced animations that can make your website come alive. I hope this article has helped you to understand the basics of SVG animations and given you inspiration for your own SVG animations.