使用r.set()
我创建了一个集合,用于保存我想要制作动画的所有对象。
var r = Raphael("holder", '100%', '100%'),
targets = r.set(),
size = 30,
offset = 10;
for (var i = 0, j = 0; j < 10; i += size, j++) {
targets.push(r.rect(i, 10, size, size));
i += offset;
}
我想使用简单的动画以随机顺序显示所有对象:
function animate() {
targets[index].animate({
fill: "#cde",
opacity: 1
}, 1000, 'linear');
index++;
if (index < targets.length) setTimeout(animate, 1000);
}
animate();
上面的代码按顺序逐个显示所有元素。
我尝试使用插件进行随机排序:
Raphael.st.sort = function (callback) {
var cb = callback || function (a, b) {
if (a.id < b.id) {
return -1;
} else if (a.id > b.id) {
return 1;
} else {
return 0;
}
};
Array.prototype.sort(this, cb);
this.items.sort(cb);
return this;
};
function shuffle(a, b) {
return Math.random() > 0.5 ? -1 : 1;
};
但没有任何运气。
我的问题是我如何随机订购我想要展示的元素集合?
这是我的jsfiddle:http://jsfiddle.net/Misiu/UDmym/
答案 0 :(得分:0)
看起来你的代码工作正常,一切都发生得太快而无法注意到效果。 更改动画功能的值并再次观看您的小提琴。
function animate() {
targets[index].animate({
fill: "#cde",
opacity: 1
}, Math.floor(5000 * Math.random()), 'linear');
index++;
if (index < targets.length) setTimeout(animate, 1); // call doMove() very quick:-)
}
答案 1 :(得分:0)
我已经找到了一个解决方案,也许还有更好的解决方案,但这个对我有用:
function shuffle(a, b) {
return Math.random() > 0.5 ? -1 : 1;
}
var r = Raphael("holder", '100%', '100%'),
targets = r.set(),
tmp = [],
size = 30,
offset = 10;
for (var i = 0, j = 0; j < 10; i += size, j++) {
tmp.push(r.rect(i, 10, size, size));
i += offset;
}
tmp.sort(shuffle);
for (var i = 0, j = tmp.length; i < j; i++) {
targets.push(tmp[i]);
}
tmp = null;
targets.attr({
fill: "#efe",
stroke: "#fff",
"stroke-dasharray": "- ",
opacity: 0.2
});
所以基本上我将所有矩形添加到临时数组,然后我将它们随机化,最后我将它们添加到目标。
正如我所写,这是一个简单的解决方案,欢迎任何其他尝试!