- Decoupled animation from physics simulation

HISTORY.md

@@ -9,6 +9,7 @@ http://visjs.org
 - Fixed bug where opening a cluster with smoothCurves off caused one child to go crazy.
 - Fixed bug where zoomExtent does not work as expected.
 - Fixed nodes color data being overridden when having a group and a dataset update query.
+- Decoupled animation from physics simulation
 
 ## 2015-01-16, version 3.9.0
 

lib/network/Network.js

@@ -229,6 +229,7 @@ function Network (container, data, options) {
   // animation properties
   this.animationSpeed = 1/this.renderRefreshRate;
   this.animationEasingFunction = "easeInOutQuint";
+  this.animating = false;
   this.easingTime = 0;
   this.sourceScale = 0;
   this.targetScale = 0;
@@ -2239,17 +2240,20 @@ Network.prototype._animationStep = function() {
   // handle the keyboad movement
   this._handleNavigation();
 
-  var startTime = Date.now();
-  this._physicsTick();
-  var physicsTime = Date.now() - startTime;
-
-  // run double speed if it is a little graph
-  if ((this.renderTimestep - this.renderTime > 2 * physicsTime || this.runDoubleSpeed == true)  && this.moving == true) {
+  // check if the physics have settled
+  if (this.moving == true) {
+    var startTime = Date.now();
     this._physicsTick();
+    var physicsTime = Date.now() - startTime;
+
+    // run double speed if it is a little graph
+    if ((this.renderTimestep - this.renderTime > 2 * physicsTime || this.runDoubleSpeed == true) && this.moving == true) {
+      this._physicsTick();
 
-    // this makes sure there is no jitter. The decision is taken once to run it at double speed.
-    if (this.renderTime != 0) {
-      this.runDoubleSpeed = true
+      // this makes sure there is no jitter. The decision is taken once to run it at double speed.
+      if (this.renderTime != 0) {
+        this.runDoubleSpeed = true
+      }
     }
   }
 
@@ -2270,7 +2274,7 @@ if (typeof window !== 'undefined') {
  * Schedule a animation step with the refreshrate interval.
  */
 Network.prototype.start = function() {
-  if (this.moving == true || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
+  if (this.moving == true || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0 || this.animating == true) {
     if (!this.timer) {
       if (this.requiresTimeout == true) {
         this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
@@ -2588,12 +2592,12 @@ Network.prototype.animateView = function (options) {
     }
   }
   else {
+    this.animating = true;
     this.animationSpeed = 1 / (this.renderRefreshRate * options.animation.duration * 0.001) || 1 / this.renderRefreshRate;
     this.animationEasingFunction = options.animation.easingFunction;
     this._classicRedraw = this._redraw;
     this._redraw = this._transitionRedraw;
     this._redraw();
-    this.moving = true;
     this.start();
   }
 };
@@ -2645,10 +2649,10 @@ Network.prototype._transitionRedraw = function (easingTime) {
   );
 
   this._classicRedraw();
-  this.moving = true;
 
   // cleanup
   if (this.easingTime >= 1.0) {
+    this.animating = false;
     this.easingTime = 0;
     if (this.lockedOnNodeId != null) {
       this._redraw = this._lockedRedraw;