如何讓Raphael.js元素在畫布上「擺動」？

我正在使用與Raphael.js一起使用SVG的項目。一個組成部分是一組圓圈，其中每個圓圈隨機地「擺動」 - 即沿x軸和y軸緩慢移動少量和隨機方向。想想它，就像在你的手掌上放一塊大理石，慢慢搖晃你的手掌。如何讓Raphael.js元素在畫布上「擺動」？

是否有人知道Raphael.js插件或代碼示例已經完成了這樣的事情？我對這個效果並不十分特別 - 它只需要微妙/平滑和持續。

如果我需要自己創建一些東西，你有什麼建議可以解決這個問題嗎？我最初的想法是沿着這些線：

在畫布上畫一個圓。
開始一個循環：
- 隨機查找固定在圓心的某個圓形邊界內的x和y座標。
- 將圓圈從其當前位置動畫到隨機時間間隔內的這些座標，使用進/出緩動來平滑效果。

我擔心的是，這可能看起來太機械 - 即，我認爲它看起來更像是圓跟蹤星形圖案，或有癲癇發作，或類似的東西。理想情況下，它會通過它產生的隨機點平滑曲線，但似乎更復雜。

如果您可以推薦我可以適應的任何其他代碼（最好是JavaScript），那也會很棒 - 例如，jQuery插件等。我找到一個名爲jquery-wiggle的，但似乎只能沿一個軸工作。

在此先感謝您的任何建議！

來源

2011-12-29 Bungle

像下面這樣可以做到這一點：

var paper = Raphael('canvas', 300, 300); 
    var circle_count = 40; 
    var wbound = 10; // how far an element can wiggle. 
    var circleholder = paper.set(); 

    function rdm(from, to){ 
      return Math.floor(Math.random() * (to - from + 1) + from); 
    } 

    // add a wiggle method to elements 
    Raphael.el.wiggle = function() { 
     var newcx = this.attrs.origCx + rdm(-wbound, wbound); 
     var newcy = this.attrs.origCy + rdm(-wbound, wbound); 
     this.animate({cx: newcx, cy: newcy}, 500, '<'); 
    } 

    // draw our circles 
    // hackish: setting circle.attrs.origCx 
    for (var i=0;i<circle_count;i++) { 
     var cx = rdm(0, 280); 
     var cy = rdm(0, 280); 
     var rad = rdm(0, 15); 
     var circle = paper.circle(cx, cy, rad); 
     circle.attrs.origCx = cx; 
     circle.attrs.origCy = cy; 
     circleholder.push(circle); 
    } 

    // loop over all circles and wiggle 
    function wiggleall() { 
     for (var i=0;i<circleholder.length;i++) { 
      circleholder[i].wiggle(); 
     } 
    } 
    // call wiggleAll every second 
    setInterval(function() {wiggleall()}, 1000);

http://jsfiddle.net/UDWW6/1/

改變寬鬆政策，和某些事物之間的延遲發生應該做的事情至少可以幫助看起來更自然。希望有所幫助。

來源

2011-12-31 08:44:28 oli

這太棒了 - 謝謝，oli！這不完全是我想到的效果，但正如你所提到的，它看起來像我將能夠調整值，以獲得非常接近。我感謝您的幫助。 – Bungle 2011-12-31 18:51:18

拉斐爾有一套很好的緩和效果。

下面是隨機設置的「給定」反彈緩解的圓圈。 Dynamically add animation to objects

緩和效果的全範圍可以發現here。你可以玩弄它們並同時參考最新的文檔。但是，將呼叫放在循環中並不是要做的事情。使用回調，這是現成的。

來源

2011-12-29 23:18:46 Chasbeen

謝謝Chasbeen。關於使用回調代替循環的好處。這很有幫助，但我仍然覺得我距離可用代碼還有很長的路要走。我很想找到一個可以使用或適應的現成函數，或者至少是一個通用的僞代碼示例來說明如何寫這樣的東西。有任何想法嗎？ – Bungle 2011-12-30 00:54:12

您可以通過擴展拉斐爾的默認緩解公式達到類似的效果：

Raphael.easing_formulas["wiggle"] = function(n) { return Math.random() * 5 }; 
[shape].animate({transform:"T1,1"}, 500, "wiggle", function(e) { 
    this.transform("T0,0"); 
});

緩解功能需要經過的總時間的時間比率，並操縱它。返回值應用於正在動畫的屬性。

這個緩動函數忽略n並返回一個隨機值。您可以通過玩迴歸公式來創建任何你喜歡的擺動。

如果您希望形狀最終返回到開始位置，則需要回調函數，因爲應用不移動形狀的轉換不會生成動畫。您可能必須更改轉換值。

希望這是有用的！

來源

2012-10-27 18:38:27

如何讓Raphael.js元素在畫布上「擺動」？

回答

相關問題