Question

我是two.js的新手。我正在尝试使用rubber ball example进行一些基本实验，根据随机输入而不是鼠标移动，每秒重新定位球。

所以，我已经写了下面的代码，但它在一些迭代后正在消除橡胶球效应。我不知道出了什么问题。

第二个问题，经过一些迭代，橡胶球的形状从圆形变为椭圆形。

JSFiddle：http://jsfiddle.net/2v93n/多次尝试过，但没有和jsFiddle一起工作。

<body>
<script>
      var two = new Two({
        fullscreen: true,
        autostart: true
      }).appendTo(document.body);

      Two.Resoultion = 32;

      var delta = new Two.Vector();
      var mouse = new Two.Vector();
      var drag = 0.1;
      var radius = 25;
      var shadow = two.makeCircle(two.width / 2, two.height / 2, radius);
      var ball = two.makeCircle(two.width / 2, two.height / 2, radius);
      ball.noStroke().fill = 'green';shadow.noStroke().fill = 'rgba(0, 0, 0, 0.2)';          shadow.scale = 0.85;

    function moveRubberBall() {

      shadow.offset = new Two.Vector(- radius / 2, radius * 2);

      _.each(ball.vertices, function(v) {
        v.origin = new Two.Vector().copy(v);
      });

      mouse.x = Math.floor((Math.random() * 1000) + 1);
      mouse.y = Math.floor((Math.random() * 600) + 1);
      shadow.offset.x = 5 * radius * (mouse.x - two.width / 2) / two.width;
      shadow.offset.y = 5 * radius * (mouse.y - two.height / 2) / two.height;

      two.bind('update', function() {

        delta.copy(mouse).subSelf(ball.translation);

        _.each(ball.vertices, function(v, i) {

          var dist = v.origin.distanceTo(delta);
          var pct = dist / radius;

          var x = delta.x * pct;
          var y = delta.y * pct;

          var destx = v.origin.x - x;
          var desty = v.origin.y - y;

          v.x += (destx - v.x) * drag;
          v.y += (desty - v.y) * drag;

          shadow.vertices[i].copy(v);

        });
        ball.translation.addSelf(delta);
        shadow.translation.copy(ball.translation);
        shadow.translation.addSelf(shadow.offset);

      });
  }
  var auto_refresh = setInterval("moveRubberBall()", 1000);
</script>
</body>

请帮助别人。

Answer 1

主要问题是two.bind('update'...)在moveRubberBall()范围内。绑定到update时，意味着将在requestAnimationFrame上调用此函数，实际上是60FPS。每次调用moveRubberBall时绑定事件 - 每秒一次 - 它会添加另一个回调。因此，5秒后将有5个更新称为60FPS。我更新了你的小提琴以正确导入two.js并修复了这个错误概述：

http://jsfiddle.net/2v93n/1/

保持球的形状和动画在一段时间内保持一致

1 个答案: