0

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

4

2 回答 2

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
});

所以基本上我将所有矩形添加到临时数组中，然后随机化它们，最后将它们添加到目标中。

正如我所写，这是一个简单的解决方案，欢迎任何其他尝试！

于 2013-10-23T16:29:13.603 回答
0

看来您的代码正在运行，一切都发生得太快而无法注意到效果。更改 animate 函数的值并再次观看您的小提琴。

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:-)
}
于 2013-10-23T15:25:44.330 回答