javascript - WebGL Earth 在当前位置重启动画

Question

我正在使用 WebGL 的 Globe API 及其旋转动画功能，但我希望用户能够通过双击地球来停止和重新启动动画。

目前我有以下运行 onload 的动画代码:

function performAnimation() {
      requestAnimationFrame(function animate(now) {
        if (animated) {
          var c = earth.getPosition();
          var elapsed = before? now - before: 0;
          before = now;
          earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)]);
          requestAnimationFrame(animate);
        }


      });
    }

下面的代码在双击时停止并重新启动动画:

performAnimation()
    var animated = true;
    var touchtime = 0;

    $('#globe').on('click', function() {
      if(touchtime == 0) {
        touchtime = new Date().getTime();
      } else {
        if(((new Date().getTime()) - touchtime) < 200) {
          if (animated) {
            animated = false;
          } else {
            animated = true;
            performAnimation()
          }
          console.log(animated);
          //alert(animated);

          touchtime = 0;
        } else {
          touchtime = 0;
        }
      } 
    });

停止和停止对双击起作用。问题是当动画停止时，时间仍然在流逝，当动画重新开始时，地球的中心会立即转移到它本来应该在的位置，如果它没有停止的话。

我如何确保地球动画重新启动时，它从当前中心而不是假设中心重新启动？

Answer 1

所以我最终通过简单地创建一个名为 dontAllowTimeElapse 的变量解决了这个问题，该变量最初设置为 false。当用户停止并重新启动动画时，dontAllowTimeElapse 设置为 true:

         if (animated) {
            animated = false;
          } else {
            animated = true;

            dontAllowTimeElapse = true;
            performAnimation()
          }

在动画代码中，如果dontAllowTimeElapse 为真，耗时将重置为0，这意味着动画从停止的地方重新开始。设置新中心后，再次允许时间流逝:

         if (dontAllowTimeElapse) {
            elapsed = 0;
          }
          before = now;
          earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)]);
          dontAllowTimeElapse = false;
          requestAnimationFrame(animate);