Maximum number of animation frames

re #7
axismaps · Apr 12, 2016 · d880f78 · d880f78
1 parent 1dc963c
commit d880f78
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 4 deletions.
diff --git a/lib/AnimatedLine.js b/lib/AnimatedLine.js
@@ -15,11 +15,18 @@ L.AnimatedLine = L.Polyline.extend({
   },
 
   initialize: function (latlngs, options) {
-  	this._totalDistance = 0;
+  	this._totalDistance = this._getTotalDistance(latlngs);//this._getTotalDistance(latlngs);
       // Chunk up the lines into options.distance bits
-    this._coords = this._chunk(latlngs);
     this.options.distance = 100;
     this.options.interval = 50;
+    if (options.maxDuration) {
+      this._maxFrames = Math.round(options.maxDuration / 20); // maximum framerate of 20ms
+      if (this._totalDistance / this.options.distance > this._maxFrames) {
+        this.options.interval = 20;
+        this.options.distance = Math.round(this._totalDistance/this._maxFrames);
+      }
+    }
+    this._coords = this._chunk(latlngs);
 
     this.finished = false;
     L.Polyline.prototype.initialize.call(this, latlngs, options);
@@ -29,6 +36,24 @@ L.AnimatedLine = L.Polyline.extend({
     	this.options.interval = Math.max( 1, this.options.maxDuration / (this._totalDistance/this.options.distance) );
   },
 
+  _getTotalDistance: function(latlngs) {
+    var i,
+        len = latlngs.length,
+        totalDist = 0;
+
+    for (i=1;i<len;i++) {
+      var cur = latlngs[i-1],
+          next = latlngs[i],
+          dist = cur.distanceTo(next),
+          factor = this.options.distance / dist,
+          dLat = factor * (next.lat - cur.lat),
+          dLng = factor * (next.lng - cur.lng);
+      totalDist += dist;
+    }
+
+    return totalDist;
+  },
+
   // Breaks the line up into tiny chunks (see options) ONLY if CSS3 animations
   // are not supported.
   _chunk: function(latlngs) {

diff --git a/lib/AnimatedMarker.js b/lib/AnimatedMarker.js
@@ -23,10 +23,18 @@ L.AnimatedMarker = L.Marker.extend({
    //   this._latlngs = latlngs;
    // } else {
       // Chunk up the lines into options.distance bits
-      this._totalDistance = 0;
-      this._latlngs = this._chunk(latlngs);
+      this._totalDistance = this._getTotalDistance(latlngs);
       this.options.distance = 100;
       this.options.interval = 50;
+
+      if (options.maxDuration) {
+        this._maxFrames = Math.round(options.maxDuration / 20); // maximum framerate of 20ms
+        if (this._totalDistance / this.options.distance > this._maxFrames) {
+          this.options.interval = 20;
+          this.options.distance = Math.round(this._totalDistance/this._maxFrames);
+        }
+      }
+      this._latlngs = this._chunk(latlngs);
 
       this.finished = false;
     //}
@@ -38,6 +46,24 @@ L.AnimatedMarker = L.Marker.extend({
     	this.options.interval = Math.max( 1, this.options.maxDuration / (this._totalDistance/this.options.distance) );
   },
 
+  _getTotalDistance: function(latlngs) {
+    var i,
+        len = latlngs.length,
+        totalDist = 0;
+
+    for (i=1;i<len;i++) {
+      var cur = latlngs[i-1],
+          next = latlngs[i],
+          dist = cur.distanceTo(next),
+          factor = this.options.distance / dist,
+          dLat = factor * (next.lat - cur.lat),
+          dLng = factor * (next.lng - cur.lng);
+      totalDist += dist;
+    }
+
+    return totalDist;
+  },
+
   // Breaks the line up into tiny chunks (see options) ONLY if CSS3 animations
   // are not supported.
   _chunk: function(latlngs) {