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

Added speed controls for animation

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