设置1400个Raphael.js对象的不透明度动画会影响动画性能

首先，感谢您的帮助。：）

JSFiddle代码。

JSFiddle全屏

正如你可以从上面的小提琴链接中看到的，我正在为1400个对象设置动画，试图创建一个"闪烁效果"。随着用户移动鼠标的速度越来越快，更多的六边形会突然变为完全不透明度，并具有不同的淡出率。小提琴中的版本用足够的颜色填充了空间，但感觉不连贯和笨拙。如果我减少fade_time变量的数量，它会更平滑，但没有足够的完全不透明度的六边形。最终目标是用六边形拼写单词。

Chrome的性能最好，FireFox和IE的性能较差。我在iPad上的移动游戏中测试了（使用Raphael的element.touchmove），结果更糟。

我正在寻找任何关于哪些代码可以用不同的方式来提高性能的建议。

我看到了别人给出的这个答案，这个答案本应该有助于提高性能，但我正试图根据光标的移动来制作六边形的动画，我不确定用计时器能不能做到这一点。

这个答案提到使用画布：

一个好的选择是使用Canvas来绘制元素。根据我的实验，它在绘制这么多动画时会比SVG更快，尽管如果你使用一些动画，它们将比RaphaelJS库更难实现。

对人们来说，这似乎是一条更好的途径吗，即使有代码正在使用的动画？

这是我第一次使用Raphael.js。一般来说，我对js不是很有经验，所以任何帮助都是神童！

编辑：编辑：此外，看到这个关于.resize被调用的次数比提问者想象的要多的答案，我想知道.mousemoove函数是否会被调用的时间（比我需要的要多）比我预期的要多。