D3/Raphael js 绘制 1000+ 动画圆圈,fps 很慢
D3/Raphael js draws 1000+ animated circle with slow fps
我在 Raphael JS v2.1 上编写了脚本,它绘制了 1000 多个圆圈和许多路径。圆圈沿该路径设置动画,然后移除。在 ~100 圈时 fps 是 40。在 1000+ fps 时是 1-10。代码示例:
var r = Raphael("diagram", "100%", "100%");
setInterval(function () {
r.moveCircle(lines[Math.floor(Math.random() * 20)]);
}, 100);
Raphael.fn.moveCircle = function (path) {
var circle = this.circle(0, 0, 4).attr({fill: '#000'});
circle.animateAlong({
path: path,
duration: 1000
},
function() {
circle.remove();
});
};
Raphael.el.animateAlong = function (params, props, callback) {
var element = this,
paper = element.paper,
path = params.path,
rotate = params.rotate,
duration = params.duration,
easing = params.easing,
debug = params.debug,
isElem = typeof path !== 'string';
element.path =
isElem
? path
: paper.path(path);
element.pathLen = element.path.getTotalLength();
element.rotateWith = rotate;
element.path.attr({
stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
});
paper.customAttributes.along = function(v) {
var point = this.path.getPointAtLength(v * this.pathLen),
attrs = {
cx: point.x,
cy: point.y
};
this.rotateWith && (attrs.transform = 'r'+point.alpha);
return attrs;
};
if(props instanceof Function) {
callback = props;
props = null;
}
if(!props) {
props = {
along: 1
};
} else {
props.along = 1;
}
var startAlong = element.attr('along') || 0;
element.attr({along: startAlong}).animate(props, duration, easing, function() {
!isElem && element.path.remove();
callback && callback.call(element);
});
};
问题:
1) 是否可以在 Raphael JS 上改进 performance/speed/fps?
2) 在 d3.js 上 fps 会更好吗? 10,000 多个动画圈怎么样?
3) 是否有任何解决方案可以以良好的 fps 沿着路径可视化 10,000 多个动画圆圈?
可能的瓶颈是DOM操作(添加/删除节点、编辑属性等),所以d3也会有同样的问题。如果你有很多东西要画,使用 canvas 而不是 SVG(特别是使用 WebGL 上下文)会快得多。
在坚持使用 SVG 的同时可以加快速度的方法:
- 重复使用 DOM 个节点,而不是删除它们并添加新节点
- 使用CSS提前定义动画。
沿路径设置圆圈动画的另一种方法是使用 stroke-dasharray
、stroke-dashoffset
和 stroke-linecap:round
。任何零长度破折号都将呈现为圆形。然后,您可以使用 stroke-dashoffset
沿路径移动圆圈。这仅适用于单个圆半径,通过 stroke-width
.
控制
这种方法的好处是您可以消除一堆圆形元素。
我在 Raphael JS v2.1 上编写了脚本,它绘制了 1000 多个圆圈和许多路径。圆圈沿该路径设置动画,然后移除。在 ~100 圈时 fps 是 40。在 1000+ fps 时是 1-10。代码示例:
var r = Raphael("diagram", "100%", "100%");
setInterval(function () {
r.moveCircle(lines[Math.floor(Math.random() * 20)]);
}, 100);
Raphael.fn.moveCircle = function (path) {
var circle = this.circle(0, 0, 4).attr({fill: '#000'});
circle.animateAlong({
path: path,
duration: 1000
},
function() {
circle.remove();
});
};
Raphael.el.animateAlong = function (params, props, callback) {
var element = this,
paper = element.paper,
path = params.path,
rotate = params.rotate,
duration = params.duration,
easing = params.easing,
debug = params.debug,
isElem = typeof path !== 'string';
element.path =
isElem
? path
: paper.path(path);
element.pathLen = element.path.getTotalLength();
element.rotateWith = rotate;
element.path.attr({
stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
});
paper.customAttributes.along = function(v) {
var point = this.path.getPointAtLength(v * this.pathLen),
attrs = {
cx: point.x,
cy: point.y
};
this.rotateWith && (attrs.transform = 'r'+point.alpha);
return attrs;
};
if(props instanceof Function) {
callback = props;
props = null;
}
if(!props) {
props = {
along: 1
};
} else {
props.along = 1;
}
var startAlong = element.attr('along') || 0;
element.attr({along: startAlong}).animate(props, duration, easing, function() {
!isElem && element.path.remove();
callback && callback.call(element);
});
};
问题:
1) 是否可以在 Raphael JS 上改进 performance/speed/fps?
2) 在 d3.js 上 fps 会更好吗? 10,000 多个动画圈怎么样?
3) 是否有任何解决方案可以以良好的 fps 沿着路径可视化 10,000 多个动画圆圈?
可能的瓶颈是DOM操作(添加/删除节点、编辑属性等),所以d3也会有同样的问题。如果你有很多东西要画,使用 canvas 而不是 SVG(特别是使用 WebGL 上下文)会快得多。
在坚持使用 SVG 的同时可以加快速度的方法:
- 重复使用 DOM 个节点,而不是删除它们并添加新节点
- 使用CSS提前定义动画。
沿路径设置圆圈动画的另一种方法是使用 stroke-dasharray
、stroke-dashoffset
和 stroke-linecap:round
。任何零长度破折号都将呈现为圆形。然后,您可以使用 stroke-dashoffset
沿路径移动圆圈。这仅适用于单个圆半径,通过 stroke-width
.
这种方法的好处是您可以消除一堆圆形元素。