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

发布时间:2019-04-19  栏目:计算机教程  评论:0 Comments

使用 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

原文出处: 凹凸实验室   

美高梅娱乐场网站 1

有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs
了,这时候再不学 SVG 就晚了!(如果你只会 jQuery
就当我没说。。。)这里我就给大家分享一个前几天在别处看到的一个高大上的
SVG 效果,左边菜单弹出来会动动弹的说,链接点这里。

一、Snap.svg是什么

从主要功能上说,Snap.svg.js 是一个操纵 SVG 节点/制作 SVG
动画的框架,简单点理解可以看下面文字:

Snap.svg 是一个可以使你操纵 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。

当时我就震惊了,今天抽空搞清了源码,然后下面是我潜心研究后做出来的
Demo,虽然比较粗糙,但还是很洋气的感觉呢。下面我就这个 DEMO
跟大家分享一下。

二、Snap 的代码结构

美高梅娱乐场网站 2

笔者根据 Snap 的 API
制作了上面的图表,并且简单标注了注释方便大家理解,可以重点关注一下
Element 和 Paper 这两个类。

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

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 资料。

本案例需要有些 PS 或者 AI
中路径的知识,下面是本例中运涉及到的知识点和工具:

2. Paper

这部分是画图相关的方法集,这是几乎每个动画框架都有的部分,类似于createjsGraphics

SVG
有6种基本图形:矩形、圆形
、椭圆、线条、折线、多边形。还有另外一种:路径(path),path
是最复杂的一种绘图方式,它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与
path 之间的转换,可以参考本站的另外一篇文章:聊聊 SVG
基本形状转换那些事

美高梅娱乐场网站 3

Paper
方法集主要可以绘制6种基本图形(节点),以及文本(节点)、图片(节点)、渐变等。

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);

snap.svg
svg path data
Adobe Illustrator
animation timing

3. 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 () {};
});

先给出原理:根据时间变换坐标。如下图所示,本例其实就是 A、B、C
三条线之间的转换,A 是初始状态,点击后经过 B 最后形成
C。其中有两次动画,分别是 A-B 和 B-C,而这两次动画的 timing function
和时间都是不同的。

三、用 Snap 制作动画

美高梅娱乐场网站 4

1. 制作动画的方法

Snap 的做动画主要有两种方式:

  • 使用 Element 里的 animate 方法,Element.animate(attrs, duration,
    [美高梅娱乐场网站,easing], [callback])
  • 使用 Snap 的静态方法,Snap.animate(from, to, setter, duration,
    [easing],
    [callback]),这种方法更通用也更强大,指定开始结束值,setter里面可以放置多个节点的动画。

样例:演示Element.animate方法的使用。预览地址点此

JavaScript

// 动画样例1 var svg = Snap(‘#svg’); svg.select(‘circle’).animate({r:
100}, 1000, mina.easeout(), function() { console.log(‘animation end’);
});   // 动画样例2 var svg = Snap(‘#svg’); var circle =
svg.select(‘circle’); var rect = svg.select(‘rect’); Snap.animate(0,
100, function(val) { circle.attr({r: val}); rect.attr({x: val}); },
1000, mina.easeout(), function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 动画样例1
var svg = Snap(‘#svg’);
svg.select(‘circle’).animate({r: 100}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
 
// 动画样例2
var svg = Snap(‘#svg’);
var circle = svg.select(‘circle’);
var rect = svg.select(‘rect’);
Snap.animate(0, 100, function(val) {
circle.attr({r: val});
rect.attr({x: val});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

美高梅娱乐场网站 5

第一步:画草稿

2. 动画的属性

在 Snap 中,可作为动画的属性有哪些呢?笔者大致分为了几类:

  • 简单数值类,如坐标、宽高、opacity、大部分 Paper API
    可配置的属性值,甚至滤镜相关的属性。如{x:100} -> {x:200},
    {width:0} -> {width:100}
  • path 相关动画,如d属性(变形动画)、描边动画、路径跟随动画
  • matrix 类,放大缩小、位移、旋转等,和 CSS 的 transform 类似
  • 颜色类,颜色变换动画,如 fill、stroke 属性,如{fill:’#f00’} ->
    {fill:’#f0f’}

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

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’);
});

美高梅娱乐场网站 6

做动画前第一步就是画草稿(如上图),我一般用 AI 来画,因为 AI
可以精确的控制元素尺寸和位置,而且其原理和 SVG 是一样的。

四、path & matrix 动画详解

这个小节重点会讲上面第2小节提到的 path、matrix 相关动画方式,以及和 CSS
的 transform 动画的异同。

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

1. path 动画

1). path 变形动画

这种类型的动画非常强大。上文已提到基本图形和 path
可以相互转换的,所以基本图形间的变形动画也是成立的。不仅如此,更复杂的
path 图形,比如波浪、房子、汽车、白云、小icon等,都是可以互相变形。

path 的d属性在 Snap
的解析规则里可以通过一系列的数学运算,动画中通过插值,达到最终态的d值,不过中间的插值计算我们无法干预。

JavaScript

// 开始态 var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() { // 终止态:曲线变直 // path.animate({d: ‘M1,100
L350,100’}, 1000, mina.easeout(), function() { // console.log(‘animation
end’); // }); // 终止态:心形 path.animate({d: ‘M114.500,58.500
C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483
111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580
220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500
C160.455,-5.800 122.344,58.262 114.500,58.500 Z’}, 1000, mina.easeout(),
function() { console.log(‘animation end’); }); }, 1000);

1
2
3
4
5
6
7
8
9
10
11
12
// 开始态
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′,stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
setTimeout(function() {
// 终止态:曲线变直
// path.animate({d: ‘M1,100 L350,100’}, 1000, mina.easeout(), function() {
// console.log(‘animation end’);
// });
// 终止态:心形
path.animate({d: ‘M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z’}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});
}, 1000);

样例:曲线变直线,预览地址点此

美高梅娱乐场网站 7

样例:曲线变心形,预览地址点此

美高梅娱乐场网站 8

画草稿图的目的只是为了方便的确定每个点的坐标,自己算太麻烦了,而且还容易出错。除此之外
AI 没有任何作用。AI 生成的 SVG
文件在此例中根本不能拿来用,因为其中的路劲点太混乱了,下面会详说。

2). path 描边动画

这种动画主要用的是 svg 的 stroke-dasharray、stroke-dashoffset
属性,这中动画方式在本站的另外一篇文章有详细介绍,这里不再赘述:三看
SVG Web 动效

样例:简单曲线描边动画

JavaScript

var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758
45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500
C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914
246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417
225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500
C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371
363.758,80.355 364.500,109.500′, stroke:’#f00’, fill:
‘rgba(0,0,0,0)’}); var length = Snap.path.getTotalLength(path);
path.attr({ ‘stroke-dashoffset’: length, ‘stroke-dasharray’: length //
用Snap的API计算复杂的path长度 }); Snap.animate(length, 0, function(val)
{ path.attr({ ‘stroke-dashoffset’: val }); }, 1000, mina.easeout(),
function() { console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
var path = svg.paper.path({d: ‘M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500′, stroke:’#f00’, fill: ‘rgba(0,0,0,0)’});
var length = Snap.path.getTotalLength(path);
path.attr({
‘stroke-dashoffset’: length,
‘stroke-dasharray’: length // 用Snap的API计算复杂的path长度
});
Snap.animate(length, 0, function(val) {
path.attr({
‘stroke-dashoffset’: val
});
}, 1000, mina.easeout(), function() {
console.log(‘animation end’);
});

美高梅娱乐场网站 9

或者用CSS实现:

CSS

@keyframes demo4 { 100% { stroke-dashoffset: 0 } } .demo4 { animation:
demo4 1s ease-out infinite both; }

1
2
3
4
5
6
7
8
@keyframes demo4 {
100% {
stroke-dashoffset: 0
}
}
.demo4 {
animation: demo4 1s ease-out infinite both;
}

样例:花纹描边。这是codepen上一个复杂的例子——复杂花纹的描边动画,预览地址点此

美高梅娱乐场网站 10

什么?你不会用 AI ?

3). path 路径跟随动画

这种动画是指一个 svg
节点(基本图形、文本、图片等)沿着轨迹移动的动画,主要适用于模拟交通工具航行轨迹、粒子散开轨迹等。

这种动画的关键之处在于要知道 path 的长度与坐标之间的对应关系,Snap
提供了可供获取path的长度以及根据长度获取位置坐标
API。结合上面的 Snap.animate 方法,路径跟随动画的制作会变得非常简单。

样例:跟随曲线运动的小飞机,预览地址点此

JavaScript

var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) { var point =
Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标 var m
= new Snap.Matrix(); m.translate(point.x, point.y);
m.rotate(point.alpha-90); //
使飞机总是朝着曲线方向。point.alpha:点的切线和水平线形成的夹角
plane.transform(m); }, 30000, mina.easeout(), function() {
console.log(‘animation end’); });

1
2
3
4
5
6
7
8
9
10
var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) {
var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标
var m = new Snap.Matrix();
m.translate(point.x, point.y);
m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha:点的切线和水平线形成的夹角
plane.transform(m);
}, 30000, mina.easeout(), function() {
console.log(‘animation end’);
});

美高梅娱乐场网站 11

样例:双12开场动画,这是笔者去年双12做的一个路径跟随动画效果,预览地址点此

美高梅娱乐场网站 12

另外,用新的 CSS 属性 motion-path
也可以实现类似效果,但目前支持程度堪忧,只有 PC 的 chrome 以及
Opera、最新的X5内核手机浏览器 支持情况较好。

CSS

@keyframes demo5 { 0% { motion-offset: 0; } 100% { motion-offset: 100%;
} } .demo5 { motion-path:
path(“M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17”);
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线 animation: demo5
10s linear infinite both; }

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes demo5 {
0% {
motion-offset: 0;
}
100% {
motion-offset: 100%;
}
}
.demo5 {
motion-path: path("M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17");
motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线
animation: demo5 10s linear infinite both;
}

预览地址点此(请在最新版
chrome、Opera 或最新的X5内核手机浏览器查看)

如果你还想在前端这条路上走下去的话,那现在就去学吧。(在这里我想吐槽一下,PS
是用来处理点阵图片的,根本不适合拿来做设计图。相比之下 AI
才是做这个的,google 给出的 metrial design 布局模板全都是 AI
格式的。但国内不管是什么企业,用 PS 都好像很开心的样子,不知道为什么。)

2. matrix动画

Snap 的 matrix 动画包含各位熟悉的 translate/scale/rotate/skew
动画,原理和 CSS 的 transform 也几乎一致。

1)
matrix简单位移动画,预览地址点此

美高梅娱乐场网站 13

JavaScript

// 简单位移动画 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();

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位移、旋转复合动画,预览地址点此
美高梅娱乐场网站 14

JavaScript

// 位移、旋转复合动画 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();

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 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; } }

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版预览点此

第二步:计算路径

五、几个兼容性说明及建议

这部分会说一下笔者在开发过程中遇到的一些兼容性问题以及使用建议。当然还会有更多的笔者没遇到的问题,欢迎各位看官多多评论交流,不吝赐教。

  • 总的来说,Snap 的 API 兼容性不错,官网声称兼容 IE9
    及以上、Safari、Chrome、Firefox、Opera
    ;而移动设备方面,经笔者测试
    iOS、安卓 X5
    内核、安卓原生浏览器
    兼容性都不错,文中的例子除了特殊说明外的都可以执行
  • 作用于 svg 节点的 CSS transform
    动画在安卓原生浏览器下兼容性不好, X5 则正常
  • iOS7 和 8 下 innerHTML 方法不能用于 svg 里
  • 安卓原生浏览器绘制 svg
    图形很可能会产生渲染模糊的现象(如下图),在 svg 里加上一个 text
    节点即可神奇的修复

美高梅娱乐场网站 15

这样的节点 <text>a</text> 即可修复模糊的问题,但不能
display:none 隐藏

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

在使用建议方面:

  • 一般来说,transform 动画可以优先使用 CSS
    的方式实现,但如果需要复杂的分段控制或者更好的兼容性,可以试试 Snap
    的 transform&matrix 方式
  • Snap 的有些动画需要大量计算,虽然 svg
    里的节点属于“绝对定位”,动画时一般不会引起重排(参考下图),但在移动设备上也要注意动画元素不宜过多。以
    image 动画为例, 经笔者测试,150×150 左右的图片动画节点控制在 10
    个左右基本能达到大部分机型的性能要求
  • 滤镜类属性在移动设备上不宜做动画

小飞机动画在 chrome 的渲染层边界图:
美高梅娱乐场网站 16

橙色边为 svg 的边界(即渲染层,为了便于查看 svg 节点经过了
transform:rotateY(30deg) ;绿色为重绘部分。可以看出 svg
里的动画元素只会引起重绘,而里面的节点用 translateZ
也并不会新开一个渲染层。

复制代码 代码如下:

六、参考资料

Snap.svg官网

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

张鑫旭:Snap.svg
API中文文档兼demo实例页面

1 赞 1 收藏
评论

美高梅娱乐场网站 17

<?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=”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”>
<!– 路径 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 重新绘制一遍。

下面我参照 AI 设计图重新绘制的三条路径:

复制代码 代码如下:

留下评论

网站地图xml地图