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

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

javascript

Javascript 在一段时间内保持球的形状和动画一致,javascript,two.js,Javascript,Two.js,我是新手。我正在尝试一些基本的实验，以根据随机输入，而不是鼠标移动，每秒重新定位球所以，我写了下面的代码，但经过一些迭代后，它消除了橡皮球效应。我不知道出了什么问题第二个问题，经过一些迭代，橡胶球的形状从圆形变为椭圆形 JSFiddle：尝试了很多次，但没有使用JSFiddle进行实时工作 <body> <script> var two = new Two({ fullscreen: true, autostart: tru

我是新手。我正在尝试一些基本的实验，以根据随机输入，而不是鼠标移动，每秒重新定位球

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

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

JSFiddle：尝试了很多次，但没有使用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>


变量二=新的二({
全屏：对，
自动启动：正确
}).附录（文件正文）；
二、资源量=32；
var delta=new Two.Vector（）；
var mouse=new Two.Vector（）；
var阻力=0.1；
var半径=25；
var shadow=2.makeCircle（2.width/2，2.height/2，radius）；
var ball=2.makeCircle（2.width/2，2.height/2，半径）；
ball.noStroke（）.fill='green'；shadow.noStroke（）.fill='rgba（0,0,0,0.2）'；shadow.scale=0.85；
函数moveRubberBall（）{
shadow.offset=新的2.Vector（-radius/2，radius*2）；
_.每个（球、顶点、函数（v）{
v、 原点=新的2.Vector（）.copy（v）；
});
mouse.x=Math.floor（（Math.random（）*1000）+1）；
mouse.y=Math.floor（（Math.random（）*600）+1）；
shadow.offset.x=5*半径*（mouse.x-two.width/2）/two.width；
shadow.offset.y=5*半径*（mouse.y-two.height/2）/two.height；
2.bind（'update'，function（）{
delta.copy（鼠标）、subSelf（ball.translation）；
_.每个（球、顶点、函数（v、i）{
变量距离=v.原点距离（增量）；
var pct=距离/半径；
var x=增量x*pct；
变量y=增量y*pct；
var destx=v.origin.x-x；
var desty=v.origin.y-y；
v、 x+=（destx-v.x）*拖动；
v、 y+=（目的地-v.y）*拖动；
阴影.顶点[i].复制（v）；
});
ball.translation.addSelf（delta）；
shadow.translation.copy（ball.translation）；
shadow.translation.addSelf（shadow.offset）；
});
}
var auto_refresh=setInterval（“moveRubberBall（）”，1000）；

请帮助某人。

主要问题是

two.bind（'update'…）

在

moveRubberBall（）中。当您绑定到update
时，意味着将在requestAnimationFrame
上调用此函数，有效速度为60FPS。当每次调用moveRubberBall
时（每秒一次）绑定事件时，它会添加另一个回调。因此，5秒后将有5个更新，称为60FPS。我更新了您的fiddle以正确导入two.js并修复此错误：
你能告诉我导入两个.js有什么问题吗？啊，是的，很抱歉。问题是GitHub不允许您使用任何分支，因此您必须使用CDN或其他源来导入文件。巧合的是，您可以使用GitHub的gh页面
，因此我从那里链接了两个.js，而不是主分支：http://jonobr1.github.io/two.js/third-party/two.js