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

所以我终于通过简单地创建一个名为[self scheduleNotificationForDayOfWeek:0 withPickedComponents:pickedComponents andReminderString:@"Hello, world!"];的变量来解决这个问题，该变量最初设置为false。当用户停止动画并重新启动动画时，dontAllowTimeElapse设置为true：

dontAllowTimeElapse

在动画代码中，如果if (animated) { animated = false; } else { animated = true; dontAllowTimeElapse = true; performAnimation() }为真，则经过的时间将重置为0，这意味着动画将从停止的位置重新开始。设置新中心后，再次允许时间过去：

dontAllowTimeElapse

WebGL Earth在当前位置重新启动动画

1 个答案: