如何使Raphael.js元素在畫布上“擺動”？

Question

我正在一個將SVG與Raphael.js結合使用的項目。 一個組成部分是一組圓，每個圓隨機地“擺動”-即沿x和y軸在少量方向上緩慢移動。 可以將其想象為將大理石放在您的手掌上，然后慢慢搖動手掌。

有誰知道Raphael.js插件或代碼示例已經完成了類似的工作？ 我對效果不是很特別-它只需要是微妙/平滑和連續的。

如果我需要自己創建一些東西，那么您對我如何做有什么建議？ 我最初的想法是遵循以下思路：

• 在畫布上畫一個圓。
• 啟動一個循環，該循環：
  • 在錨定於圓心的某個圓形邊界內隨機找到x和y坐標。
  • 在一個隨機的時間間隔內，將圓從其當前位置到那些坐標進行動畫處理，並使用入/出緩動來平滑效果。

我擔心的是，這看起來太機械化了-即，我認為它看起來更像是圓圈在描繪星形圖案，或有癲癇發作或類似現象。 理想情況下，它將在生成的隨機點上平滑彎曲，但這看起來要復雜得多。

如果您可以推薦我可以適應的任何其他代碼（最好是JavaScript），那也很好-例如jQuery插件之類。 我發現了一個名為jquery-wiggle的東西 ，但這似乎只能沿一個軸工作。

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

Answer 1

您可以通過擴展Raphael的默認寬松公式來實現類似的效果：

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

緩動功能需要經過的時間占總時間的比率並對其進行操作。 返回的值將應用於正在設置動畫的屬性。

此緩動函數忽略n並返回一個隨機值。 您可以通過使用return公式來創建所需的任何擺動。

如果您希望形狀從形狀開始處結束，則必須使用回調函數，因為應用不移動形狀的變換不會產生動畫。 您可能必須更改轉換值。

希望這是有用的！

Answer 2

像下面這樣的事情可以做到：

    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/

改變寬松政策以及某些事情之間的延遲至少應該有助於使事情看起來更加自然。 希望能有所幫助。

Answer 3

拉斐爾（Raphael）有一組非常好的緩和效果。

這是“給定”反彈緩和的隨機圓組。 動態地向對象添加動畫

完整的緩動效果可以在這里找到。 您可以與他們一起玩，同時參考最新文檔。

但是，將呼叫置於循環中並不是要做的事情。 使用隨時可用的回調。