如何让 Raphael.js 元素在画布上“摆动”？

Question

我正在开发一个使用带有Raphael.js 的SVG 的项目。一个组件是一组圆圈，每个圆圈随机“摆动”——也就是说，沿着 x 和 y 轴缓慢移动少量，并且在随机方向上。可以把它想象成将一块大理石放在你的手掌上，然后慢慢地摇晃你的手掌。

是否有人知道 Raphael.js 插件或代码示例已经完成了这样的事情？我对效果不是特别挑剔 - 它只需要微妙/平滑和连续。

如果我需要自己创造一些东西，你对我如何去做有什么建议吗？我最初的想法是这样的：

• 在画布上画一个圆圈。
• 启动一个循环：
  • 在某个圆形边界内随机查找 x 和 y 坐标，该边界锚定在圆的中心点上。
  • 在随机时间间隔内将圆从其当前位置动画到这些坐标，使用输入/输出缓动来平滑效果。

我担心这可能看起来过于机械化 - 即，我认为它看起来更像是圆圈在追踪星形图案，或者癫痫发作，或类似的东西。理想情况下，它会通过它生成的随机点平滑地弯曲，但这似乎要复杂得多。

如果您可以推荐任何其他我可以适应的代码（最好是 JavaScript），那也很棒 - 例如，jQuery 插件等。我找到了一个名为 jquery-wiggle 的，但它似乎只在一个轴上起作用。

提前感谢您的任何建议！

Answer 1

类似下面的东西可以做到这一点：

    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 2

您可以通过扩展 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 并返回一个随机值。您可以通过使用返回公式来创建任何您喜欢的摆动。

如果您希望形状最终回到它开始的位置，则必须使用回调函数，因为应用不移动形状的变换不会产生动画。您可能必须更改转换值。

希望这有用！

Answer 3

Raphael 中有一组非常好的缓动效果。

这是一组随机的“给定”反弹缓动的圆圈。 Dynamically add animation to objects

可以在here找到全方位的缓动效果。您可以一边玩一边参考最新的文档。

但是，将调用置于循环中并不是要做的事情。使用现成的回调。