Introduction to front-end technology-svg and the use of Snap.svg.js open source projects

Preface-Why Learn Snap.svg.js

Before the webapp of the technology group, some people feel that the form of svg+animate feel very flashy, vector graphics arbitrarily enlarged and do not need to download pictures, and the effect of the mobile phone end smooth.

(The biggest difference between a vector graph and a bitmap is that it is not affected by resolution.) You can zoom in or out of a graphic without affecting the clarity of the diagram.

It can be displayed to the output device at the highest resolution, and the bitmap is a picture taken by the camera, made up of blocks of pixels.

SVG code can be exported using Adobe's AI software, which is also an open source project for Adobe Snap.svg

SVG, animate is not new, but because the SVG code is computed by the PC, manipulate it to zoom in or out of the flip and more cool effects.

Or the use of JS package good way to operate more time-saving and more convenient.

And the mobile side of the boom also led to SVG this technology is increasingly used in the project.

You'll use jquery to get snap.svg.js.

First click to see a demo to interest you.

Just look at the alligator's head on the demo page, and the mouse moves in the past with interactive animations.

Now all we have to do is analyze the principle of the effect, don't be afraid, even if it looks fierce (escaping

Open the F12 select element to the moving palate. Click to see the code:

At this point we can look at the code that clicks on the element with a bunch of tags that seem to have never been used by the front end. (At least when I first contacted SVG, I thought so)

Then we need to know the role of these tags in order to use them flexibly. In order to be easy to understand, I only introduce the tags in the demo, want to know more details please check the information.

<g></g>: Understood as a block, that is, the crocodile is not a picture, is composed of N g (block), as usual refactoring, countless div nesting, separation, as a container, we need to manipulate the container to animate.

<polygon>: The label is used to create a graphic with no less than three edges.

<line>: Labels are used to create lines.

Next, look at what the source code is.

We put the F12 window zoom point on one side, when the mouse moved to the palate, observe the F12 in the upper jaw section of this code, see figure.

You can see the id= "Upper-jaw" in the G-tag Transform=matrix (1,0,0,1,0,0) These six values are constantly changing, that is, we see the animation effect. (Matrix () I will post in the end of the article, now do not need to understand, more laborious)

As mentioned above, will use jquery will use Snap.svg.js, really very simple, below I put code let us come to look look, don't forget to introduce snap.svg.js before this. (Download snap, run in Wamp environment)

Window.onload =function () {            varCroc = Snap.select ("#crocodile"), head= Croc.select ("#upper-head"), Jaw= Croc.select ("#upper-jaw"),//get to the palate of the crocodileSymbol = Croc.select ("#symbol"), timer; varPivots = [                [44, 147],//the value of the Matrix animation effect[92, 126]            ]; //the function that triggers when the mouse leaves-close the big mouth            functionClose () {cleartimeout (timer); Head.animate ({transform:"R" + [8, Pivots[0]]                }, 500, Mina.backin); Jaw.animate ({transform:"R" + [PNs, pivots[1]]                }, 500, Mina.backin); Timer= SetTimeout (function() {symbol.animate ({transform:"T-70,40r40"                    }, 100); }, 400); }            //a function triggered when the mouse hover-close the big mouth            functionOpen () {cleartimeout (timer); Head.animate ({transform:"R" + [0, Pivots[0]]                }, 700, mina.elastic); Jaw.animate ({transform:"R" + [0, [92, 200]]                }, 700, mina.elastic); Symbol.animate ({transform:"T0,0r0"                }, 500, mina.elastic); } Timer= SetTimeout (Close, 50); //defining event Trigger conditionscroc.hover (Open,function() {Timer= SetTimeout (Close, 200);        }            ); };

I believe that jquery will be sure to understand, nothing is to get the element, call the encapsulated method to achieve the effect.

The reason for the length (or am I hungry?) feel some places may not be fine, message I will reply in time.

What we need to do next is to understand Snap.svg.js's API, and all I have left to do is leave a bunch of data addresses, penniless afterwards (tears).

Snap.svg.js Chinese API

Understanding matrix (matrices) in the CSS3 transform

Finally, thank Zhang Xin Xu Blog information.

------------------------------the last of the last (spit a Groove-----------------------------------------------

I was going to put a crocodile-eating moon on the effect. But did not find the CDN, did not stick up, I also lazy the whole. Put it on your computer and enjoy it.

At last.. (It's not over yet.

Next Wednesday is about to enter the job, yesterday just got the exit certificate, leaving the first company is still more nostalgic, although a bit of pit bar, but still pretty good memories AH ~ exclamation (￣︶￣) rose

Introduction to front-end technology-svg and the use of Snap.svg.js open source projects