如何让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元素在画布上“摆动”？

回答

相关问题