资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Snap.svg 基本知识入门

Snap.svg 基本知识入门

fantix / 3247人阅读

摘要：因为的创造者正是的创造者，而也是用来操作的。它的主要一个功能是能使老版本的浏览器也能支持，比如等。首先准备一个基本开始骨架，基本的结构以及引入这个库。是不是似增相识。首先我们来创建一个椭圆并放置在上组图形的中间。

最近做了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的可以去网站看看。

工欲善其事，必先利其器。要用svg制作复杂或者是高级的动画效果，javascript就必不可少来。今天我们就来学习下svg中的jQuery库Snap.svg这一js库，它的功能跟jQuery在dom的作用差不多，只不过它是专门用来操作svg的。有了它，我们就可以轻松的使用javascript和svg打交道了。

接下来以实际的例子来讲解下Snap的使用方法。

Snap的那些事儿

说起Snap就不得不提Raphäel.js这个库。因为Snap的创造者正是Raphäel.js的创造者Dmitry Baranovskiy，而Raphäel.js也是用来操作svg的。它的主要一个功能是能使老版本的IE浏览器也能支持svg，比如ie6等。

而snap的出现，则是实现了svg中的一些高级特性的功能，比如蒙板、渐变、分组以及动画等高级特性，而且也不再对老版本的不支持svg的浏览器进行兼容，大大减少了代码量更加能发挥svg的特性。

Snap能做些什么

从官方的文档API documentation可以看到，所有svg的特性我们都可以使用Snap来操作，比如mask,group,gradient,filter,animate,
pattern等属性。

使用snap能帮助我们创建svg格式的图形，当然也能基于现有的svg图形来进行操作。意味着我们不一定要使用snap来创建图形，我们可以先使用一些适量编辑软件如Adobe IIIustrator,Inkscape,或者是Sketch来制作svg图形，然后再使用snap来进行一些操作。

开始使用Snap

方便起见，我们这里使用codepen来做一些demo。

首先准备一个基本开始骨架，基本的hmtl结构以及引入snapsvg.js这个库。

准备好后就可以开始编码啦。

其实它的使用方法跟jQuery差不多，开始之前需要初始化Snap，即使用Snap来制定我们需要操作svg的节点并把它指定给一个变量。我们这里就定义为s。

var s = Snap("#svg");

是不是似增相识。

现在我们就可以使用Snap提供的各种方法来操作s这个变量，比如圆或者是矩形。

圆，创建圆需要三个参数：X(x轴的坐标)，Y(y轴的坐标)，半径。具体可以参考文档circle API

矩形，需要四个参数：X，Y，宽，高。文档地址rect API

椭圆，需要四个参数：X，Y，horizontal radius(水平方向的半径)，vertical radius(垂直方向的半径)。文档地址ellipse API

我们输入下面的js代码：

    //创建床半径为80的圆
    var circle = s.circle(90,120,80);
    // 宽为210de的juxing
    var square = s.rect(210,40,160,160);
    //椭圆
    var ellipse = s.ellipse(460,120,50,80);

就会为我们绘制下面这三个图形：

DEMO

从代码运行的结果来看，默认填充的颜色是黑色。下面我们使用snap来设置一些样式，如填充、透明度、边框、边框的宽度等属性。具体可以去看看文档
SVG attributes。

    circle.attr({
      fill: "coral",
      stroke: "coral",
      strokeOpacity: .3,
      strokeWidth: 10
    });
 
    square.attr({
      fill: "lightblue",
      stroke: "lightblue",
      strokeOpacity: .3,
      strokeWidth: 10
    });
 
    ellipse.attr({
      fill: "mediumturquoise",
      stroke: "mediumturquoise",
      strokeOpacity: .2,
      strokeWidth: 10
    });

这样我们的图形看起来比前面就更漂亮来些！

DEMO

分组操作图形

Snap为我们提供来分组操作group这一强大的功能，顾名思义，使用它我们可以把多个图形编成一组，使之变为一个图形。

先来创建两个图形，然后把它们编成一组。再来操作它们的属性。

    var circle_1 = s.circle(200, 200, 140);
    var circle_2 = s.circle(150, 200, 140);
 
    var circles = s.group(circle_1, circle_2);
 
    circles.attr({
      fill: "coral",
      fillOpacity: .6
    });

结果如下：

DEMO

在文章开始部分，我们说过会做一个眼睛的例子。需要用到svg中的蒙板属性mask。首先我们来创建一个椭圆并放置在上组图形的中间。

    var circle_1 = s.circle(300, 200, 140);
    var circle_2 = s.circle(250, 200, 140);
 
    var circles = s.group(circle_1, circle_2);
 
    var ellipse = s.ellipse(275, 220, 170, 90);
 
    circles.attr({
      fill: "coral",
      fillOpacity: .6,
    });
 
    ellipse.attr({
      opacity: .4
    });

DEMO

现在我们就以椭圆为蒙板来对图形进行剪裁，并且对椭圆填充为白色：

    circles.attr({
      fill: "coral",
      fillOpacity: .6,
      mask: ellipse
    })
 
    ellipse.attr({
      fill: "#fff",
      opacity: .8
    });

DEMO

让图形动起来

眼睛的形状就完成来，不过要是让眼睛动起来会更加有趣一点。使用Snap中的animate方法来实现动画效果非常方便。要使眼睛动起来，我们只需要让椭圆的垂直的半径从1增加到90就可以了。

先来创建一个名为blink的动画函数：

    function blink(){
        ellipse.animate({ry:1)},220,function(){
            ellipse.animate({ry:90},300);
            )}
    };

现在我们可以使用setInterval函数来循环执行blink动画，这样我们的眼睛就会不停的运动。

    setInterval(blink,3000);

最后完整的代码如下所示：

    var circle_1 = s.circle(300, 200, 140);
    var circle_2 = s.circle(250, 200, 140);
 
    // 编组图形
 
    var circles = s.group(circle_1, circle_2);
 
    var ellipse = s.ellipse(275, 220, 170, 90);
 
    // 填充颜色并使用蒙版
    
    circles.attr({
      fill: "coral",
      fillOpacity: .6,
      mask: ellipse
    });
 
    ellipse.attr({
      fill: "#fff",
      opacity: .8
    });
 
    // 眨眼动画让椭圆的垂直的半径从1增加到90
 
    function blink(){
      ellipse.animate({ry:1}, 220, function(){
    ellipse.animate({ry: 90}, 300);
      });
    };
 
    // 每三秒执行一次动画
 
    setInterval(blink, 3000);

效果如下：

DEMO

浏览器支持

要注意的使，Snap只支持IE9+,chrome,safari,firefox以及opera等现代浏览器。

开源

Snap.svg使开源的，意味着我们可以免费使用它来开发。

参考文章：

How to Manipulate and Animate SVG With Snap.svg

GPU云服务器 云服务器 入门知识 入门基础知识 服务器知识入门 nlp入门知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80439.html

相关文章

  • SVG

    摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。 使用SVG + CSS实现动态霓虹灯文字效果 早上无意间进入一个网站，看到他们的LOGO效果略屌，如图： 刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

    104828720 评论0 收藏0

  • 使用 Snap.svg 来实现一个具有 morphing 动画效果的按钮动效

    摘要：今天这篇文章来讲一个动画在界面上一个具体的运用即具有动画效果的播放按钮。在后面实现动画效果的时候要用到。下面来看下实现动画效果核心代码所谓动画效果，就是从一个形状变到另一个形状。由于使用方法，它们之间的变化会有一个动画效果即动画效果。 前面有专门写过一篇morphing动画基础知识的文章，不了解的话可以去这里看看。 今天这篇文章来讲一个morphing动画在UI界面上一个具体的运用即具...

    jubincn 评论0 收藏0

  • SVG基础教程(超级详细)

    摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。 一、内置图形: rect(矩形) circle(圆) ellipse(椭圆) line(直线) polyline(折线) polygon(多边形) path(路径) 二、内置图形的html属性或(css样...

    张宪坤 评论0 收藏0

  • svg系列：1.svg基础知识 & 不一样的svg动画世界

    摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

    wwolf 评论0 收藏0

  • svg系列：1.svg基础知识 & 不一样的svg动画世界

    摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

    DirtyMind 评论0 收藏0

发表评论

登陆后可评论

0条评论

fantix

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<