2

首先,感谢您的帮助。:)

JSFiddle 代码

JSFiddle全屏

正如您在上面的小提琴链接中看到的那样,我正在为 1400 个对象设置动画,试图创建“闪烁效果”。随着用户更快地移动鼠标,更多的六边形形状会完全不透明并具有不同的淡出率。小提琴中的版本用足够的颜色填充空间,但感觉生涩和结块。如果我减少 fade_time 变量的数量,它会更平滑,但没有足够的完全不透明的六边形。最终目标是用六边形拼写单词。

Chrome 中的性能最好,FireFox 和 IE 中的性能较差。我在 iPad 上的移动 Safari 中测试(使用 Raphael 的 element.touchmove),结果更糟。

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

我看到其他人给出的这个答案应该有助于提高性能,但我试图将动画六边形的数量建立在光标移动的基础上,我不确定我是否可以使用计时器来做到这一点。

这个答案提到使用画布:

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

即使使用代码使用的动画,这对人们来说似乎是一条更好的途径吗?

这是我第一次使用 Raphael.js。一般来说,我在 JS 方面不是很有经验,所以任何帮助都是非常棒的!

编辑:编辑:另外,看到这个关于 .resize 被调用的次数比提问者可能想象的要多的答案让我想知道 .mousemove 函数是否被调用的次数(比我需要的多)比我预期的要多。

4

1 回答 1

1

我认为它扼杀了“重叠”动画,例如:

  1. 六边形数字 #6 开始褪色
  2. 在它褪色的一半时,另一个褪色开始

我添加了一条stop()指令以避免意外结果。

此外,for() 循环不会检查是否有另一个动画正在进行,也不会检查某个十六进制是否在循环内被随机选择了两次或更多次。作为一种解决方法,我添加了一个向量来缓存正在动画的六边形的索引,尽管它似乎没有太大帮助。

要查看它保存了多少(无用)动画,请取消注释最后一个console.log().

此外,您的getRandomInt()函数产生了一些未定义的索引错误(因为您的数组索引从 0 到 1399 并且它返回了 0 到 1400 之间的整数......我改变了它。

在此处查看我的附加组件:http: //jsfiddle.net/rz4yY/46/

于 2012-09-10T12:54:31.197 回答