Optimizations

Author: rbrundritt

dist/azure-maps-animations.js

@@ -86,13 +86,15 @@ export class FrameBasedAnimationTimer extends PlayableAnimation {
     ////////////////////////////
 
     public onAnimationProgress(progress: number): { frameIdx: number } {
-        if(this._numberOfFrames > 0){
+        let nf = this._numberOfFrames;
+
+        if(nf > 0){
             //Need to get even spaced frame periods.
-            var frameIdx = Math.round(progress * this._numberOfFrames - 0.49999999999999999999999);
+            let frameIdx = Math.round(progress * nf - 0.49999999999999999999999);
 
             if(frameIdx !== this._currentFrameIdx) {
                 //When progress exactly 1, the frameIdx will be equal to the number of frames, but we want one less. This means that the last frame will be slightly longer (a couple of ms in a most cases).
-                if(frameIdx === this._numberOfFrames){
+                if(frameIdx === nf){
                     frameIdx--;
                 } else if(frameIdx < 0){
                     //Unlikely to happen, but an extra check to be safe. Ignore any frames that are negative.

dist/azure-maps-animations.min.js

@@ -100,10 +100,12 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
         //Prevent any queued animations from starting.
         this._cancelAnimations = true;
 
+        let a = this._animations;
+
         //Stop all animations that are playing. 
-        if (this._animations && this._animations.length > 0) {
-            for (var i = 0; i < this._animations.length; i++) {
-                this._animations[i].reset();
+        if (a && a.length > 0) {
+            for (let i = 0; i < a.length; i++) {
+                a[i].reset();
             }
         }
 
@@ -115,10 +117,12 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
         //Prevent any queued animations from starting.
         this._cancelAnimations = true;
 
+        let a = this._animations;
+
         //Stop all animations that are playing. 
-        if (this._animations && this._animations.length > 0) {
-            for (var i = 0; i < this._animations.length; i++) {
-                this._animations[i].stop();
+        if (a && a.length > 0) {
+            for (let i = 0; i <a.length; i++) {
+                a[i].stop();
             }
         }
 
@@ -131,7 +135,7 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
      */
     public setOptions(options: GroupAnimationOptions): void {
         if(options){
-            var isPlaying = this._isPlaying;
+            let isPlaying = this._isPlaying;
 
             if(isPlaying){
                 this.stop();
@@ -169,20 +173,22 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
      * Plays an array of animations together at the same time.
      */
     private _playTogether(): void {
-        if (this._animations && this._animations.length > 0) {
+        let a = this._animations;
+
+        if (a && a.length > 0) {
             this._isPlaying = true;
 
-            for (var i = 0; i < this._animations.length; i++) {
-                if(i === this._animations.length - 1){
-                    this._animations[i]._onComplete = () => {
+            for (let i = 0; i < a.length; i++) {
+                if(i === a.length - 1){
+                    a[i]._onComplete = () => {
                         this._isPlaying = false;
 
                         //Animations complete.
                         this._invokeEvent('oncomplete', null);
                     };
                 }
 
-                this._animations[i].play();
+                a[i].play();
             }
         }
     }
@@ -191,20 +197,22 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
      * Plays an array of animations sequentially. Looping of any animation will be disabled.
      */
     private _playSeq(): void {
-        if (this._animations && this._animations.length > 0) {
+        let a = this._animations;
+
+        if (a && a.length > 0) {
             this._isPlaying = true;
-            var idx = 0;
+            let idx = 0;
 
-            var callback = () => {
+            let callback = () => {
                 if(this._isPlaying){
                     if (idx > 0) {
                         //Only use the callback once.
-                        this._animations[idx - 1]._onComplete = null;
+                        a[idx - 1]._onComplete = null;
                     }
 
-                    if (!this._cancelAnimations && idx < this._animations.length) {
-                        this._animations[idx]._onComplete = callback;
-                        this._animations[idx].play();
+                    if (!this._cancelAnimations && idx < a.length) {
+                        a[idx]._onComplete = callback;
+                        a[idx].play();
                         idx++;
                     } else {
                         this._isPlaying = false;
@@ -225,10 +233,10 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
     private _playInterval(): void {
         if (this._animations && this._animations.length > 0) {
             this._isPlaying = true;
-            var self = this;
+            let self = this;
 
-            var idx = 0;
-            var p = function () {
+            let idx = 0;
+            let p = function () {
                 if(self._isPlaying){
                     if (!self._cancelAnimations && idx < self._animations.length) {
                         if(idx === self._animations.length - 1){
@@ -262,16 +270,18 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
 
     /** Calculates the total duration of the animation. */
     private _calculateDuration(): number {
-        var maxPostInterval = 0;
-        var intervalRemaining = 0;
-        var max = 0;
-        var sum = 0;
-        var totalInterval = this._options.interval * this._animations.length;
+        let maxPostInterval = 0;
+        let intervalRemaining = 0;
+        let max = 0;
+        let sum = 0;
+        let options = this._options;
+        let a = this._animations;
+        let totalInterval = options.interval * a.length;
 
-        this._animations.forEach((a, i, arr) => {
-            var d = a.getDuration();
+        a.forEach((a, i, arr) => {
+            let d = a.getDuration();
 
-            intervalRemaining = totalInterval - i * this._options.interval;
+            intervalRemaining = totalInterval - i * options.interval;
 
             if(intervalRemaining < d){
                 maxPostInterval = Math.max(maxPostInterval, d - intervalRemaining);
@@ -281,9 +291,9 @@ export class GroupAnimation extends azmaps.internal.EventEmitter<GroupAnimationE
             sum += d;
         });
 
-        var duration = 0;
+        let duration = 0;
 
-        switch(this._options.playType){
+        switch(options.playType){
             case 'together':
                 duration = max;
                 break;

src/animations/FrameBasedAnimationTimer.ts

@@ -104,7 +104,8 @@ export abstract class PlayableAnimation extends azmaps.internal.EventEmitter<Pla
 
     /** Gets the duration of the animation. Returns Infinity if the animations loops forever. */
     public getDuration(): number {
-        return (this._options.loop)? Infinity : this._options.duration / this._options.speedMultiplier;
+        let o = this._options;
+        return (o.loop)? Infinity : o.duration / o.speedMultiplier;
     }
 
     /** Gets the animation options. */
@@ -199,7 +200,7 @@ export abstract class PlayableAnimation extends azmaps.internal.EventEmitter<Pla
             let hasAutoPlay = typeof options.autoPlay === 'boolean';
 
             if (hasDuration || hasAutoPlay) {
-                var isPlaying = this.isPlaying();
+                let isPlaying = this.isPlaying();
 
                 if(isPlaying){
                     this.pause();
@@ -271,10 +272,10 @@ export abstract class PlayableAnimation extends azmaps.internal.EventEmitter<Pla
      */
     private _processFrame(): void {
         if(typeof this._id !== 'undefined'){
-            var progress = this._rawProgress || 0;
+            let progress = this._rawProgress || 0;
 
             //Animation reached the end.
-            if (this._rawProgress >= 1) {
+            if (progress >= 1) {
                 if(this._options.loop){
                     //Restart the animation.
                     this._rawProgress = 0;    
@@ -290,15 +291,15 @@ export abstract class PlayableAnimation extends azmaps.internal.EventEmitter<Pla
                 }
             }
 
-            var playProgress = (this._options.reverse)? 1 - this._rawProgress: this._rawProgress;
+            let playProgress = (this._options.reverse)? 1 - this._rawProgress: this._rawProgress;
 
             if (this._easing) {
                 progress = this._easing(playProgress);
             }
 
-            var state = this.onAnimationProgress(progress);
+            let state = this.onAnimationProgress(progress);
 
-            var eventArgs = Object.assign({
+            let eventArgs = Object.assign({
                 progress: playProgress,
                 easingProgress: progress,
                 animation: this

src/animations/GroupAnimation.ts

@@ -11,7 +11,7 @@ export class AnimationManager {
     private _queue: IPlayableAnimation[] = [];
     private _lastTime: number;
     private _minFrameRate = 33; //roughly 30 frames per second is the fastest that the animation loop will update.
-    private stopped = true;
+    private _stopped = true;
     private _idCounter = 1234567890;
     private _idLookupTable: { [key: number]: IPlayableAnimation } = {};
 
@@ -30,16 +30,16 @@ export class AnimationManager {
 
     /** Stops all animations. */
     public disable(): void {
-        if (!this.stopped) {
-            this.stopped = true;
+        if (!this._stopped) {
+            this._stopped = true;
             cancelAnimationFrame(this._animation);
         }
     }
 
     /** Renables animations. Many will likely snap to the end of their animation. */
     public enable(): void {
-        if (this.stopped) {
-            this.stopped = false;
+        if (this._stopped) {
+            this._stopped = false;
             this._animation = requestAnimationFrame(this.animate.bind(this));
         }
     }
@@ -53,7 +53,7 @@ export class AnimationManager {
             animatable._id = this._getUuid();
         }
 
-        var animation = this._idLookupTable[animatable._id];
+        let animation = this._idLookupTable[animatable._id];
 
         //Only add the animation to the queue if it isn't already in it.
         if (!animation) {
@@ -113,12 +113,12 @@ export class AnimationManager {
 
     /** Loops through the queue and animates a frame for each animatable object. */
     private animate(): void {
-        if (!this.stopped) {
-            var t = performance.now();
+        if (!this._stopped) {
+            let t = performance.now();
 
             if (t - this._lastTime >= this._minFrameRate) {
                 //Iterate backwards over queue incase the _onTriggerFrameAnimation asks to remove the animation. 
-                for (var i = this._queue.length - 1; i >= 0; i--) {
+                for (let i = this._queue.length - 1; i >= 0; i--) {
                     try {
                         this._queue[i]._onAnimationProgress(t);
                     } catch(e){ }

src/animations/PlayableAnimation.ts

@@ -35,12 +35,12 @@ export class DropAnimation extends PlayableAnimation {
 
             this._height = (typeof height === 'number' && height > 0) ? height : this._height;
 
-            var needsAdding = [];
-            var offset: number[];
+            let needsAdding = [];
+            let offset: number[];
 
-            var ds:azmaps.source.DataSource;
-            var map: azmaps.Map;
-            var markers: azmaps.HtmlMarker[] = [];
+            let ds:azmaps.source.DataSource;
+            let map: azmaps.Map;
+            let markers: azmaps.HtmlMarker[] = [];
 
             if(dataSourceOrMap instanceof azmaps.source.DataSource){
                 ds = dataSourceOrMap;
@@ -52,11 +52,11 @@ export class DropAnimation extends PlayableAnimation {
             }
 
             //Extract the offsets for each shape.
-            for (var i = 0, len = this._shapes.length; i < len; i++) {
+            for (let i = 0, len = this._shapes.length; i < len; i++) {
                 offset = null;
 
                 if(this._shapes[i] instanceof azmaps.Shape){
-                    var prop = (<azmaps.Shape>this._shapes[i]).getProperties();
+                    let prop = (<azmaps.Shape>this._shapes[i]).getProperties();
 
                     offset = prop['offset'];
                 } else {
@@ -87,7 +87,7 @@ export class DropAnimation extends PlayableAnimation {
                         needsAdding.push(this._shapes[i]);
                     }
                 } else {
-                    var m = <azmaps.HtmlMarker>this._shapes[i];
+                    let m = <azmaps.HtmlMarker>this._shapes[i];
                     (m).setOptions({ pixelOffset: offset, visible: false });
 
                     if(map && markers && markers.indexOf(m) === -1){
@@ -117,10 +117,11 @@ export class DropAnimation extends PlayableAnimation {
      * @param timestamp Timestamp from `performance.now()` that for the animation frame relative to the start time.
      */
     public onAnimationProgress(progress: number): any {
-        var offset: number[];
+        let offset: number[];
+        let y1: number;
 
-        for (var i = 0, len = this._shapes.length; i < len; i++) {
-            var y1 = this._y0[i] - this._height * (1 - progress);
+        for (let i = 0, len = this._shapes.length; i < len; i++) {
+            y1 = this._y0[i] - this._height * (1 - progress);
 
             offset = [this._x0[i], y1];
 

src/animations/internal/AnimationManager.ts

@@ -41,42 +41,46 @@ export abstract class MapPathPlayableAnaimation extends PlayableAnimation {
     /** Sets the options of the animation. */
     public setOptions(options: MapPathAnimationOptions): void {
         if (options) {
+            let no:MapPathAnimationOptions = {};
+
             if (typeof options.duration === 'number' && options.duration  > 0) {
-                this._pathOptions.duration = options.duration || this._pathOptions.duration;
+                no.duration = options.duration || this._pathOptions.duration;
             }
 
             if (typeof options.captureMetadata === 'boolean') {
-                this._pathOptions.captureMetadata = options.captureMetadata;
+                no.captureMetadata = options.captureMetadata;
             }
 
             if (typeof options.geodesic === 'boolean') {
-                this._pathOptions.geodesic = options.geodesic;
+                no.geodesic = options.geodesic;
             }
 
             if (typeof options.reverse === 'boolean') {
-                this._pathOptions.reverse = options.reverse;
+                no.reverse = options.reverse;
             }
 
             if (typeof options.pitch === 'number') {
-                this._pathOptions.pitch = options.pitch;
+                no.pitch = options.pitch;
             }
 
             if (typeof options.zoom === 'number') {
-                this._pathOptions.zoom = options.zoom;
+                no.zoom = options.zoom;
             }
 
             if (typeof options.rotate === 'boolean') {
-                this._pathOptions.rotate = options.rotate;
+                no.rotate = options.rotate;
             }
 
             if (typeof options.rotationOffset === 'number') {
-                this._pathOptions.rotationOffset = options.rotationOffset;
+                no.rotationOffset = options.rotationOffset;
             }
 
             if (options.map || options.map === null) {
-                this._pathOptions.map = options.map;
+                no.map = options.map;
             }
 
+            Object.assign(this._pathOptions, no);
+
             super.setOptions(options);
         }
     }
@@ -87,7 +91,7 @@ export abstract class MapPathPlayableAnaimation extends PlayableAnimation {
 
     protected _setMapCamera(position: azmaps.data.Position, heading: number, animate: boolean): void {
         if (this._pathOptions.map && position) {
-            var cam = <azmaps.CameraOptions>{
+            let cam = <azmaps.CameraOptions>{
                 center: position
             };