菜单

《JavaScript 编程实战》阅读笔记(一)

2019年4月20日 - 金沙前端

2. Paper

那有个别是画画相关的方法集,那是差不多各样动画框架都有个别有些,类似于createjs的Graphics。

SVG
有6种骨干图形:矩形、圆形
、椭圆、线条、折线、多边形。还有其它一种:路线(path),path
是最复杂的1种绘图格局,它能够绘制复杂的图形——当然6种基本图形也何足道哉。而至于基本图像与
path 之间的转变,可以参见本站的其余一篇文章:闲谈 SVG
基本造型转换那么些事。

图片 1

Paper
方法集主要能够绘制陆种中坚图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画八个圆 var svg = Snap(‘#svg’); svg.paper.circle({ cx: 100, cy:
100, r: 50, fill: ‘#f00’ });   // 创造一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap(‘#svg’);
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: ‘#f00’
});
 
// 创建一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

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

  1. 能够由此 Canvas 画三个矩形并让它动起来,具体代码如下。
    <canvas id=”my_canvas” width=”200″
    height=”150″></canvas>

     <script>
    
         var canvas = document.getElementById("my_canvas");
         var my_context = canvas.getContext("2d");
         my_context.fillStyle = "#f00";
         my_context.fillRect(0, 10, 50, 50);
    
         var posX = 0;
         var drawInterval = setInterval(function () {
    
             posX++;
             if (posX > 150) {
                 posX = 0;
             }
    
             my_context.clearRect(0, 0, 200, 150);
             my_context.fillRect(posX, 10, 50, 50);
    
         }, 1000 / 60);
     </script>
    

前端必备神器 Snap.svg 弹动作效果果,前端snap.svg

有人说不会 SVG 的前端开垦者不叫开荒者,而叫爱好者。前端不光是 Angularjs
了,那时候再不学 SVG 就晚了!(即使你只会 jQuery
就当自家没说。。。)那里小编就给大家享用2个明日在别处看到的2个了不起上的
SVG 效果,右边菜单弹出来会动动掸的说,链接点那里。

即刻自己就震动了,明日抽空搞清了源码,然后下边是自己潜研后做出来的
德姆o,固然非常粗大糙,但依然很时髦的以为吗。上边笔者就以此 DEMO
跟大家大饱眼福一下。

此案例须求某个 PS 只怕 AI
中路线的学识,上面是本例中运涉及到的知识点和工具:

snap.svg
svg path data
Adobe Illustrator
animation timing

先交给原理:依照时间改换坐标。如下图所示,本例其实就是 A、B、C
三条线之间的转变,A 是发端状态,点击后透过 B 最后形成C。在那之中有四遍动画,分别是 A-B 和 B-C,而这一回动画的 timing function
和时间都以例外的。

图片 2

第一步:画草稿

做动画前率先步便是画草稿(如上海体育场地),小编一般用 AI 来画,因为 AI
能够确切的垄断(monopoly)成分尺寸和职责,而且其原理和 SVG 是同样的。

下一场有的同学就会说,“老湿,是否要封存为 SVG 格式的,然后做修改啊?”

画草稿图的目标只是为着便于的规定每一种点的坐标,本身算太难为了,而且还轻巧失误。除却AI 未有其他成效。AI 生成的 SVG
文件在此例中根本不能够拿来用,因为里面包车型地铁路劲点太混乱了,上边会详说。

怎么?你不会用 AI ?

假若您还想在前者那条路上走下来的话,那未来就去学吧。(在那里小编想嘲讽一下,PS
是用来拍卖点阵图片的,根本不适合拿来做设计图。比较之下 AI
才是做这一个的,google 给出的 metrial design 布局模板全都是 AI
格式的。但国内不管是怎样公司,用 PS 都就像相当的慢意的模范,不知情为什么。)

其次步:总括路线

这一步就相比复杂了,上边说过了,这么些动画其实正是坐标之间转换。而从四边形到圆弧之间的更动不光是坐标位移而已,还有曲线弧度的转换。上边的规划图直接保存为
SVG 后代码如下:

复制代码 代码如下:

<?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=”图层_1″ xmlns=””
xmlns:xlink=”” x=”0px” y=”0px”
     viewBox=”0 0 175 175″ enable-background=”new 0 0 175 175″
xml:space=”preserve”>
<!– 路径 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”/>
<!– 路径 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”/>
<!– 路径 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>

咱俩只必要关切路线的 d 属性就行了,能够见见,AB
八个路子之间依旧得以相互转变的,但他俩和 C
路线(有弧线的不二秘籍)之间就无法转换了。他们所用到的绘图命令都不可同日而语,AB
七个都是矩形,绘图时用到的都是h、v,也正是横纵之间的位移,画出来的都以横竖线。而 C 路劲用到的都是s、c那一个命令,画出来的都是曲线。所以 AI 给出去的图大家不能够用,要和睦依照svg path data 重新绘制3次。

上边作者参考 AI 设计图再一次绘制的三条门路:

复制代码 代码如下:

<!– 路径 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”>
<!– 路径 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”>
<!– 路径 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”>

有过设计基础的同窗应该知道上面代码的意思,便是将具备锚点转变到平滑,然后再退换手柄的地方。形状没变,即使代码多了众多,不过把绘制命令都改为了
S ,那样三条路子就只有数值之间的不一样了。而动画片的进程正是数值之间的调换。

第三步:Timing

这一步正是设定动画的时间点和 timing function 。时间点比较好说,A-B 和
B-C 作者设置的各自是300微秒和400皮秒。

timing function 就是大家在做 CSS 动画中央银行使到的
animation-timing-function 属性,相比宽泛的有
ease、linear、easein,大家也得以用贝塞尔曲线自个儿定制。但是CSS的 timing
function 比较简单,只可以定义一条均匀的曲线,A-B 转变用到的 ease-out,但是B-C 为了反映弹动的效果,所用到的 timing-function
就不是一条均匀曲线这么轻松了。

图片 3

上面列出了一些相比常用的 timing-function ,当中大致分为
ease、bounce、elastic 3类。ease
一般作为减速或许加快动作效果。bounce就像他的曲线图同样,一般作为小球落地那种动作效果。而
elastic
一般用在如琴弦同样的动作效果上,那种动作效果二个特点正是有一些偏移到负坐标上了,而
B-C 用到的就是以此,如下图。

图片 4

基于上边已经画出来的门路,结合动画,代码就出来了:

复制代码 代码如下:

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 是 Adobe 出品管理 SVG 的库,mina是 Snap
自带的1个卡通工具集,个中有过多预设的动画。

结语

用 Snap 制作的动画可以相配 IE九,而且速度也不易,自定义功能很强劲。相信不久的后天还会有更多狂拽炫丽屌炸天的动作效果会用
Snap 制作出来。

借使想学习动效的话,能够先看一下 TED 一集关于动作效果的视频

Snap.svg 弹动效果,前端snap.svg
有人说不会 SVG 的前端开荒者不叫开拓者,而叫爱好者。前端不光是 Angularjs
了,那时候再不学…

二. 动画片的性情

在 Snap 中,可作为动画的品质有怎么着呢?小编差不多分为了几类:

样例:颜色调换动画,预览地址点此

JavaScript

// 动画样例,颜色变化动画 var svg = Snap(‘#svg’); var circle =
svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
// 动画样例,颜色变化动画
var svg = Snap(‘#svg’);
var circle = svg.paper.circle({cx: 100, cy: 100, r: 50, fill: ‘#f00’});
circle.animate({fill: ‘#00f’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

图片 5

做动画前首先步正是画草稿(如上航海用教室),小编一般用 AI 来画,因为 AI
能够确切的垄断(monopoly)成分尺寸和岗位,而且其原理和 SVG 是平等的。

率先创造出叁个宽 200, 高 150 的画布,利用 JS(0,10)
地点画出2个宽 50, 高 50 的填充矩形,然后选拔 setInterval()
函数设置每隔 1/60
秒清空画布上的具备内容仁同一视新绘制矩形,因为此处时间的单位是 ms ,所以
1/60 秒写成 1000/60

行使 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

原著出处: 坑坑洼洼实验室   

图片 6

`90-#393-#396` ,`90`
是渐变梯度,接下来的两个参数是颜色码。很多时候我们可能不知道怎么选择颜色,可以去
[Web
安全色](https://link.jianshu.com?t=http://www.bootcss.com/p/websafecolors/)
挑选自己喜欢的颜色。我们还可以给我们的图形加上边框,并设置边框的样式。  
rect.attr({  
'gradient': '90-\#393-\#396',  
'stroke-width': 20,  
'stroke': '\#3C6',  
'stroke-linejoin': 'round'

     });

一、Snap.svg是什么

从重大作用上说,Snap.svg.js 是一个操纵 SVG 节点/制作 SVG
动画的框架,轻巧点清楚能够看上边文字:

Snap.svg 是三个得以使您垄断(monopoly) SVG 财富和 jQuery 操作 DOM 一样轻易的类库

——译自官方网站

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ )
来做相比较最合适不过,相当大概笔者也是参照了 JQ 的 API
设计,那么它们的一般程度有多高啊?请看上边包车型大巴比较表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap
的概念里,可操作的最外层的节点是 svg ,svg
节点的抉择、事件绑定都亟待在那一个上下文里做到。

在上头的对待图能够看到多数 JQ
的影子,无论是选拔器、事件绑定、节点操作等等,都是老大的接近 JQ ,有 JQ
基础的同室基本能够半天左右 Snap 的一体 API。

snap.svg
svg path data
Adobe Illustrator
animation timing

demo02.png

3、用 Snap 制作动画

Snap 是 Adobe 出品管理 SVG 的库,mina是 Snap
自带的1个卡通工具集,在那之中有这个预设的动画片。

  1. Raphaël
    对动画的支撑也不行无敌,比方说大家能够使用上边那一行代码,让大家地点绘制的图样旋转
    360 度。
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’);
    这里,r 实际上正是 rotate 的缩写 ,<>
    表示淡入淡出的动画效果。当然还有其余成效,比如说 < 是淡入,>
    是淡出。在 CSS 中设置过 transform 的人都通晓,既然有 rotate
    ,那必将得有 scale,translate
    吧?是的,都有,他们得以结合起来使用,就像上面那样。
    rect.animate({transform: ‘r 360 t 100,100 s 0.2’}, 3000,
    ‘<>’);
    animate()
    函数中大家还足以设置回调函数,在率先个卡通效果实施落成之后,继续下二个动画片效果。
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’, function () {
    rect.animate({transform: ‘s 0.5’}, 3000, ‘<>’);
    });
    我们或然不想让3个成分自动就接触二个动画效果,一般情形下,唯有当鼠标点击也许鼠标超出成分的时候,才触发效果,当然那一点也是足以兑现的。上边大家就为咱们的因素设置鼠标点击事件。
    rect.node.onclick = function () {
    rect.animate({transform: ‘r 360’}, 3000, ‘<>’, function () {
    rect.animate({transform: ‘s 0.5’}, 3000, ‘<>’);
    });
    }
    也足以将 onclick 改为 onmouseover, onmousedown,onmouseup 等。

2. matrix动画

Snap 的 matrix 动画包蕴各位熟知的 translate/scale/rotate/skew
动画,原理和 CSS 的 transform 也大致一模同样。

一)
matrix轻便位活动画,预览地址点此:

图片 7

JavaScript

// 不难位活动画 var rect = svg.paper.rect({x: 拾0, y: 100, width: 50,
height: 30, fill: ‘#f00’}); var anim = function() { Snap.animate(0,
150, function(val) { var m = new Snap.Matrix(); m.translate(val, 0); //
translate位移API rect.transform(m); // 在rect节点应用matrix }, 一千,
mina.easeout(), function() { console.log(‘animation end’);
setTimeout(anim, 300); }); } anim();

1
2
3
4
5
6
7
8
9
10
11
12
13
// 简单位移动画
var rect = svg.paper.rect({x: 100, y: 100, width: 50, height: 30, fill: ‘#f00’});
var anim = function() {
Snap.animate(0, 150, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0); // translate位移API
rect.transform(m); // 在rect节点应用matrix
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
setTimeout(anim, 300);
});
}
anim();

2)
matrix位移、旋转复合动画,预览地址点此:
图片 8

JavaScript

// 位移、旋转复合动画 var rect = svg.paper.rect({x: 十, y: 十0, width:
50, height: 30, fill: ‘#f00’}); var g = svg.paper.group(rect); //
创立了三个分组节点g作为位移动画节点 var anim_rotate = function() { //
节点旋转部分 Snap.animate(0, 250, function(val) { var m = new
Snap.Matrix(); m.rotate((val/250)*360, 拾+二5, 100+1五); //
注意,前边两位数是旋转中央点,属于相对坐标,svg里节点的转变中央都以纯属坐标,和CSS的transform-origin取值不太同样rect.transform(m); }, 500, mina.easeout(), function() {
console.log(‘animation end’); anim_rotate(); }); }; anim_rotate(); var
anim_move = function() { // 节点位移部分 Snap.animate(0, 250,
function(val) { var m = new Snap.Matrix(); m.translate(val, 0);
g.transform(m); }, 3000, mina.easeout(), function() {
console.log(‘animation end’); anim_move(); }); }; anim_move();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 位移、旋转复合动画
var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: ‘#f00’});
var g = svg.paper.group(rect); // 创建了一个分组节点g作为位移动画节点
var anim_rotate = function() { // 节点旋转部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.rotate((val/250)*360, 10+25, 100+15); // 注意,后面两位数是旋转中心点,属于绝对坐标,svg里节点的变换中心都是绝对坐标,和CSS的transform-origin取值不太一样
rect.transform(m);
}, 500, mina.easeout(), function() {
console.log(‘animation end’);
anim_rotate();
});
};
anim_rotate();
var anim_move = function() { // 节点位移部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0);
g.transform(m);
}, 2000, mina.easeout(), function() {
console.log(‘animation end’);
anim_move();
});
};
anim_move();

地点七个卡通用 CSS 的方式兑今世码如下:

CSS

@keyframes demo陆 { 百分之百 { transform: translate三d(250px, 0, 0); } } //
简单位活动画CSS版 .demo6 { animation: demo陆 2s linear infinite both; }  
@keyframes demo七_rotate { 100% { transform: rotate(360deg); } }
@keyframes demo7_move { 百分之百 { transform: translate3d(250px, 0, 0); } }
// 旋转、位移符合动画CSS版 .demo7 { animation: demo柒_move 2s linear
infinite both; rect { transform-origin: 35px 115px; animation:
demo7_rotate .5s linear infinite both; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@keyframes demo6 {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 简单位移动画CSS版
.demo6 {
animation: demo6 2s linear infinite both;
}
 
@keyframes demo7_rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes demo7_move {
100% {
transform: translate3d(250px, 0, 0);
}
}
// 旋转、位移符合动画CSS版
.demo7 {
animation: demo7_move 2s linear infinite both;
rect {
transform-origin: 35px 115px;
animation: demo7_rotate .5s linear infinite both;
}
}

总结位移动画CSS版预览点此;旋转、位移符合动画CSS版预览点此。

下边作者参考 AI 设计图再一次绘制的3条路线:

  1. 咱俩大概会想要在大家的网页中使用 SVG 图形, 但是 SVG API
    很有深度,可是并非操心,我们得以运用 Raphaël,那是三个
    SVG JavaScript 库,大家得以使用这一个库轻便地绘制 SVG 图形,可以在
    Raphaël
    下载该库。

  2. 上边来探望利用 Raphael
    怎么着绘制图形,首先声美赞臣个用于作画的包装器
    <div id=”my_svg”></div>
    绘制2个矩形并设置其填写颜色
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var rect = paper.rect(0, 0, 600, 400);
    rect.attr(“fill”, “#FFF”);
    绘图3个圆形
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var circle = paper.circle(300, 200, 120);
    circle.attr(“fill”, “#F00”);
    circle.attr(“stroke-width”, 0);
    制图3个三角形。
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var triangle = paper.path(‘M100,100 L100,150,L150,150 Z’);
    看得出,那里是选取 path 路线绘制的,那里的 M 相当于
    moveTo()L 相当于 lineTo(),而结尾的 Z 表示关闭路线。

  3. Raphaël 还为 SVG
    提供了各样样式选项,下边就以此画2个带渐变的矩形。
    var paper = Raphael(document.getElementById(“my_svg”), 600, 400);
    var rect = paper.rect(0, 0, 480, 320);
    rect.attr({
    ‘gradient’: ’90-#393-#396′,
    ‘stroke-width’: 0
    });
    功能图如下

    demo01.png

肆、path & matrix 动画详解

其一小节爱戴会讲上边第贰小节提到的 path、matrix 相关动画格局,以及和 CSS
的 transform 动画的异议。

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”
];

6、参考资料

Snap.svg官网

Web动画API教程5:可爱的运动路线(Motion
Path)

张鑫旭:Snap.svg
API粤语文书档案兼demo实例页面

1 赞 1 收藏
评论

图片 9

下面列出了一些相比较常用的 timing-function ,当中山高校约分为
ease、bounce、elastic 三类。ease
一般作为减速只怕加快动作效果。bounce就像他的曲线图同样,一般作为小球落地这种动作效果。而
elastic
一般用在如琴弦一样的动作效果上,这种动作效果1个特征正是有一些偏移到负坐标上了,而
B-C 用到的正是以此,如下图。

在行使提议地点:

小飞机动画在 chrome 的渲染层边界图:
图片 10

玉石白边为 svg 的边界(即渲染层,为了便利查看 svg 节点经过了
transform:rotateY(30deg) ;洋蓟绿为重绘部分。能够见到 svg
里的动画成分只会唤起重绘,而里边的节点用 translateZ
也并不会新开一个渲染层。

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

1. Element

以此片段是节点操作相关的方法集,也是该类库最基础的片段。

JavaScript

// 采用节点 var svg = Snap(‘#svg’); svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

1
2
3
4
// 选择节点
var svg = Snap(‘#svg’);
svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

JavaScript

// 事件绑定 var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() {
// do something
});

越来越多措施请参见文后 API 资料。

path.attr({
    fill:”#2E70FF”
});

三. Snap 工具方法

Snap下有为数不少实用工具,举个例子Snap.ajax、Snap.format模板、颜色格式转变和插件方法等。

JavaScript

// 增添Snap,为其增进插件方法 Snap.plugin(function (Snap, Element,
Paper, global, Fragment) { Snap.newmethod = function () {};
Element.prototype.newmethod = function () {}; Paper.prototype.newmethod
= function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

下一场有的同学就会说,“老湿,是或不是要封存为 SVG 格式的,然后做修改啊?”

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图