Commit 8ea56b3d authored by Diego Rey's avatar Diego Rey
Browse files

Added speed controls for animation

parent ff4b8566
...@@ -85,23 +85,25 @@ ...@@ -85,23 +85,25 @@
(click)="toggleTip()"> (click)="toggleTip()">
Tip Tip
</label> </label>
</div> <label [class.disabled]="funciones.length === 0">
<hr>
<div class="setting-section">
<label>
<input <input
type="checkbox" type="checkbox"
[attr.disabled]="funciones.length === 0 ? '' : null"
[checked]=animation.boton [checked]=animation.boton
(click)="multiGraf(value)"> (click)="multiGraf(value)">
Multi gráfica Multi gráfica
</label> </label>
<div style="display: flex;"> </div>
<hr>
<div class="zoom-control setting-section">
<div [class.disabled]="funciones.length === 0" style="display: flex;">
<span style="margin-right: 8px; align-self: center;"> <span style="margin-right: 8px; align-self: center;">
Zoom Zoom
</span> </span>
<input <input
type="number" type="number"
class="form-control form-control-sm" class="form-control form-control-sm"
[attr.disabled]="funciones.length === 0 ? '' : null"
[(ngModel)]="animation.zoo" [(ngModel)]="animation.zoo"
[max]="1000000" [max]="1000000"
[min]="8" [min]="8"
...@@ -114,7 +116,7 @@ ...@@ -114,7 +116,7 @@
<div class="animation-controls setting-section" <div class="animation-controls setting-section"
[class.disabled]="animation.data.length === 0"> [class.disabled]="animation.data.length === 0">
<label>Velocidad de animación:</label> <label>Velocidad de animación:</label>
<label> <div>
<button class="btn btn-sm btn-secondary" <button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null" [attr.disabled]="animation.data.length === 0 ? '' : null"
(click)='decreaseSpeed()'> (click)='decreaseSpeed()'>
...@@ -123,7 +125,7 @@ ...@@ -123,7 +125,7 @@
<button class="btn btn-sm btn-secondary" <button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null" [attr.disabled]="animation.data.length === 0 ? '' : null"
(click)='restoreSpeed()'> (click)='restoreSpeed()'>
<i class="fa fa-undo"></i> <span>1x</span>
</button> </button>
<button class="btn btn-sm btn-secondary" <button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null" [attr.disabled]="animation.data.length === 0 ? '' : null"
...@@ -131,9 +133,9 @@ ...@@ -131,9 +133,9 @@
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
<span class="speed-value"> <span class="speed-value">
1x {{animation.speedX | number:'1.1'}}x
</span> </span>
</label> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
......
...@@ -26,6 +26,9 @@ ...@@ -26,6 +26,9 @@
width: 12em; width: 12em;
label { label {
display: block; display: block;
&.disabled {
color: #ccc;
}
} }
input[type="checkbox"] { input[type="checkbox"] {
width: 15px; width: 15px;
...@@ -43,11 +46,16 @@ ...@@ -43,11 +46,16 @@
} }
&.disabled { &.disabled {
color: #ccc; color: #ccc;
i.fa { i.fa, span {
color: #ccc; color: #ccc;
} }
} }
} }
.zoom-control {
&>.disabled {
color: #ccc;
}
}
} }
// Animation // Animation
......
...@@ -43,6 +43,7 @@ export class Graph2DComponent { ...@@ -43,6 +43,7 @@ export class Graph2DComponent {
timer: null, timer: null,
currentFrame: 0, currentFrame: 0,
speed: 1000, speed: 1000,
speedX: 1.0,
playing: false, playing: false,
init: false, init: false,
boton: true, boton: true,
...@@ -353,13 +354,41 @@ export class Graph2DComponent { ...@@ -353,13 +354,41 @@ export class Graph2DComponent {
this.instance.removeAllGraphs(); this.instance.removeAllGraphs();
} }
/**
* @name decreaseSpeed
* @desc Decrease Speed Animation
*/
public decreaseSpeed = function() {
if (this.animation.speedX > 0.07) {
this.animation.speed *= 1.1;
this.animation.speedX -= 0.1;
this.pauseAnimation();
this.runAnimation();
}
}
/**
* @name restoreSpeed
* @desc Increase Speed Animation
*/
public restoreSpeed = function() {
this.animation.speed = 1000;
this.animation.speedX = 1;
this.pauseAnimation();
this.runAnimation();
}
/** /**
* @name increaseSpeed * @name increaseSpeed
* @desc Increase Speed Animation * @desc Increase Speed Animation
*/ */
public increaseSpeed = function() { public increaseSpeed = function() {
this.animation.speed *= 1.5; if (this.animation.speedX < 10) {
console.log(this.animation.speed); this.animation.speed *= 0.9;
this.animation.speedX += 0.1;
this.pauseAnimation();
this.runAnimation();
}
} }
......
...@@ -3,6 +3,7 @@ export interface Animation { ...@@ -3,6 +3,7 @@ export interface Animation {
timer?: any, timer?: any,
currentFrame: number, currentFrame: number,
speed: number, speed: number,
speedX: number,
playing: boolean, playing: boolean,
init: boolean, init: boolean,
boton: boolean, boton: boolean,
......
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