From b973d68c1042c65c0cbabea3956c50080e7c81ba Mon Sep 17 00:00:00 2001
From: Diego Rey <diego.despaux@izundo.com>
Date: Sun, 7 Oct 2018 14:17:54 -0300
Subject: [PATCH] Updated animation 2D to use requestAnimationFrame
---
.../plotter/graph2D/graph2D.component.html | 2 +-
.../plotter/graph2D/graph2D.component.ts | 89 ++++++++++++-------
.../layout/plotter/graph2D/graph2D.helper.ts | 9 +-
3 files changed, 65 insertions(+), 35 deletions(-)
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
index a08aae63..18923298 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
+++ b/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>
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
index 938b6ff6..4095999a 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
+++ b/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();
}
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
index 9e3aa6b4..e4e8ca34 100644
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
@@ -1,11 +1,12 @@
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,
}
--
GitLab