前端技术-svg简介与snap.svg.js开源项目的使用

前言-为何学习snap.svg.js

前阵子webAPP的技术群里有人感受到svg+animate的形式感受很炫，矢量图任意放大且不须要下载图片,而且在手机端效果流畅。

（矢量图与位图最大的区别是，它不受分辨率的影响。能够任意放大或缩小图形而不会影响出图的清晰度，

能够按最高分辨率显示到输出设备上,位图即相机拍出来的，由像素块组成的图片。

svg代码可以使用Adobe公司的AI软件导出，该Snap.svg也是Adobe的开源项目）

 

虽然svg、animate并不新鲜，但因为svg的代码是由PC计算出来的，操纵它放大或缩小翻转等更加炫酷的效果。

仍是使用js封装好的方法来操做更省时省事一些。

而且移动端的火爆也致使svg这项技术也愈来愈多的运用在项目中。

 

言归正传-会用jquery就会用snap.svg.js

先点击看个Demo让您感兴趣。

直接在演示页面看那个鳄鱼头就行了，鼠标移动过去会有交互式的动画。

 

如今咱们要作的就是分析这个效果的原理是什么，不要畏惧，即使它看上去很凶（逃

开启F12选择元素 对准那个会动的上颚点击一下看看代码：

这时候咱们能够看下点击该元素的代码中有一大堆好像前端历来都不须要用到的标签..（起码我一开始接触svg是这样认为的）

那咱们就须要知道这些标签的做用，才能灵活的运用它们。为了通俗易懂，我只简介demo中的标签，想知道更详细的请去查下资料。

<g></g>   ：理解为一个块，即那个鳄鱼并非一张图片，是由N个g（块）组成的,就跟平时重构同样，无数个div嵌套，分离，把它看做一个容器，咱们须要操纵容器来进行动画。

<polygon> ：标签用来建立含有很多于三个边的图形。

<line>        ：标签用来建立线条。

 

接下来看下源码是什么样的

咱们把F12窗口缩小点放在一边，当鼠标移动到上颚的时候，观察下F12中上颚部分的这段代码，见图。

能够看到id="upper-jaw"的g标签中 transform=matrix(1,0,0,1,0,0)这六个数值在不断的变化，也就是咱们所见到的动画效果。（matrix()资料我会贴在文章尾部，如今不须要去理解，比较费劲）

上面说过了，会用jquery就会用snap.svg.js,真的很简单，下面我贴代码让咱们来look look，别忘了在此以前引入snap.svg.js。(下载snap,要在wamp环境下运行)

        window.onload = function () {

            var croc = Snap.select("#crocodile"),
                head = croc.select("#upper-head"),
                jaw = croc.select("#upper-jaw"),//获取到了鳄鱼的上颚
                symbol = croc.select("#symbol"),
                timer;
                
            var pivots = [
                [44, 147],//matrix动画效果的值
                [92, 126]
            ];

            //鼠标离开时触发的函数-即合上大嘴
            function close() {
                clearTimeout(timer);

                head.animate({ 
                    transform: "r" + [8, pivots[0]]
                }, 500, mina.backin);
                
                jaw.animate({
                    transform: "r" + [37, pivots[1]]
                }, 500, mina.backin);

                timer = setTimeout(function () {
                    symbol.animate({
                        transform: "t-70,40r40"
                    }, 100);
                }, 400);
            }

            //鼠标hover时触发的函数-即合上大嘴
            function open() {
                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);

            //定义事件触发条件
            croc.hover(open, 
                function () {
                    timer = setTimeout(close, 200);
                }
            );
        };

我相信会jquery的确定一看就懂了，无非就是获取元素，调用封装好的方法来达到效果。

篇幅缘由（或者是我饿了？感受有些地方可能没讲细，留言我会及时回复的。

接下来咱们须要作的是了解Snap.svg.js的API，我剩下要作的也就是留下一堆资料地址，两袖清风了（泪..

Snap.svg.js中文API

理解CSS3 transform中的Matrix(矩阵)

最后感谢张鑫旭博客的资料。

 

------------------------------最后的最后（吐个槽-----------------------------------------------

我原本想贴个天鳄食月的效果。。可是没找到CDN，没贴上来，我也懒得整了..放在电脑里本身欣赏吧。。

最后..(没完了没完了

下星期三就要入职了，昨天刚拿到离职证实，离开第一家公司仍是比较怀念的，虽然有点坑吧，但仍是挺美好的回忆啊 ~ 感叹下(￣︶￣)↗ 涨