[Web Animation] SVG implements complex line animation and web Animation svg lines

[Web Animation] SVG implements complex line animation and web Animation svg lines

In the previous article, we initially implemented some line animations that can be completed using basic graphics:

[Web Animation] Getting started with SVG line Animation

Of course, things are moving towards entropy increase and decrease, and complicated lines are certainly more than ordered lines.

Most of the time, we cannot manually draw some very complex animated lines. In this case, we need to use the front-end to help PS and AI. This article describes how to export complex SVG paths. :

Well, let's assume that we want to create a GIF loading image:

The path of the above SVG line AnimationpathIf you need to manually position and debug the image, you can try it.

 

Export path using PS

It is estimated that the image can be painted by hand, and there is no such thing as much as it is. Well, it's the turn of the Tool. Let's see what our source image looks like in PS (PNG and GIF with transparent channels are preferred ):

OK. Select the box tool, press CTRL to select the layer, and then select create working path:

In this case, an option to set the tolerance size will pop up. You can try multiple times with different sizes of tolerance until you get a satisfactory path.

What is the tolerance? It can be understood as an accuracy. The selected range is set when the color is selected. The larger the tolerance is, the larger the selection range is. The value range is between 0 and.

Okay. Now the path is created. You can set the transparency of the layer to 0 to clearly see what the path looks like:

Hong Kong is really handsome.

Okay. In the last step of PS, click the file option, export the path to illustrator, see the figure, and follow the steps below:

Generate an SVG file in illustrator

Open AI and open the one exported in PS.*.aiFile.

No AI? As a front-end, I didn't even install AI (￣ △￣;). Actually, I used SVG to get started. Let's get started. My version is Adobe illustrator CC 2014.

You may see a blank area. Don't worry. Use the selection tool to select a rectangle to select the path.

If you are a little expert in the PS pen tool, you can continue to modify the path until you are satisfied.

OK. Next, adjust the canvas size. It is best to align the upper left corner of the path with the upper left corner of the canvas, and select the file to be stored as an SVG file.

Well, in fact, AI has nothing to do. The path is generated using PS. Why not use PS directly?*.svgWhat about files? Because my version PS does not support direct storage as the SVG format. In fact, you can also draw paths directly on AI. This depends on the designer or the tool you are more familiar.

Obtain pathPath

OK.*.svgOpen the file in the path in the browser. A blank area is normal. Right-click to view the webpage source code:

It is done. Here, the path is what we need!

Okay, take what we want<path>Take it out and use the line animation knowledge of the previous article to give it a simple animation effect:

Use javascript computing pathPath Length

Another problem is that line animation needs to know the wholepathPath length. We can also use addition and subtraction to calculate the length of the entire graph. How can we calculate the length of a complex path?

You can use a simple js file:

<svg>    <path d="..."></svg>

var obj = document.querySelector("path");var length = obj.getTotalLength();console.log(length); // 377.0433

Well, with the complex graphics path, we can make a lot of cool SVG animation effects. Spread flowers. You can search for SVG on codePen and learn some SVG animations from the gods.

This is the first step in SVG. There will be a series of SVG articles that will further discuss SVG.

On my Github, I used SVG to implement some graphics-SVG whimsy. The Demo can be used here.

 

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.