www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 请看下面的对比表

原标题:请看下面的对比表

浏览次数:98 时间:2019-11-28

动用 Snap.svg 制作动漫

2017/02/22 · HTML5 · SVG

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

图片 1

一、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。

二、Snap 的代码布局

图片 2

小编依照 Snap 的 API 制作了上边的图样,而且轻便注脚了批注方便我们通晓,可以主要关切一下 Element 和 Paper 那四个类。

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

2. Paper

那部分是画画相关的方法集,那是大约每种动相框架都有的有个别,相近于createjs的Graphics。

SVG 有6种中央图形:矩形、圆形 、椭圆、线条、折线、多边形。还应该有其余少年老成种:路线(path卡塔尔国,path 是最复杂的风流倜傥种绘图形式,它能够绘制复杂的图纸——当然6种基本图形也何足道哉。而至于中央图像与 path 之间的转变,能够参见本站的其余风流浪漫篇小说:闲谈 SVG 基本造型转变这个事。

图片 3

帕佩r 方法集首要能够绘制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);

3. Snap 工具方法

Snap下有广大实用工具,比如Snap.ajax、Snap.format模板、颜色格式调换和插件方法等。

JavaScript

// 增添Snap,为其丰盛插件方法 Snap.plugin(function (Snap, Element, Paper, global, Fragment卡塔尔(英语:State of Qatar) { Snap.newmethod = function (卡塔尔国 {}; Element.prototype.newmethod = function (卡塔尔国 {}; Paper.prototype.newmethod = function (卡塔尔(英语:State of Qatar) {}; }卡塔尔国;

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

三、用 Snap 制作动漫

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'卡塔尔(英语:State of Qatar); svg.select('circle'卡塔尔.animate({r: 100}, 1000, mina.easeout(卡塔尔(قطر‎, function(卡塔尔(英语:State of Qatar) { console.log('animation end'卡塔尔国; }卡塔尔(英语:State of Qatar);   // 动漫样例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');
});

图片 4

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

图片 5

四、path & matrix 动漫详细明白

本条小节重视会讲上边第2小节提到的 path、matrix 相关动漫方式,以至和 CSS 的 transform 动漫的争议。

1. path 动画

1卡塔尔(英语:State of Qatar). 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卡塔尔(英语:State of Qatar)'}卡塔尔(英语:State of Qatar); 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(卡塔尔(英语:State of Qatar), 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);

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

图片 6

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

图片 7

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卡塔尔(英语:State of Qatar); 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(卡塔尔(英语:State of Qatar), function(卡塔尔 { console.log('animation end'卡塔尔(英语:State of Qatar); }卡塔尔(英语:State of Qatar);

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

图片 8

或者用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上多个良莠不齐的例证——复杂花纹的描边动画,预览地址点此:

图片 9

3卡塔尔国. path 路径跟随动漫

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

这种动漫的第一之处在于要通晓 path 的尺寸与坐标之间的对应关系,Snap 提供了可供获取path的长度以及传闻长度获取地方坐标的 API。结合方面包车型客车 Snap.animate 方法,路径跟随动漫的构建会变得特别不难。

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

JavaScript

var length = Snap.path.getTotalLength(path卡塔尔(英语:State of Qatar); // 获取path的长度 Snap.animate(0, length, function(val卡塔尔(قطر‎ { var point = Snap.path.getPointAtLength(path, val卡塔尔; // 根据path长度变化获取坐标 var m = new Snap.Matrix(卡塔尔(英语:State of Qatar); m.translate(point.x, point.y卡塔尔国; m.rotate(point.阿尔法-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');
});

图片 10

样例:双12开场动漫,那是作者二零一八年双12做的一个门路跟随动画效果,预览地址点此:

图片 11

别的,用新的 CSS 属性 motion-path 也能够落成肖似功用,但近年来帮忙程度堪忧,独有 PC 的 chrome 以及Opera、最新的X5内核手提式有线电话机浏览器 扶植意况较好。

CSS

@keyframes demo5 { 0% { motion-offset: 0; } 百分之百 { 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"卡塔尔(英语:State of Qatar); 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内核手提式有线电话机浏览器查看)

2. matrix动画

Snap 的 matrix 动漫富含各位熟稔的 translate/scale/rotate/skew 动漫,原理和 CSS 的 transform 也差十分少肖似。

1)matrix容易位活动画,预览地址点此:

图片 12

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(卡塔尔(英语:State of Qatar) { console.log('animation end'卡塔尔(英语:State of Qatar); setTimeout(anim, 300卡塔尔(英语:State of Qatar); }卡塔尔; } 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位移、旋转复合动漫,预览地址点此:
图片 13

JavaScript

// 位移、旋转复合动画 var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: '#f00'}卡塔尔(英语:State of Qatar); var g = svg.paper.group(rect卡塔尔国; // 成立了叁个分组节点g作为位移动漫节点 var anim_rotate = function(卡塔尔(英语:State of Qatar) { // 节点旋转部分 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卡塔尔国; }, 2001, mina.easeout(卡塔尔, function(卡塔尔(英语:State of Qatar) { 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 { 百分之百 { transform: translate3d(250px, 0, 0卡塔尔(英语:State of Qatar); } } // 旋转、位移切合动漫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 节点就可以奇妙的修复

图片 14

如此的节点 <text>a</text> 就能够修复模糊的主题材料,但不能够display:none 蒙蔽

在运用提议地方:

  • 诚如的话,transform 动漫可以预先利用 CSS 的不二秘诀达成,但假若急需复杂的道岔调整也许越来越好的包容性,能够尝试 Snap 的 transform&matrix 方式
  • Snap 的略微动漫要求大量划算,即便 svg 里的节点归属“相对定位”,动漫时相仿不会唤起重排(仿效下图),但在移动装备上也要小心动漫成分不宜过多。以 image 动漫为例, 经作者测验,150×150 左右的图片动漫节点调控在 12个左右着力能达到规定的规范超过1/3机型的习性供给
  • 滤镜类属性在移动设备上不宜做动漫

小飞机动漫在 chrome 的渲染层边界图:
图片 15

淡青边为 svg 的分界(即渲染层,为了方便查看 svg 节点经过了 transform:rotateY(30deg卡塔尔 ;孔雀蓝为重绘部分。可以看来 svg 里的卡通片成分只会唤起重绘,而里边的节点用 translateZ 也并不会新开多个渲染层。

六、仿效资料

Snap.svg官网

Web动漫API教程5:可爱的位移路线(Motion Path卡塔尔

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

1 赞 1 收藏 评论

图片 16

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:请看下面的对比表

关键词: HTML5

上一篇:原文出处

下一篇:没有了