Question

我在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的性能/速度/ fps？

2）关于d3.js将fps更好吗？ 10,000多个动画圈怎么样？

3）是否有任何解决方案可以沿着具有良好fps的路径显示10,000多个动画圆圈？

Answer 1

可能的瓶颈是DOM操作（添加/删除节点，编辑属性等），因此d3会遇到同样的问题。如果要绘制很多东西，使用canvas而不是SVG（尤其是使用WebGL上下文）会快得多。

在坚持使用SVG时你可以加快速度：

重用DOM节点而不是删除它们并添加新节点
使用CSS提前定义动画。

Answer 2

另一种沿路径制作动画的方法是使用stroke-dasharray，stroke-dashoffset和stroke-linecap:round。任何零长度破折号都将呈现为圆形。然后，您可以使用stroke-dashoffset沿路径移动圆圈。这仅适用于单个圆半径，通过stroke-width控制。

这种方法的优点是你可以消除一堆圆形元素。

D3 / Raphael js用慢速fps绘制1000+动画圈

2 个答案: