Updated animation 2D to use requestAnimationFrame

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html

@@ -133,7 +133,7 @@
 							<i class="fa fa-plus"></i>
 						</button>
 						<span class="speed-value">
-							{{animation.speedX | number:'1.1'}}x
+							{{animation.speedX | number:'1.0'}}x
 						</span>
 					</div>
 				</div>

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -40,17 +40,25 @@ export class Graph2DComponent {
     // Animation state
     animation: Animation = {
         data: [],
-        timer: null,
+        init: false,
         currentFrame: 0,
-        speed: 1000,
-        speedX: 1.0,
+        fps: 10,
         playing: false,
-        init: false,
+        timeout: null,
+        animationFrame: null,
+        speedX: 10,
         boton: true,
         zoo: 2000
     };
     //Nuevo
 
+    public easeInOutCubic = function(fps) {
+        var t = fps < 6 ? 6 : fps;
+        var k = t/60;
+        var animation = k<.5 ? 60*(4*k*k*k) : 60*((k-1)*(2*k-2)*(2*k-2)+1);
+        console.log(animation);
+        return animation;
+    }
 
     public setZoom = () => {
         this.animation.zoo = this.animation.zoo ;  
@@ -309,13 +317,15 @@ export class Graph2DComponent {
      * @name updateFrame
      * @desc update data for Function Plot and redraw the graph
      */
-    public updateFrame = function(d) {
-        if (this.instance) {
-            this.instance.options.data = d;
-            this.instance.draw();
+    public updateFrame = function() {
+        var $this = this;
+        var $data = $this.animation.data[$this.animation.currentFrame];
+        if ($this.instance) {
+            $this.instance.options.data = $data;
+            $this.instance.draw();
         } else {
-            let bounding = this.getBounding();
-            this.instance = functionPlot({
+            let bounding = $this.getBounding();
+            $this.instance = functionPlot({
                 target: '#graph2D-container',
                 width: bounding.width,
                 height: bounding.height,
@@ -327,47 +337,48 @@ export class Graph2DComponent {
                         type: 'discrete'
                     }
                 },
-                data: d
+                data: $data
             })
         }
         // Update Frame
-        this.animation.currentFrame = (this.animation.currentFrame + 1) % this.animation.data.length;
+        $this.animation.timeout = setTimeout(function() {
+            $this.animation.currentFrame = ($this.animation.currentFrame + 1) % $this.animation.data.length;
+            $this.animation.animationFrame = requestAnimationFrame($this.updateFrame.bind($this));
+        }, 1000/ this.easeInOutCubic($this.animation.fps));
     }
+
     /**
      * @name runAnimation
      * @desc Run Shapes Animation
      */
     public runAnimation = function() {
+        if (this.animation.playing) return;
         var $this = this;
-        if ($this.animation.timer !== null) return;
-        $this.updateFrame($this.animation.data[$this.animation.currentFrame]);
-        $this.animation.timer = setInterval(function(){
-            $this.updateFrame($this.animation.data[$this.animation.currentFrame]);
-        }, $this.animation.speed);
         $this.animation.playing = true;
+        $this.updateFrame();
     }
+
     /**
      * @name pauseAnimation
      * @desc Pause Shapes Animation
      */
     public pauseAnimation = function() {
         var $this = this;
-        clearInterval($this.animation.timer);
-        $this.animation.timer = null;
+        cancelAnimationFrame($this.animation.animationFrame);
+        clearTimeout($this.animation.timeout);
+        $this.animation.timeout = null;
         $this.animation.playing = false;
     }
+
     /**
      * @name stopAnimation
      * @desc Stop Shapes Animation
      */
     public stopAnimation = function() {
         var $this = this;
-        clearInterval($this.animation.timer);
+        $this.pauseAnimation();
         $this.animation.data = [];
-        $this.animation.timer = null;
         $this.animation.currentFrame = 0;
-        $this.animation.speed = 1000;
-        $this.animation.playing = false;
         $this.animation.init = false;
         this.instance.removeAllGraphs();
     }
@@ -377,9 +388,18 @@ export class Graph2DComponent {
      * @desc Decrease Speed Animation
      */
     public decreaseSpeed = function() {
-        if (this.animation.speedX > 0.19) {
-            this.animation.speed *= 1.1;
-            this.animation.speedX -= 0.1;
+        var decrease = false;
+        if (this.animation.fps > 6) {
+            decrease = true;
+        }
+        if (decrease) {
+            if (this.animation.fps > 10) {
+                this.animation.fps -= 1;
+                this.animation.speedX = this.animation.fps / 10;
+            } else {
+                this.animation.fps -= 1;
+                this.animation.speedX = this.animation.fps / 10;
+            }
             this.pauseAnimation();
             this.runAnimation();
         }
@@ -390,7 +410,7 @@ export class Graph2DComponent {
      * @desc Increase Speed Animation
      */
     public restoreSpeed = function() {
-        this.animation.speed = 1000;
+        this.animation.fps = 10;
         this.animation.speedX = 1;
         this.pauseAnimation();
         this.runAnimation();
@@ -401,9 +421,18 @@ export class Graph2DComponent {
      * @desc Increase Speed Animation
      */
     public increaseSpeed = function() {
-        if (this.animation.speedX < 10) {
-            this.animation.speed *= 0.9;
-            this.animation.speedX += 0.1;
+        var increase = false;
+        if (this.animation.fps < 60) {
+            increase = true;
+        }
+        if (increase) {
+            if (this.animation.fps >= 10) {
+                this.animation.fps += 1;
+                this.animation.speedX = this.animation.fps / 10;
+            } else {
+                this.animation.fps += 1;
+                this.animation.speedX = this.animation.fps / 10;
+            }
             this.pauseAnimation();
             this.runAnimation();
         }

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts

 export interface Animation {
 	data?: any,
-	timer?: any,
+	init: boolean,
 	currentFrame: number,
-	speed: number,
-	speedX: number,
+	fps: number,
 	playing: boolean,
-	init: boolean,
+	timeout?: any,
+	animationFrame?: any,
+	speedX: number,
 	boton: boolean,
 	zoo: number,
 }