Front-end essential Artifact Snap.svg the _jquery of dynamic effect

Some people say that no SVG front-end developers do not call developers, but call enthusiasts. The front end is not only angularjs, this time does not learn SVG is late! (If you would only jQuery just when I didn't say ...) Here I would like to share a few days elsewhere seen in a tall SVG effect, the left menu bounce out will move to say, chain contact here.

At that time I was shocked, today to find out the source code, and then the following is my painstaking research after the Demo, although relatively rough, but still very brim feeling. Now I will share this DEMO with you.

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

This case requires some knowledge of the path in PS or AI, and the following are the knowledge points and tools involved in this example:

Snap.svg
SVG path data
Adobe Illustrator
Animation timing

First, the principle: transform the coordinates according to the time. As shown in the following figure, this example is actually a conversion between a, B, C three lines, A is the initial state, after the click of B finally formed C. There are two animations, respectively A-b and b-c, and the timing function and time of these two animations are different.

First step: Draw a draft

The first step before doing animation is to draw a draft (pictured above), I usually use AI to draw, because AI can accurately control the size and location of elements, and its principle and SVG is the same.

Then some students will say, "Old wet, is not to save for SVG format, and then make changes ah?" ”

Wrong

The purpose of drawing a draft diagram is to easily determine the coordinates of each point, it is too troublesome and error prone. In addition, AI does not have any effect. AI generated SVG files in this case can not be used at all, because the road point is too confusing, the following will be detailed.

What the? You don't use AI?

If you still want to go down the front end of the road, then go to school now. (Here I want to spit, PS is used to deal with dot-matrix images, it is not suitable to do design drawings.) In contrast, AI is doing this, Google gives the metrial design layout templates are all AI format. But no matter what the domestic enterprises, with PS are like very happy appearance, do not know why. ）

Step two: Compute the path

This step is more complicated, said above, the animation is actually the transformation between the coordinates. And the transformation from quadrilateral to arc is not only the coordinate displacement, but also the transformation of curve radian. The above diagram is saved directly as SVG after the following code:

Copy Code code 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= "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= "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= "d="
m37.5,37.5
H50
H50
V50
V50
H-50
H-50
V-50
v37.5z "/>
</svg>

We just need to focus on the path of the D-property on the line, you can see that AB two paths can be converted to each other, but they and C path (the path of the arc) can not be converted between. They use the drawing commands are different, AB two are rectangular, the drawing is used in the H, V, which is the displacement between the vertical and horizontal lines are drawn. and C road strength to use is the S, c these commands, draw out are curves. So we can't use the graph given by AI to redraw it from the SVG path data.

Below I refer to the AI design redraw three paths:

Copy Code code 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 ">

Students who have the basics of design should understand the meaning of the above code, that is, to convert all the anchor points to smooth, and then change the position of the handle. The shape has not changed, although the code is a lot more, but the drawing command has been changed to S, so that three paths are only the difference between the values. And the process of animation is the conversion between numbers.

Step Three: Timing

This step is to set the animation point of time and timing function. Point of Time, A-b and b-c I set the distinction between 300 milliseconds and 400 milliseconds.

Timing function is what we do in the CSS animation used in the Animation-timing-function attribute, more common there are ease, linear, easein, we can also use the Bezier curve of their own customization. But the CSS timing function is relatively simple, can only define a uniform curve, a-b conversion to use the ease-out, but b-c in order to reflect the effect of the dynamic, the use of timing-function is not a uniform curve so simple.

The above listed some of the more commonly used timing-function, which is roughly divided into ease, bounce, elastic three categories. Ease is generally used as a deceleration or accelerated action. Bounce, like his graph, is generally used as a small ball to the landing of the dynamic effect. and elastic generally used in the same as the strings of the dynamic effect, this dynamic effect is a feature is part of the offset to the negative coordinates, and b-c used is this, the following figure.

Depending on the path that has been drawn above, the animation will come out of the code:

Copy Code code as follows:

var svg=snap ("#svg");
var pathes=[
"m37.5,37.5s87.5,37.5,87.5,37.5s137.5,37.5,137.5,37.5s137.5,87.5,137.5,87.5 s137.5,137.5,137.5,137.5s87.5, 137.5,87.5,137.5s37.5,137.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 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 ",
"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 an Adobe-produced library that handles SVG, and Mina is a set of animated tools with Snap, with many preset animations.

Conclusion

Animations made with SNAP can be compatible with IE9 and have a good speed, and the customization is powerful. I believe that in the near future there will be more and more crazy to pull cool cock The effect of the day will be made with Snap.

If you want to learn how to be effective, you can take a look at the TED episode of video on action.