平滑动画属性一次更改为~3000 Raphael对象 [英] Smoothly animate attribute changes to ~3000 Raphael objects at once

问题描述

更新的问题
我已将此更新为更简洁..：

UPDATED QUESTION I've updated this to be a little more succinct..:

在这个小提琴中：< a href =http://jsfiddle.net/pX2Xb/4/ =nofollow> http://jsfiddle.net/pX2Xb/4/ 我有一些raphael代码可以绘制3000个圆圈页。然后，它会尝试在10秒内一次动画所有圆圈（更改填充颜色），这会产生笨重的视觉动画。将圆圈数更改为20以查看更平滑的动画以进行比较。

In this fiddle: http://jsfiddle.net/pX2Xb/4/ I have some raphael code that draws 3000 circles to a page. It then attempts to animate all circles at once (changes fill colour) over 10 seconds, which results in a clunky visual animation. Change the number of circles to 20 to see a much smoother animation for comparison.

我的问题是（a）我是否可以更新3000个元素更顺畅和（b）如果是这样，那么代码看起来是什么样的？

My questions are (a) is it possible for me to make the update to the 3000 elements smoother and (b) if so, what does the code to do that look like?

一些注意事项：

• 我愿意接受一小段时间的打击如果有一些方法可以优化这个，但是，例如，我希望所有圈至少在1.5倍更新，无论动画时间设置为何。所以，如果动画是10秒，那么所有的圆圈都应该在15中改变。


• 目前3000个元素大致是我的极限，所以我很乐意为它工作:)在说，如果解决方案可以有效地处理更多，对于一般情况，这真的很棒。

• I'm willing to take a small timing hit if there's some way to optimise around this, but, for example, I would like all circles to at least have updated in 1.5x whatever the animation time is set to. So, if animation is 10 seconds, all circles should have changed in 15.
• 3000 elements is roughly my limit at the moment, so I'd be happy with it working for that :) In saying that, if a solution can effectively handle more than that, for a general case, that'd be really great.

旧的详细信息，如果有帮助

我正在创建一个美国县的大型地图，其中有超过3000个;我正在使用此Wikipedia svg文件来获取相关的SVG路径来创建地图，并使用 RaphaelJs 渲染地图。

I'm creating a large map of US counties, of which there are over 3000; I'm using this Wikipedia svg file to get the relevant SVG paths to create the map, and am rendering the map using RaphaelJs.

相应地，我最终得到了超过3000条类似于以下内容的陈述：

Accordingly, I end up with over 3000 statements similar to the following:

    var cc_02130 = rsr.path("M 140.66674,.... 320.11635"); // county path
    cc_02130.attr({id: '02130',.. .."marker-start": 'none'}); // init attrs

我也在创建 Paper.set（） 持有所有这些元素的对象：

I'm also creating a Paper.set() object to hold all of these elements:

var myset = paper.set([cc_56039, cc_56040, cc_56041 ...])

忘记这里实际生成的文件非常大，我非常感谢如何对上面详述的对象量进行更改的建议，这是快速且合理的CPU智能（可能是一个很大的问题）。

Forgetting for a moment that the file actually generated here is quite large, I would very much appreciate suggestions of how I can apply changes to the volume of objects detailed above, that is both quick and reasonably ok CPU wise (possible a big ask).

我绝对愿意改变我的代码/对象的结构，只要我可以单独更改特定县的属性。
例如，我希望能够在一秒或两秒内为每个路径内容应用不同的颜色（对于所有3000 +）。

I'm definitely open to changing the structure of my code/objects, as long as I can individually change attributes of specific counties. For example, I would like to be able to apply a different colour to each path content in a second or two (for all 3000+).

挑战我面临的不是如何应用颜色变化，动画等，而是如何快速有效地完成这项工作。现在，如果我循环并对3000多个对象进行更改，我的机器会对我尖叫;作为替代方案，我使用 setTimeout 将更改分解为更小的块（可能一次10个，延迟40毫秒）。超过3000项，这变得非常慢，仍然使用大量的CPU。

The challenge I'm facing is not how to apply the colour changes, animations, etc, but how to do this quickly and efficiently. Right now, my machine screams at me if I loop and apply changes over the 3000+ objects; as an alternative, I was using setTimeout to break the changes out into smaller chunks (maybe 10 at a go, with a 40 ms delay). Over 3000 items, this becomes quite slow, and still uses a lot of CPU.

谢谢，
oli

Thanks, oli

推荐答案

我不知道为什么，但 D3.js 是一次动画大量元素时效率更高。您可以通过创建一个Raphael函数使它们无缝地工作，该函数接收一个集合并返回您想要设置动画的html对象：

I don't know why, but D3.js is more efficient when animating a large number of elements at once. You can make them both work seamlessly by creating a Raphael function that receives a set and returns the html objects you want to animate:

Raphael.st.nodes = function() {
  var elements = [];
  this.forEach(function (i) {
     elements.push(i.node);
  });
  return elements;
}

然后你让d3从那里拿走

And then you let d3 take it from there

//circleholder is a Raphael set
elements = circleholder.nodes()
d3.selectAll(elements)
  .transition()
  .attr("fill", function(d,i){return colours[randomNum(14)]})
  .duration(ANIMATION_DELAY)

以下是jsfiddle： http：/ /jsfiddle.net/mFecs/

Here is the jsfiddle: http://jsfiddle.net/mFecs/

这篇关于平滑动画属性一次更改为~3000 Raphael对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！