Snap. svg, front-end essential artifact

Snap. svg, front-end essential artifact

Some people say that front-end developers who do not use SVG are not developers, But fans. The front end is not just Angularjs, but it is too late to learn SVG at this time! (If you only use jQuery, I will not say it ...) Here I will share with you the SVG effect on the tall one I saw elsewhere a few days ago. The menu on the left will pop up and say, click here.

At that time, I was shocked. Today I took the time to find out the source code. Next, I made a Demo after my painstaking research. Although it was rough, I still felt very foreign. I will share this DEMO with you.

Http://jsfiddle.net/windwhinny/n6w1ur5k/3/

In this case, we need some path knowledge in PS or AI. The following are the knowledge points and tools involved in this example:

Snap. svg
Svg path data
Adobe Illustrator
Animation timing

First, the principle is given: the coordinates are changed based on time. As shown in, in this example, it is actually A transformation between the three lines A, B, and C. A is the initial state, and after clicking A, B finally forms C. There are two animations, A-B and B-C, and the timing function and time of these two animations are different.

Step 1: Draft

The first step before animation is to draw a draft (for example). I usually use AI to draw images because AI can precisely control the size and position of elements, and the principle is the same as that of SVG.

Then some people will say, "Old wet, do you want to save it as SVG format and then modify it ?"

Error

The purpose of drawing a draft chart is to easily determine the coordinates of each point. It is too troublesome and error-prone. Besides, AI has no effect. The SVG file generated by AI cannot be used in this example at all, because the path strength is too messy, which will be detailed below.

What? You won't use AI?

If you want to continue on the front-end road, study now. (Here I want to talk about it. PS is used to process dot matrix images and is not suitable for design. In contrast, AI is doing this. The metrial design layout templates provided by google are all in the AI format. However, no matter what enterprises in China, PS seems very happy, and I don't know why .)

Step 2: computing path

This step is complicated. As mentioned above, this animation is actually a conversion between coordinates. The conversion from the quadrilateral to the arc is not only a coordinate displacement, but also a curve radian conversion. After the above design drawing is saved as SVG, the Code is as follows:

Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<! -- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<Svg version = "1.1" id = "layer _ 1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
ViewBox = "0 0 175 175" enable-background = "new 0 0 175 175" xml: space = "preserve">
<! -- Path A -->
<Path fill = "none" stroke = "# BF3A41" stroke-miterlimit = "10" d ="
M12.5, 12.5
H75
H75
V75
V75
H-75
H-75
V-35
V12.5z "/>
<! -- Path B -->
<Path fill = "none" stroke = "# 0000FF" stroke-miterlimit = "10" d ="
M37.5, 37.5
C0, 0, 10-25, 50-25
S50, 25, 50, 25
S25, 10, 25, 50
S-25, 50-25, 50
S-10, 25-50, 25
S-50-25-50-25
S-25.1-10-25.1-50
S37.5, 37.5, 37.5, 37.5z "/>
<! -- Path C -->
<Path fill = "none" stroke = "#000000" stroke-miterlimit = "10" d ="
M37.5, 37.5
H50
H50
V50
V50
H-50
H-50
V-50
V37.5z "/>
</Svg>

We only need to pay attention to the d attribute of the path. We can see that the AB paths can still be converted to each other, but they and the C path (with an arc path) cannot be converted. The drawing commands they use are different. Both AB and AB are rectangles. h and v are used for drawing, that is, the displacement between horizontal and vertical lines. C-lujin uses commands such as s and c, and draws curves. Therefore, we cannot use the images provided by AI. We need to redraw them based on svg path data.

Next I will redraw the three paths by referring to the AI Design Drawing:

Copy codeThe Code is as follows:
<! -- Path A -->
<Path d ="
M37.5, 37.5
S87.5, 37.5, 87.5, 37.5
S137.5, 37.5, 137.5, 37.5
S137.5, 87.5, 137.5, 87.5
S137.5, 137.5, 137.5, 137.5
S87.5, 137.5, 87.5, 137.5
S37.5, 137.5, 37.5, 137.5
S37.5, 87.5, 37.5, 87.5
S37.5, 37.5, 37.5, 37.5z ">
<! -- Path B -->
<Path d ="
M 37.5, 37.5
S47.5, 12.5, 87.5, 12.5
S127.5, 25,137.5, 37.5
S162.5, 47.5, 162.5, 87.5
S150, 127.5, 137.5, 137.5
S127.5, 162.5, 87.5, 162.5
S47.5, 150, 37.5, 137.5
S12.5, 127.5, 12.5, 87.5
S25, 47.5, 37.5, 37.5z ">
<! -- Path C -->
<Path d ="
M12.5, 12.5
S87.5, 12.5, 87.5, 12.5
S162.5, 12.5, 162.5, 12.5
S162.5, 87.5, 162.5, 87.5
S162.5, 162.5, 162.5, 162.5
S87.5, 162.5, 87.5, 162.5
S12.5, 162.5, 12.5, 162.5
S12.5, 127.5, 12.5, 127.5
S12.5, 12.5, 12.5, 12.5z ">

If you have had a design foundation, you should understand the meaning of the above Code, that is, convert all the anchor points to smooth, and then change the location of the handle. The shape is not changed. Although there are a lot more code, the drawing commands are changed to S, so that the three paths are only different between values. The animation process is the conversion between values.

Step 3: Timing

This step is to set the animation time point and timing function. A-B and B-C I set are 300 ms and 400 ms, respectively.

Timing function is the animation-timing-function attribute used in CSS animation. It is common to have the following attributes: timeline, linear, and easein. We can also customize the timing function by using the besell curve. But the CSS timing function is relatively simple, can only define a uniform curve, the A-B conversion used to pull-out, but the B-C in order to reflect the effect of the bullet, the timing-function used is not as simple as a uniform curve.

Some commonly used timing-functions are listed above, which are roughly divided into three types: timer, bounce, and elastic. Ease is generally used as a deceleration or acceleration animation. Bounce is like his graph, and is generally used as the animation of Ball Landing. And elastic is generally used in the same dynamic effect as the string, a feature of this dynamic effect is that some offset to the negative coordinate, and the B-C is used this, such.

Based on the path already drawn above, combined with animation, the code will come out:

Copy codeThe Code is as follows:
Var svg = Snap ("# svg ");
Var pathes = [
"M37.5, 37.5S87.5, 37.5, 87.5, 37.5S137.5, 37.5, 137.5, 87.5, 137.5, 87.5, 137.5, 137.5, 137.5, 137.5S87.5, 87.5, 137.5, 137.5S37.5, 37.5, 137.5S37.5, 87.5, 37.5, 87.5S37.5, 37.5, 37.5, 37.5z ",
"M 37.5, 37.5 S47.5, 12.5, 87.5, 12.5 S127.5, 25,137.5, 37.5 S162.5, 47.5, 162.5, 87.5 S150, 127.5, 137.5, 137.5, 162.5, 87.5, 162.5, S47.5, 150, 37.5, 137.5 S12.5, 127.5, 12.5, 87.5 S25, 47.5, 37.5, 37.5z ",
"M12.5, 12.5S87.5, 12.5, 87.5, 12.5S162.5, 12.5, 162.5, 12.5S162.5, 87.5, 162.5, 87.5S162.5, 162.5, 162.5, 162.5S87.5, 162.5, 87.5, 162.5S12.5, 162.5, 12.5, 162.5S12.5, 127.5, 12.5, 127.5S12.5, 12.5, 12.5, 12.5z"
];

Var path = svg. path (pathes [0]);

Path. attr ({
Fill: "# 2E70FF"
});

Function animateIn (callback ){
Path. animate ({
D: pathes [1]
}, 300, mina. easeout, function (){
Path. animate ({
D: pathes [0]
}, 400, mina. elastic, callback)
});
};

Function animateOut (callback ){
Path. animate ({
D: pathes [1]
}, 300, mina. easeout, function (){
Path. animate ({
D: pathes [2]
}, 400, mina. elastic, callback)
});
};

Snap is a library produced by Adobe for processing SVG. mina is an animation tool set provided by Snap, with many preset animations.

Conclusion

Animations made with Snap can be compatible with IE9, with good speed and powerful custom functions. I believe that in the near future there will be more cool and cool dash dashboard effects that will be made with Snap.

If you want to learn animation effects, you can watch a TED video