拉斐尔随机顺序显示物体

Raphael random order of objects to show

本文关键字：显示 顺序 随机      更新时间：2023-09-26

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

看起来你的代码正在工作，一切都发生得太快了，没有注意到效果。更改动画函数的值并再次观看您的小提琴。

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

我提出了一个解决方案，也许有更好的解决方案，但这个对我有用：

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

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

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

相关文章：