拉斐爾對象的隨機順序顯示

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

來源

2013-10-23 Misiu

看來你的代碼工作，一切都發生只是太快注意到效果。更改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-23 15:25:44 mainguy

我想通過隨機順序說的是，現在元素從左到右顯示。我想隨機給他們看。請看我更新的小提琴，我刪除了隨機動畫的時間。 – Misiu

，我想出了一個解決方案，也許還有更好的，但是這一次對我的作品：

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-23 16:29:13 Misiu

拉斐爾對象的隨機順序顯示

回答

相關問題