一次平滑地对约 3000 个 Raphael 对象进行属性更改动画

Question

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

在这个小提琴中： http://jsfiddle.net/ pX2Xb/4/ 我有一些 raphael 代码，可以在页面上绘制 3000 个圆圈。然后，它会尝试在 10 秒内一次为所有圆圈设置动画（更改填充颜色），这会导致视觉动画显得笨拙。将圆圈数更改为 20，可以看到更流畅的动画进行比较。

我的问题是 (a) 我是否可以使 3000 个元素的更新更加平滑，(b) 如果可以，执行此操作的代码是什么样的？

一些注意事项：

• 如果有某种方法可以优化此问题，我愿意在时间上稍作调整，但是，例如，我希望所有圆圈至少更新 1.5 倍，无论动画如何时间设置为。因此，如果动画为 10 秒，则所有圆圈应该在 15 秒内发生变化。
• 目前，3000 个元素大致是我的极限，所以我会很高兴它能实现这一点:) 话虽如此，如果解决方案可以有效地处理更多元素相比之下，对于一般情况来说，那就太好了。

较旧的详细信息，以防有帮助

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

因此，我最终得到了 3000 多个类似于以下内容的语句：

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

我还创建了一个 Paper.set() 对象来保存所有这些元素：

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

暂时忘记了此处实际生成的文件相当大，我非常感谢如何将更改应用到上面详细介绍的对象的体积的建议，这既快速又合理，CPU 明智（可能是一个很大的要求）。

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

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

谢谢， 奥利

Answer 1

所有路径都是你手动写的吗？我认为如果将所有路径放在一个对象中会更好。然后，您可以迭代该对象并使用例如 for in 绘制所有路径。在此过程中，您可以使用 element.id = 'name' 为每个路径提供内部 ID。获得所有内部 ID 和绘制的路径后，您可以使用 getById 方法： getById('pathId') 如果您打算使用 Sets，我建议您使用 Clousures，您可以首先声明变量

var setName = Paper.Set()

，然后将路径推入另一个循环中

for (countie in Lousiana){
    setName.push(countie)
}

然后，如果您想将某些属性应用于元素，则可以使用诸如 Paper.forEach() 之类的方法。或者Set.FotEach()。两者都采用回调函数（如参数），然后在每次迭代中执行该函数。

如果您想分享您的代码，对我来说检查它并就如何解决某些情况提出我的意见不会有问题。我也在使用地图，我正在开发一个教育视频游戏，如果您愿意，我也可以与您分享我的代码，没有太多关于拉斐尔的文档，所以对我来说了解如何是有用的你使用它，也许对你来说也是一样。

再见！

Answer 2

老实说，更改 3000 个项目的属性对于任何计算机来说都应该很容易。 Raphael 对每个动画元素使用 setInterval。元素的属性更改后，浏览器将重新绘制整个页面。这是 2999 次不必要的重新绘制。

这是我要做的：不使用 Raphael 动画，而是使用循环来更改每个元素。它稍微复杂一点，但速度更快。此外，您还可以更改每秒的步数。如果您的动画运行速度太慢，只需减少每秒的步数即可。

这是一个示例： http://jsfiddle.net/dqJps/25/

希望这会有所帮助。

Answer 3

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

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

然后让 d3 从那里获取它

//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/

Answer 4

由于我目前对 Rapael.js 不太熟悉，我只是建议，以通用 JavaScript 方式，您可以创建一个changeRaphaelPathAttributeEvent，每次您想要更改路径时都会发出该事件，该属性作为所述事件的参数而变化。然后，如果可能的话，将事件处理程序附加到将执行属性更改的每个路径。

这样，您就可以解决循环访问所有路径变量并同步更改属性的问题（这将直接影响页面在处理时的响应能力）；该方法对用户体验的性能影响较小。

注意：这只是解决立即性能影响的解决方案。也许还有其他解决方案可以最大限度地减少需要访问的对象数量，您也应该考虑这些解决方案（我无法告诉您，因为我不太了解 Raphael）。