Commit b973d68c authored by Diego Rey's avatar Diego Rey
Browse files

Updated animation 2D to use requestAnimationFrame

parent 33edb4db
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
<span class="speed-value"> <span class="speed-value">
{{animation.speedX | number:'1.1'}}x {{animation.speedX | number:'1.0'}}x
</span> </span>
</div> </div>
</div> </div>
......
...@@ -40,17 +40,25 @@ export class Graph2DComponent { ...@@ -40,17 +40,25 @@ export class Graph2DComponent {
// Animation state // Animation state
animation: Animation = { animation: Animation = {
data: [], data: [],
timer: null, init: false,
currentFrame: 0, currentFrame: 0,
speed: 1000, fps: 10,
speedX: 1.0,
playing: false, playing: false,
init: false, timeout: null,
animationFrame: null,
speedX: 10,
boton: true, boton: true,
zoo: 2000 zoo: 2000
}; };
//Nuevo //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 = () => { public setZoom = () => {
this.animation.zoo = this.animation.zoo ; this.animation.zoo = this.animation.zoo ;
...@@ -309,13 +317,15 @@ export class Graph2DComponent { ...@@ -309,13 +317,15 @@ export class Graph2DComponent {
* @name updateFrame * @name updateFrame
* @desc update data for Function Plot and redraw the graph * @desc update data for Function Plot and redraw the graph
*/ */
public updateFrame = function(d) { public updateFrame = function() {
if (this.instance) { var $this = this;
this.instance.options.data = d; var $data = $this.animation.data[$this.animation.currentFrame];
this.instance.draw(); if ($this.instance) {
$this.instance.options.data = $data;
$this.instance.draw();
} else { } else {
let bounding = this.getBounding(); let bounding = $this.getBounding();
this.instance = functionPlot({ $this.instance = functionPlot({
target: '#graph2D-container', target: '#graph2D-container',
width: bounding.width, width: bounding.width,
height: bounding.height, height: bounding.height,
...@@ -327,47 +337,48 @@ export class Graph2DComponent { ...@@ -327,47 +337,48 @@ export class Graph2DComponent {
type: 'discrete' type: 'discrete'
} }
}, },
data: d data: $data
}) })
} }
// Update Frame // 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 * @name runAnimation
* @desc Run Shapes Animation * @desc Run Shapes Animation
*/ */
public runAnimation = function() { public runAnimation = function() {
if (this.animation.playing) return;
var $this = this; 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.animation.playing = true;
$this.updateFrame();
} }
/** /**
* @name pauseAnimation * @name pauseAnimation
* @desc Pause Shapes Animation * @desc Pause Shapes Animation
*/ */
public pauseAnimation = function() { public pauseAnimation = function() {
var $this = this; var $this = this;
clearInterval($this.animation.timer); cancelAnimationFrame($this.animation.animationFrame);
$this.animation.timer = null; clearTimeout($this.animation.timeout);
$this.animation.timeout = null;
$this.animation.playing = false; $this.animation.playing = false;
} }
/** /**
* @name stopAnimation * @name stopAnimation
* @desc Stop Shapes Animation * @desc Stop Shapes Animation
*/ */
public stopAnimation = function() { public stopAnimation = function() {
var $this = this; var $this = this;
clearInterval($this.animation.timer); $this.pauseAnimation();
$this.animation.data = []; $this.animation.data = [];
$this.animation.timer = null;
$this.animation.currentFrame = 0; $this.animation.currentFrame = 0;
$this.animation.speed = 1000;
$this.animation.playing = false;
$this.animation.init = false; $this.animation.init = false;
this.instance.removeAllGraphs(); this.instance.removeAllGraphs();
} }
...@@ -377,9 +388,18 @@ export class Graph2DComponent { ...@@ -377,9 +388,18 @@ export class Graph2DComponent {
* @desc Decrease Speed Animation * @desc Decrease Speed Animation
*/ */
public decreaseSpeed = function() { public decreaseSpeed = function() {
if (this.animation.speedX > 0.19) { var decrease = false;
this.animation.speed *= 1.1; if (this.animation.fps > 6) {
this.animation.speedX -= 0.1; 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.pauseAnimation();
this.runAnimation(); this.runAnimation();
} }
...@@ -390,7 +410,7 @@ export class Graph2DComponent { ...@@ -390,7 +410,7 @@ export class Graph2DComponent {
* @desc Increase Speed Animation * @desc Increase Speed Animation
*/ */
public restoreSpeed = function() { public restoreSpeed = function() {
this.animation.speed = 1000; this.animation.fps = 10;
this.animation.speedX = 1; this.animation.speedX = 1;
this.pauseAnimation(); this.pauseAnimation();
this.runAnimation(); this.runAnimation();
...@@ -401,9 +421,18 @@ export class Graph2DComponent { ...@@ -401,9 +421,18 @@ export class Graph2DComponent {
* @desc Increase Speed Animation * @desc Increase Speed Animation
*/ */
public increaseSpeed = function() { public increaseSpeed = function() {
if (this.animation.speedX < 10) { var increase = false;
this.animation.speed *= 0.9; if (this.animation.fps < 60) {
this.animation.speedX += 0.1; 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.pauseAnimation();
this.runAnimation(); this.runAnimation();
} }
......
export interface Animation { export interface Animation {
data?: any, data?: any,
timer?: any, init: boolean,
currentFrame: number, currentFrame: number,
speed: number, fps: number,
speedX: number,
playing: boolean, playing: boolean,
init: boolean, timeout?: any,
animationFrame?: any,
speedX: number,
boton: boolean, boton: boolean,
zoo: number, zoo: number,
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment