Question

我正在开发一个使用SVG Raphael.js的项目。一个组件是一组圆圈，每个圆圈随机地“摆动” - 也就是说，沿着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

拉斐尔有一套很好的缓和效果。

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

可以找到全方位的缓和效果here。您可以随意使用它们并同时参考最新文档。

将调用置于循环中并不是要做的事情。使用随时可用的回调。

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

3 个答案: