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

Updated animation 2D to use requestAnimationFrame

parent 33edb4db
......@@ -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>
......
......@@ -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();
}
......
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,
}
......
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