WebGL Earth現在の位置でのアニメーションの再起動

Question

WebGLのGlobe APIとその回転アニメーション機能を使用していますが、地球儀をダブルクリックしてアニメーションを停止して再開できるようにしたいとします。

現在、私は、オンロード走る次のアニメーションコードを持っている：ストップ

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; 
     } 
     } 
    }); 

とダブルで作品を停止します。

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); 
     } 


     }); 
    } 

、次のコードは、ダブルクリックでアニメーションを停止し、再起動します-クリック。問題は、アニメーションが停止しても時間がまだ経過していて、アニメーションが再開されたときに地球の中心が停止していなかった場合の位置にすぐに移動することです。

グローブアニメーションが再開したときに、仮想センターではなく現在のセンターから再起動されるようにするにはどうすればよいですか？

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);